branded-visuals

Skill

Owner: SocialRise · Team: SocialRise · Source: ~/.openclaw/workspace-social/skills/branded-visuals/SKILL.md

יצירת תמונות וקרוסלות עם כיתוב עברי מושלם + לוגו Asset Rise — רקע מ-AI, טקסט מ-Remotion. השתמש כשצריך תמונה/קרוסלה לפוסט.

---

Playbook (mirrored from disk)

Branded Visuals — תמונות/קרוסלות עם כיתוב עברי מושלם

הבעיה והפתרון

gpt-image-2 לא יודע לרנדר עברית (יוצא מעוות). לכן מפרידים:

1. רקע — image_generate מייצר ויזואל/אווירה בלי טקסט.
2. טקסט + לוגו — מתווספים מעל ב-Remotion (React/HTML מרנדר עברית RTL מושלם).

Workflow לתמונה בודדת

1. כתוב brief לרקע (ראה skill image-briefs) → image_generate בלי טקסט, יחס לפי הפלטפורמה. שמור את הנתיב.
2. השתמש בתבנית Remotion המוכנה: ~/.openclaw/workspace-social/remotion/branded/ (קומפוזיציה BrandedPost).
3. רנדר still עם הפרופס: רקע, כותרת, תת-כותרת, לוגו, פלטפורמה:

   cd ~/.openclaw/workspace-social/remotion/branded
   npx remotion still BrandedPost out/post.png \
     --props='{"bg":"<נתיב הרקע>","headline":"<כותרת>","subline":"<תת-כותרת>","platform":"instagram"}'

4. עבור self-review (כולל: הטקסט קריא? הלוגו בקונטרסט? יחס נכון?) ושלח לאישור.

קרוסלה

• כל סלайד = still נפרד עם אותו סגנון (סלайד 1 = hook, אמצע = תוכן, אחרון = CTA + לוגו גדול).
• השתמש באותה קומפוזיציה עם פרופס שונים לכל סלайד; שמור slide-1.png, slide-2.png…

כללי טיפוגרפיה (לעברית מושלמת)

• פונט Heebo דרך @remotion/google-fonts (ראה skill remotion-best-practices → google-fonts, measuring-text).
• direction: rtl, textAlign מתאים. כותרת Bold/ExtraBold, ניגודיות גבוהה מול הרקע.
• שכבת כהות/גרדיאנט מעל הרקע אם הטקסט לא קריא.

לוגו

• בחר לפי רקע (ראה BRAND.md → לוגואים). נתיב: ~/.openclaw/workspace-social/assets/logos/<file>.png.
• פינה אחת, ~10-15% מהרוחב, לא דורסני.

Do / Don’t

• ✅ רקע AI נקי בלי טקסט · טקסט עברי דרך Remotion · לוגו רשמי · ניגודיות · יחס נכון לפלטפורמה.
• ❌ לבקש מ-gpt-image לכתוב עברית · טקסט לא קריא · לוגו מעוות/מתוח · יחס לא מתאים · קלישאות סטוק.