--- allowed-tools: Read Grep Glob Bash WebSearch WebFetch TaskCreate TaskUpdate name: hamakom-carousel description: > בונה קרוסלות אינסטגרם של "המקום הכי חם בגיהנום" ישירות בתוך Figma. סקיל נפרד מ-hamakom-graphic (שמטפל בפוסטים בודדים). גרפיקות הכתבה ב-6 פורמטים מיוצרות עכשיו ע"י הסקיל הנפרד hamakom-graphic — לא כאן. המודל: 12-14 שקפים. קאבר עם hero image + label/name/tagline. פסקה-לשקף לפי סדר הכתבה — מילה במילה. מספור גדול "01"-"NN" באדום. פורטרטים של הדוברים לצד הציטוטים שלהם. תמונת הקשר איפה שצריך. CTA אחיד בסוף. פלט: קובץ Figma חדש לכל כתבה, עם Frames של 1080×1350 מוכנים לעריכה ו-export. פלטה: **דינמית — נבחרת מחדש לכל כתבה בהתאם לנושא ולמצב הרגשי של הסיפור.** אין פלטה קבועה של המותג. ראה חוק 0b לפרטים. פונטים: NextExit (תצוגה) + Narkiss Tam (גוף) + Inter (UI/מספור). הפעל את הסקיל בכל פעם שדור מבקש: - "תעשה קרוסלה לכתבה" / "carousel" / "אינסטגרם רב-שקפי" - URL של כתבה ב-ha-makom + בקשה להפיק קרוסלה לאינסטגרם - "תעשה לי קרוסלה על X" כשיש טקסט כתבה --- # קרוסלת אינסטגרם — המקום הכי חם בגיהנום --- ## ⭐ המודל הפשוט (תקן מעודכן — קרא קודם) זה הסיכום של מה שעובד אחרי עשרות קרוסלות. **חוקים אלו עוקפים את כל מה שכתוב אחריהם** במקרה של סתירה. כל חוק מבוסס על תיקון שדור ביקש פעם אחת לפחות. ### 1. מבנה ברירת מחדל ``` 00 Cover (hero image + h1 verbatim + lede + byline) 01-NN Paragraphs (טקסט verbatim, פסקאות מאוחדות לצורך מילוי שקף) EE Evidence (אופציונלי) (תמונות ראיה מלאות — FIT, ללא קרופ) NN CTA (CTA קנוני) ``` **אורך טיפוסי:** 10-16 שקפים. **לא להעמיס.** ### 2. פסקאות verbatim — מילה במילה, בסדר של הכותב - **הכתבה מובאת בסדר שבו הכותב כתב אותה.** לא בוחרים, לא מקצרים. - אם פסקה קצרה (פחות מ-200 תווים) — **מאחדים** אותה עם הפסקה הבאה כדי שהשקף לא יישאר חצי-ריק. - **לא יוצרים pull-quotes כשקפים נפרדים.** ציטוטים מודגשים בכתבה (״״) משולבים בתוך הפסקה הסמוכה שמכילה אותם. - **לא ממציאים כותרות, לא מתמצתים, לא משכתבים.** ### 3. גודל פונט אחיד בכל שקפי הטקסט - **42pt Narkiss Tam Regular** (fallback: Inter Regular). - line-height 152%. - **בלי Semibold לקריאוויטיב** — אותו משקל בכל הקרוסלה. - אם פסקה מאוחדת ארוכה מדי — מקטינים אוטומטית עד 28pt (בודק `body.height`), אבל **לא משנים גודל בין שקפים שכן נכנסים**. - טקסט ממורכז אנכית בשטח של y=320 → y=1230 (גובה 910). ### 4. h1 verbatim בקאבר ובגרפיקות - **בקאבר:** הכותרת המלאה של הכתבה מילה במילה. - **בעמוד הגרפיקות:** אותו h1. - **אסור** להשתמש ב-`og:title` (זה SEO title, בדרך כלל שונה ויותר קצר). - אם ה-h1 ארוך — מקטינים `fontSize` (לא חותכים מילים). ### 5. תמונות — סדר עדיפויות **לפני שמורידים מהאינטרנט — בודקים קודם:** 1. `~/Documents/המקום/...` — תיקיות עבודה (פירר, יפו 44, וכו׳) 2. `~/Downloads/` — קבצים אחרונים שדור שם 3. `og:image` של הכתבה 4. תמונות inline נוספות בכתבה (לרוב מתוך מאמרי flash90 לפי שמות הקבצים) **אם דור שם תמונות בקנבס של הקובץ Figma** — להשתמש בהן ולא להוריד אחרות. ### 6. צילומי מסך — FIT ולא קרופ **אם זה צילום מסך (וואטסאפ, אינסטגרם, פייסבוק, מיילים) — להציג במלואו בלי קרופ.** - שקף נפרד עם `scaleMode: "FIT"` - התמונה ממורכזת, עם רקע השקף סביב (letterbox) - label "ראיה · [תיאור]" למעלה - credit למטה: "שימוש לפי סעיף 27א׳" **אם זה תמונה רגילה (לא צילום מסך)** — אפשר לחתוך בדומיננטיות אלא אם דור מבקש אחרת. ### 7. אין כפילויות של תמונות **לא להשתמש באותה תמונה ביותר משקף אחד** (חוץ מהקאבר). אם יש 3 שקפי תמונה צריך 3 תמונות שונות. ### 8. כללי "אל תמחק" - **אם דור עורך משהו ידנית בקובץ Figma — לא מוחקים את זה.** - לפני "rebuild" מנקים **רק** frames שמתחילים בפטרנים שלי: `00-cover`, `NN-paragraph`, `NN-paragraph-image`, `evidence-*`, `NN-cta`. - frames של דור (״אינסטגרם״ בעברית, או שם מותאם) — לא נוגעים. - תמונות גולמיות בקנבס (לרוב בשם "unnamed N") — לא נוגעים. ### 9. כשמחליפים תוכן — לא מאבדים את הקיים - **לא ממירים שקף טקסט לשקף תמונה** בלי לשמור את הטקסט במקום אחר. - אם רוצים להוסיף שקף תמונה לסיפור שכבר יש בו שקף טקסט — **מוסיפים שקף חדש**, לא מחליפים. ### 10. CTA קנוני (בלי שינויים) ``` בלי בעלי הון. בלי פרסומות. בלי בולשיט [לתחקיר המלא] ← pill button ``` רקע אדום `#f70d28`, טקסט לבן. **לעולם לא "כשציבור מממן, ציבור קובע".** ### 11. פלטה — קנונית אלא אם הסיפור דורש אחרת ברירת מחדל לתחקירים: `#141413` שחור + `#f4f1ec` קרם + `#f70d28` אדום + `#9e8e7c` אפור. אם הסיפור דורש פלטה שונה (אבל בעזה, אקלים, וכו׳) — ראה חוק 0b למטה. אבל במקרה ספק — קנונית. ### 12. שקף ראיה (Evidence slide) — תבנית ```javascript async function ISlide(idx, imageHash, imgW, imgH, label, credit, xPos){ // Full-bleed FIT image, no crop // - top stripe red 3px // - small label top-right: "ראיה · [תיאור]" (Inter Bold 20pt, accent) // - logo top-right // - number top-right (Inter Bold 78pt, accent) // - image FIT centered in area y=200 to y=1190 // - credit bottom-center (FD Light 16pt): "שימוש לפי סעיף 27א׳" // - URL strip bottom } ``` ראה הקוד המלא ב-`scripts/build_figma_simple.md`. ### 13. הקאפשיין לפוסט אחרי הקרוסלה, **מציעים קאפשיין לאינסטגרם** עם: - שורת hook (שאלה רטורית או ציטוט מהכתבה) - 2-3 שורות הסבר על המהות - bullets ← עם הנקודות העיקריות - ההצהרה החדה ("**זאת לא חוליה שבורה אחת. זאת שיטה.**") - "החליקו ←" + הפניה ללינק בביו - credit לכותב + hashtags --- ## פלטה — מתי לסטות מהקנונית ברירת המחדל היא הקנונית (סעיף 11 לעיל). סטייה מותרת **רק** כשהסיפור באמת דורש זה — לרוב לא. **טבלת השוואה — לא קטלוג שאסור לחרוג ממנו:** | נושא | bg | fg | accent | תחושה | |------|----|----|--------|--------| | תחקיר/חקיקה (ברירת מחדל) | `#141413` שחור עמוק | `#f4f1ec` קרם | `#f70d28` אדום | אזעקה, חד | | הומניטריות בעזה | `#1a1a2e` נייבי כהה | `#e8e4d6` קרם לח | `#c97064` חימר אדום | אבל, גרון תקוע | | כסף ציבורי/שחיתות | `#2d2620` חום שרוף | `#f2c14e` ענבר זהב | `#d62828` אדום פצע | כעס, גניבה | | משבר אקלים | `#0d1f1a` ירוק יער | `#e8f1ee` מנטה | `#ff7849` שמש קלויה | דחיפות | | דעה — פוליטיקה | `#0f1620` כחול שינה | `#f7f3e8` ניר ישן | `#e76f51` אש קטנה | פרשנות שקטה | **אסור תמיד:** פסטל-סוכר, corporate-tech (turquoise-OpenAI), צבעי-מותג מזוהים (ירוק WhatsApp), pastel. **בדיקת contrast:** `fg` על `bg` חייב לעבור WCAG AA (4.5:1 ל-body). --- ## פונטים — הגדרה מלאה | שכבה | פונט | משקלים | שימוש | |------|------|---------|--------| | **תצוגה** | NextExit | Bold / Regular / Light | שם בקאבר, label "כנסת"/"תחקיר"/"דעה", tagline, ציטוטים בולטים, CTA, byline | | **גוף** | Narkiss Tam | Regular / Semibold | פסקאות הכתבה (38-45pt). Semibold לדגש על ציטוט מרכזי בפסקה | | **UI** | Inter | Bold / Light | מספור גדול "01"-"NN", טקסט בכפתור, URL בפס תחתון | **הקבצים** ב-`assets/fonts/`: - `NextExitBold.otf` - `NextExitRegular.otf` - `NextExitLight.otf` - (Narkiss Tam מותקן במחשב של דור דרך Font Book — לא בתיקייה) **התקנה חד-פעמית במחשב לפני הפעלה:** ```bash cp ~/Documents/המקום/שיווק/hamakom-carousel/assets/fonts/*.otf ~/Library/Fonts/ ``` **אם Figma plugin עדיין מציג Inter** אחרי ההתקנה — צריך **restart מלא ל-Figma desktop** (סגירה + פתיחה). plugin context שומר cache של רשימת הפונטים בפתיחה. **Fallback בזמן ריצה:** הסקיל בודק `figma.listAvailableFontsAsync()` ואם NextExit/Narkiss Tam לא מותקנים — נופל אוטומטית ל-Inter ומחזיר flag `font_fallback_used: true` בפלט, כדי שדור ידע לעשות restart ולהפעיל שוב. --- ## מבנה הקאבר הקנוני (שקף 00) **הקאבר חייב hero image.** טקסט-בלבד הוא לא הסטנדרט. ``` y=0 פס אדום 3px y=3 תמונה full-bleed עד y=820 - gradient שחור יורד למטה (alpha 0.10 → 0.50 → 1.00) - credit לתמונה ב-bottom של אזור התמונה (y=770, Light 22pt, opacity 0.85) y=820 בלוק שחור עד y=1294 y=850 label — NextExit Regular 32pt אדום, letter-spacing 6px (קטגוריית הכתבה: "כנסת" / "תחקיר" / "דעה" / "מדיני-בטחוני" וכו') y=900 title — NextExit Bold (גודל דינמי 64-100pt לפי אורך) לבן **הכותרת המלאה של הכתבה — מילה במילה. לא קיצור, לא "ידית".** אם הכותרת ארוכה: מקטינים fontSize (מינ׳ 64pt) ומפצלים לכמה שורות באופן טבעי. הכותרת תופסת את כל גובה ה-content area של הבלוק השחור (y=900 עד y=1200). y=1230 byline — NextExit Regular 28pt אפור: "תחקיר: [שם]" / "דעה: [שם]" y=1294 פס אדום תחתון 56px + "H A - M A K O M . C O . I L" chrome: לוגו SVG ימין-עליון 72×72 לבן (מ-assets/logo-square-black.svg) REC dot אדום עליון-שמאל + "REC" Inter Bold 18pt לבן ``` **הכותרת מילה במילה (חוק 0a):** הקאבר מחזיק את הכותרת המלאה של הכתבה. לא לגזור, לא לקצר, לא להמציא "ידית". הגודל הוא הדינמי שמתאים: | אורך הכותרת | fontSize | שורות אופייני | |--------------|----------|----------------| | עד 25 תווים | 100pt | 1-2 שורות | | 25-45 תווים | 84pt | 2-3 שורות | | 45-65 תווים | 72pt | 3 שורות | | 65+ תווים | 64pt | 4 שורות | מקטינים את ה-fontSize רק אם הכותרת בגודל מקסימלי לא נכנסת. לא חותכים מילים. --- ## מבנה שקף-פסקה (שקפים 01 עד N-1) ראה סעיף 3 ב"מודל הפשוט" + הקוד המלא ב-`scripts/build_figma_simple.md` (`PSlide`). תקציר: פס אדום 3px → לוגו פינתי → מספר אדום Inter Bold 110pt → קו אדום קצר → טקסט Narkiss Tam **42pt Regular אחיד** ממורכז אנכית בשטח y=320 עד y=1230 → פס URL אדום תחתון. **לא** משלבים פורטרטים בתוך שקף הפסקה, **לא** משלבים תמונות הקשר בתוך שקף הפסקה. אם רוצים תמונה — שקף Evidence נפרד (ראה סעיף 12 ב"מודל הפשוט" + `ISlide` בקובץ ה-scripts). --- ## מבנה ה-CTA (שקף N — אחרון תמיד) ראה סעיף 10 ב"מודל הפשוט". רקע אדום, לוגו wordmark לבן, שלוש שורות, כפתור pill, פס תחתון לבן. --- ## איסוף תמונות סדר עדיפויות: 1. **ידני** — דור מצמיד תמונות לבקשה → cover + slides לפי סדר חשיבות. 2. **og:image של הכתבה** — תמיד הקאבר. 3. **חילוץ candidate images מהגוף** — לשקפי הקשר. 4. **WebSearch לפורטרטים** של דוברים בכתבה (מקור מועדף: Wikipedia, פלאש 90, צילומי מסך מאתרי חדשות). 5. **Adobe Firefly** — fallback להמחשה (אם אין תמונה אמיתית). פרומפט קבוע: `dark cinematic Hebrew journalism aesthetic, no text, no faces, atmospheric`. **קאטאוטים (background-removed)** — תמיד דרך MCP `image_remove_background` של Adobe לפני הצבה בפיגמה. **credit חובה לכל תמונה** — text node קטן Narkiss Tam Light 22pt בתחתית התמונה, opacity 0.85. --- ## נכסים קבועים (קריטי — לא לייצר מטקסט) | נכס | נתיב | שימוש | |-----|------|--------| | לוגו ריבועי שחור (SVG) | `assets/logo-square-black.svg` | chrome פינתי ~72×72 (לבן על שחור) בכל שקף | | לוגו wordmark לבן (PNG) | `assets/logo-wordmark-white.png` | CTA במרכז עליון, ~480×142 | **חוק ברזל:** לעולם **לא** ליצור `figma.createText("המקום\nהכי חם\nבגיהנום")` לבניית לוגו. תמיד `figma.createNodeFromSvg()` ל-SVG או `upload_assets()` ל-PNG. **טיפ ל-SVG:** אחרי `createNodeFromSvg()` יש לאפס את ה-fill של ה-frame העטיפה (לפעמים נטענת כ-solid white) ולעדכן fills רק על vector children: ```javascript node.fills = []; const recurse = (n) => { if (["VECTOR", "BOOLEAN_OPERATION", "POLYGON", "RECTANGLE"].includes(n.type)) { n.fills = [{ type: "SOLID", color: fillColor }]; } if ("children" in n) n.children.forEach(recurse); }; recurse(node); ``` --- ## גרפיקות הכתבה — עברו לסקיל hamakom-graphic עמוד הגרפיקות הנלווה (6 הפורמטים הבודדים — Hero לאתר, אינסטגרם, פייסבוק, X, וואטסאפ) **כבר לא נבנה כאן.** הוא מיוצר עכשיו ע"י הסקיל הנפרד `hamakom-graphic`, שמחזיק את אותו עיצוב בדיוק (פונטים, פלטה, לוגו, gradient, h1 verbatim). הקרוסלה כעת מפיקה **עמוד Figma אחד בלבד** (Carousel). אם דור רוצה גם את 6 הגרפיקות הממותגות — מפעילים את `hamakom-graphic` בנפרד. --- ## תהליך הפעלה (Claude reads this and follows) 1. קורא SKILL.md הזה. 2. (אופציונלי) קורא `design-spec/tokens.md` לפרטי צבע מדויקים (chrome נגזר משם). 3. **לא קורא** `design-spec/archetypes.md` ו-`design-spec/slide-blocks.md` — הם ארכיון של הארכיטקטורה הישנה. 4. שולף את הכתבה (WebFetch / defuddle) ומחלץ: - og:image - byline - קטגוריה (label) - פסקאות הגוף (כל one separated by paragraph break) - דוברים מרכזיים שיופיעו כפורטרטים 5. בוחר 10-12 פסקאות נרטיביות + יוצר name+tagline לקאבר. 6. מחפש פורטרטים (WebSearch + Wikipedia API): `https://he.wikipedia.org/w/api.php?action=query&format=json&prop=pageimages&titles={SLUG}&pithumbsize=800&pilicense=any` 7. (אופציונלי) קורא ל-Adobe `image_remove_background` לקאטאוטים. 8. קורא ל-MCP figma `create_new_file` editorType=design + planKey. 9. בקריאה אחת או שתיים ל-`use_figma` בונה את כל ה-frames של הקרוסלה (Page 1: `Carousel`). 10. ל-cover image + portraits + context images: יוצר rect placeholder עם node.id, מחזיר את ה-ids, ואז קורא ל-`upload_assets` עם nodeId לכל אחד. 11. screenshot של 3-4 frames מרכזיים של הקרוסלה (כולל הקאבר) ל-QA חזותי. 12. מחזיר לדור: URL לקובץ Figma, רשימת frames של עמוד הקרוסלה, רשימת תמונות+credit, flag `font_fallback_used` אם נפל ל-Inter. --- ## QA חזותי לפני מסירה לפני שמחזירים URL לדור — לקחת screenshot של: 1. Cover של הקרוסלה (00) 2. שקף-ציטוט אחד עם פורטרט (לוודא שהטקסט לא חתוך ע"י הפורטרט) 3. שקף-הקשר עם תמונה (לוודא קומפוזיציה) 4. CTA של הקרוסלה (לוודא לוגו wordmark נטען ולא ריק) ולוודא: - ☐ אין "כשציבור מממן" באף מקום - ☐ פונט 42pt Regular אחיד בכל שקפי הטקסט (סעיף 3 ב"מודל הפשוט") - ☐ אין pull-quotes שכופלים טקסט שכבר נמצא בפסקה אחרת - ☐ צילומי מסך ב-FIT mode, ללא קרופ - ☐ אין אותה תמונה בשני שקפים שונים (חוץ מהקאבר) - ☐ לוגו chrome מופיע בכל שקף (לא רק ריבוע לבן ריק) - ☐ לוגו wordmark מופיע ב-CTA - ☐ מספור 01..NN בכל שקף תוכן - ☐ פסקאות הן verbatim מהכתבה (לא נוסחו מחדש) --- ## כללי כלליים (תוספת) 1. **אין אימוג'ים** באף שקף. 2. **כל תמונה — credit** (אפילו אם זה רק "Firefly"). 3. **לא מייצרים PNG ב-Pillow.** הפלט הוא Figma file. דור עורך, ואז מייצא PNG/JPG דרך Figma. --- ## CLI / שימוש מתוך Claude קלט אופייני מדור: ``` תעשה לי קרוסלה על הכתבה הזו: https://www.ha-makom.co.il// ``` או: ``` תעשה קרוסלה על הטקסט הזה: תמונות: /path/to/photo1.jpg, /path/to/photo2.jpg ``` --- ## פלט אופייני ``` קובץ Figma: https://www.figma.com/design/ פונט בשימוש: NextExit + Narkiss Tam (font_fallback_used: false) עמוד 1 — Carousel (13 שקפים: cover + 11 paragraphs + cta) 00 cover hero image (og:image) + name "חוק המורשת לעזה" 01..11 paragraph פסקאות verbatim מהכתבה 12 cta "בלי בעלי הון. בלי פרסומות. / בלי בולשיט / לתחקיר המלא" תמונות: 4 hero/context (פלאש 90) + 3 פורטרטים (Wikipedia) ```