בניית Claude Skill לקרוסלות בעברית: למה עברתי מ-AI image ל-HTML/CSS

הסקיל הראשון: API של AI image

במאמר הקודם על Claude Skills בעברית סיפרתי שאני בונה סקיל קרוסלות חדש — ושיש בו בעיה אחת לא פתורה: רינדור עברית. הגרסה שעבדתי עליה אז הייתה אלגנטית בתיאוריה: קלוד מנתח את הבריף ובונה את מבנה הקרוסלה, ה-API של Gemini מייצר את הוויזואל לכל שקף, ה-API של ChatGPT מטייב את הקופי, וסקריפט מרכיב את הכל לקובץ סופי.

ברמת התזמור — זה עבד. שלושה מודלים שונים שעובדים יחד במשימה אחת. ברמת התוצר — זה לא עבד.

דוגמה מהסקיל הישן. הרקע נקי ויפה — אבל הטקסט שהמודל מצייר על גביו הוא לא הטקסט שביקשתי.

בכל קרוסלה שייצרתי, לפחות שקף אחד היה פסול. אות חסרה במילה. ניקוד שגוי שהפך משמעות. אותיות סופיות במקום הלא-נכון. המודלים של AI הולכים ומשתפרים בעברית, אבל הם עדיין לא ברמה שאפשר לפרסם בלי לעבור על כל אות.

וקרוסלה זה לא בלוג פוסט. בבלוג, אם יש שגיאה — תיקנת ופרסמת מחדש. בקרוסלה לאינסטגרם, השגיאה היא חלק מהתמונה. אי אפשר לתקן בלי לייצר את כל השקף מחדש.

התובנה שהפכה את הכל

הניסיון לרנדר עברית באמצעות AI image היה פתרון של דרך הפעולה הלא-נכונה. ניסיתי לעקוף את הבעיה (להגיד למודל לרשום עברית טוב יותר) במקום להגדיר אותה מחדש (למה אני בכלל מבקשת ממודל תמונות לכתוב טקסט).

קרוסלה היא לא תמונה עם טקסט מודבק. קרוסלה היא 7 דפי נחיתה במידות 1080×1350.

ברגע שראיתי את זה ככה — הכל התהפך. דפי נחיתה לא מציירים ב-AI. בונים אותם ב-HTML/CSS, עם פונטים אמיתיים, גריד אמיתי, היררכיית כותרות אמיתית. למה קרוסלה תהיה אחרת?

הסקיל החדש בנוי על העיקרון הזה: טקסט עברית — תמיד ב-HTML, אף פעם לא דרך AI image. מודלים של AI עדיין עושים את מה שהם הכי טובים בו — רקעים, אובייקטים פיסוליים, אווירה. אבל בלי אות אחת של טקסט.

הארכיטקטורה החדשה

הסקיל לא נשאר ב-Claude.ai. הוא עבר ל-Claude Code, סביבת הפיתוח של אנתרופיק — בדיוק בגלל שעכשיו צריך להריץ קוד ולא רק לשוחח. כל קרוסלה היא תיקייה עם 4 רכיבים:

projects/
  └── strawberry-symphony/
        ├── brand.json       ← צבעים ופונטים של המותג
        ├── content.json     ← הטקסטים והמבנה של 7 השקפים
        ├── images/          ← תמונות אמיתיות (אופציונלי)
        └── output.html      ← הקובץ שמרכיב את הכל

התהליך של קלוד עם הסקיל מורכב מ-4 שלבים:

1. בריף קצר. שם הפרויקט, מטרת הקרוסלה (educational / sales / case study / personal brand), כמה שקפים, האם זה לקוח עם Brand DNA קיים או עבודה ב-signature של Brand Worlds Studio.
2. בניית brand.json ו-content.json. קלוד כותב את שני הקבצים על בסיס הבריף. ה-tokens מ-brand.json נטענים אוטומטית ל-CSS variables ב-:root; הטקסטים מ-content.json נכתבים ישירות ב-HTML.
3. בניית output.html. 7 שקפים, כל אחד הוא <section> במידות 1080×1350, עם הטיפוגרפיה, הצבעים, והאלמנטים הפיסוליים מ-CSS טהור.
4. רינדור ל-PNG. סקריפט Node שמשתמש ב-Playwright פותח את ה-HTML, מצלם כל <section>, ושומר אותו כ-slide-1.png עד slide-7.png בתיקיית exports/. דיוק פיקסל מול דפדפן Chromium אמיתי.

זה לא מורכב מבחוץ ולא מורכב מבפנים. השקף הוא HTML רגיל. הצילום הוא Playwright רגיל. הקסם היחיד הוא בכלל שאין AI שנוגע בטקסט.

שמירה על שפת המותג: brand.json

כל פרויקט מחזיק קובץ brand.json משלו. הוא קצר — בערך 30 שורות — ומגדיר את כל מה שמייחד ויזואלית את המותג מקרוסלה לקרוסלה:

{
  "brand_name": "Strawberry Symphony",
  "owner": "Hagit Antebi",
  "tokens": {
    "cream": "#FFF4F0",
    "cream_deep": "#F8E8E0",
    "ink": "#8B2E3C",
    "ink_soft": "#A85060",
    "gold": "#D4A574",
    "gold_soft": "#E8C9A8"
  },
  "fonts": {
    "hebrew_serif": "Frank Ruhl Libre",
    "english_italic": "Cormorant Garamond Italic",
    "hebrew_sans": "Heebo"
  }
}

הסקיל טוען את הקובץ הזה ל-CSS variables בכל קרוסלה. לקוח עם Brand DNA מקבל קרוסלה בצבעים ובפונטים שלו, לא של הסטודיו שלי. זאת ההבדלה העיקרית בין הסקיל הזה לכלי קרוסלה גנרי באינטרנט: כאן מותג שיש לו ספירה כרומטית מלאה ושלוש משפחות פונטים מקבל קרוסלה שמרגישה שלו, לא כזו שמרגישה שלי.

7 טיפוסי שקפים

הטמפלייט תומך ב-7 טיפוסי שקפים. כל אחד נועד לתפקיד נרטיבי שונה. אפשר לערבב אותם, להחליף סדר, או להשתמש באותו טיפוס יותר מפעם אחת בקרוסלה.

הטיפוסים האלו לא נולדו מתאוריה. הם נולדו מתשע קרוסלות שהפקתי ידנית לפני שכתבתי את הסקיל, וזיהיתי שכל קרוסלה מורכבת מקבוצה קטנה של תפקידים נרטיביים שחוזרים. הסקיל הוא בעצם הקוד שמעלה את הזיהוי הזה לכוח הפעלה.

שילוב תמונות אמיתיות

לא כל קרוסלה מסתפקת באובייקטים פיסוליים מ-CSS. לפעמים צריך תמונה אמיתית — צילום מוצר, פורטרט לקוח, screenshot של עבודה, mockup. הסקיל תומך בזה בכל טיפוס שקף שמאפשר ויזואל: התמונה נשמרת ב-images/slide-N-description.jpg, מצויינת ב-content.json תחת השדה image, וה-HTML מציג אותה במקום האלמנט הפיסולי.

שקף מקרוסלת Spectra AI עם שילוב של 3 תמונות אמיתיות בגריד. הטיפוגרפיה ממשיכה להיכתב ב-HTML על גבי הגריד.

הכלל הוא פשוט: ויזואל = AI או צילום אמיתי. טקסט = HTML. שני הצירים מנותקים, ואפשר לערבב כל שילוב.

גלריית קרוסלות מהשבועיים האחרונים

אלו 4 הקרוסלות שהפקתי עם הסקיל החדש מאז שיצא מבטא — כל אחת בסיגנייצ'ר אחר, כל אחת מספרת סיפור אחר.

Brand Worlds Manifesto

המניפסט של הסטודיו ב-7 שקפים. סיגנייצ'ר Brand Worlds — קרם, נחושת, פיסולי CSS.

Spectra AI

קרוסלה ל-case study של Spectra. פלטה כחולה-זהובה, שילוב של 3 תמונות עבודה אמיתיות.

Strawberry Symphony

קרוסלה לפרויקט קונספט שוקולד. Brand DNA נפרד — ורוד-בורגונדי, פונטים אחרים, תחושה אחרת.

AI Video Lab

קרוסלה ל-hub של מעבדת הווידאו. פלטה כהה, אווירה קולנועית, שילוב כותרים באנגלית.

אותו סקיל. ארבע פלטות. ארבעה מותגים. אותה איכות רינדור עברית.

תהליך הפרסום

אחרי שהסקיל מסיים, יש לי תיקייה עם 7 קבצי PNG מוכנים. משם הפרסום פשוט:

1. בדיקה ב-Finder/Explorer. אני רואה את כל 7 השקפים בבת אחת ב-grid view. אם משהו לא יושב — חוזרת לסקיל ומבקשת תיקון נקודתי.
2. העברה לטלפון. AirDrop / Telegram / Drive — מה שמתאים.
3. העלאה לאינסטגרם. Carousel post רגיל. בוחרת את 7 השקפים, מעלה, מוסיפה caption.

זה הכל. אין שלב עיצוב נפרד. אין export מ-Canva. אין תיקון שגיאות אחרי AI. ה-PNG שיוצא מהסקריפט הוא ה-PNG שעולה לאינסטגרם.

הסיפור האמיתי: הפרדת תפקידים

אם הייתי צריכה לסכם את כל המעבר במשפט אחד, זה לא היה "עברתי מ-API ל-HTML". זה היה "הפסקתי לתת לכלי אחד לעשות שני דברים שונים".

מודלי AI image מצויינים בייצור רקעים, מרקמים, אווירות, אובייקטים פיסוליים. הם פחות טובים בכתיבת טקסט עברית — לא בגלל שהם רעים, אלא בגלל שזו פעולה אחרת לחלוטין. רנדור טקסט בפונט מסויים בגודל מסויים על מיקום מסויים בלוח שלם — זה תפקיד של דפדפן, לא של מודל AI.

הסקיל הטוב הוא לא כזה שמשתמש ב-AI לכל דבר. הוא כזה שיודע לאיזה תפקיד AI מתאים, ולאיזה תפקיד הוא לא.

זה גם הסיפור של ששת הסקילים האחרים שלי. Marketing Manager כותב פוסטים — לא מעצב. Brand Strategist מנתח מתחרים — לא מייצר תמונות. Pitch Builder מייצר HTML — לא PDF. כל אחד יודע מה הוא ומה הוא לא.

הסקיל החדש הוא הראשון שלי שעושה את ההפרדה הזאת בתוך משימה אחת — וזה מה שהופך אותו למקרה מבחן. הוא כולל גם AI (לרקע) וגם קוד טהור (לטקסט), ויודע מתי להשתמש בכל אחד.

שאלות נפוצות