בניית Pipeline לקרוסלות ברשתות החברתיות ללא כלי עיצוב

הקרוסלה האחרונה שיצרתי בעזרת Claude Code ו-Playwright מעולם לא עברה ב-Canva, ב-Figma או באף כלי עיצוב אחר.

התהליך היה אוטומטי לחלוטין: Claude Code כתב את התוכן, בנה את השקפים, צילם צילומי מסך (screenshots) ותזמן את הפרסום.

התפקיד שלי הסתכם באישור של כל שלב לפני שהסוכן המשיך הלאה.

זהו ה-Pipeline הרגיל (default) שלי ליצירת קרוסלות לרשתות החברתיות.

בפוסט הזה אציג איך התהליך עובד, ואשתף Skill מוכן לשימוש שתוכלו להטמיע אצלכם כבר עכשיו.

כיצד ה-Pipeline עובד?

הרעיון המרכזי פשוט: במקום לעצב שקפים ידנית בכלי ויזואלי, Claude מייצר כל שקף כדף HTML עצמאי.

לאחר מכן, Playwright – ספריית האוטומציה לדפדפנים – מצלמת צילום מסך (screenshot) ברזולוציה גבוהה של כל דף HTML כזה.

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

כבר יצרתי בעבר Skill שמגדיר את Playwright בתוך דקה.

אין צורך בייצוא ידני (exports), בחיפוש תבניות (templates) מייגע או ברכישת מנויים יקרים לתוכנות עיצוב.

תהליך האישור מובנה וברור (Human-in-the-Loop): לאחר ש-Claude מנסח את תוכנית השקפים, נדרש אישור ידני לפני שמתחילה הבנייה בפועל. ברגע שהשקפים מוכנים, בודקים את התמונות לפני שהן מועברות לתזמון. ה-AI מטפל בכל עבודת הייצור השחורה, בעוד אתם שומרים על שליטה מלאה.

דרישות קדם

• Python 3.10+ – להרצת סקריפט רינדור השקפים.
• Node.js – עבור Playwright וכלי עזר לצילומי המסך.
• Claude Code – שרץ מקומית בסביבת העבודה שלכם.
• קובץ לוגו (PNG) – אופציונלי, להוספת מיתוג בחלק התחתון (footer). אם אין לוגו, Claude ישתמש בשמכם כטקסט פשוט.

אין צורך בחשבון Canva, במנוי עיצוב או ברכישת קרדיטים בענן מעבר לשימוש הרגיל ב-Claude Code.

שלבי העבודה

התהליך מורכב משישה שלבים, כשבכל אחד מהם נדרש אישור ידני שלכם:

1. הגדרת המותג – Claude יבקש את שמכם, ה-handle שלכם, ה-hashtag המועדף, קובץ לוגו וסגנון עיצובי מועדף. פרטים אלו יישמרו כברירת מחדל עבור כל הקרוסלות הבאות.
2. יצירת מבנה התיקיות – Claude מייצר את פריסת התיקיות הנדרשת: קובצי הגדרות (configs), נכסי מותג (brand assets), שקפים בתהליך עבודה וארכיון פרסומים.
3. התקנת הסקריפטים – Claude כותב סקריפט Python שממיר קובץ הגדרות פשוט (YAML) לשקפי HTML מעוצבים, ומצלם אותם בעזרת Playwright. כל התלויות (dependencies) מותקנות בתוך סביבה וירטואלית (virtual environment).
4. יצירת התוכן – אתם מתארים את נושא הפוסט, ו-Claude מנסח תוכנית שקפים מפורטת: שקף פתיחה (cover), שקפי תוכן ושקף הנעה לפעולה (CTA). הבנייה מתחילה רק לאחר אישורכם.
5. בנייה ורינדור – Claude מריץ את הסקריפט, מייצר את קובצי ה-PNG ומציג לכם אותם. בשלב זה אתם מאשרים את התוצאה הוויזואלית.
6. פרסום – השקפים מועברים לכלי התזמון והפרסום שלכם, והתיקייה עוברת לארכיון הפרויקטים שפורסמו.

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

ההגדרה הראשונית אורכת כ-15 דקות.

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

הערה קטנה לגבי התוכן: Claude אינו יכול לנחש באופן אוטומטי את טון הכתיבה הייחודי שלכם, ולכן מומלץ לספק לו הנחיות סגנון בשלב 4. ברגע שתגדירו זאת פעם אחת, Claude יזכור את סגנון הכתיבה שלכם לקרוסלות הבאות.

עיצוב השקפים

כדי לשמור על מראה נקי ועקבי, ה-Pipeline תומך בשלושה סוגי שקפים בסיסיים:

• שקף פתיחה (Cover) – רקע שחור, טקסט בולט וגדול במרכז, והנעה לפעולה מסוג "Swipe Right".
• שקף תוכן (Content) – רקע לבן, כותרת וטקסט גוף קריא, קו הפרדה מעוצב (accent line) וחלק תחתון (footer) הכולל לוגו.
• שקף הנעה לפעולה (CTA) – רקע שחור, שאלה מרכזית המעודדת מעורבות, וכפתור עם מסגרת בולטת.

הלוגו מותאם אוטומטית לרקעים כהים (הופך ללבן). המערכת מגבילה את מספר השקפים לעד 10 שקפים לכל היותר – הגבול הקשיח של LinkedIn ו-Instagram.

התקנת ה-Skill בסוכן שלכם

שמרו את ה-Skill המופיע למטה כקובץ בשם .claude/commands/carousel-pipeline.md בתיקיית הפרויקט שלכם. לאחר מכן, פשוט הקלידו /carousel-pipeline בתוך ממשק ה-Claude Code שלכם כדי להתחיל בתהליך.

בפעם הראשונה שתריצו את הפקודה, Claude יגדיר את כל סביבת העבודה ויכתוב את סקריפט הבנייה. בריצות הבאות הוא ידלג ישירות לשלב יצירת התוכן.

קוד ה-Skill מוכן להעתקה

markdown
# /carousel-pipeline

Build a social media carousel end-to-end: content → HTML slides → screenshots → approval → publish.
Runs locally. No design tool needed.

---

## First Run vs. Returning Sessions

**First run** (no `carousel/` folder yet): complete Steps 0 through 3 before content.
**Returning session**: skip to Step 4. Brand and scripts are already in place.

---

## Step 0 - Define Your Brand

Ask the user:

1. Your name (for slide footer)
2. Your social handle (e.g. @yourhandle)
3. Primary hashtag (e.g. #ClaudeCode)
4. Logo file path (PNG preferred) - or "no logo"
5. Slide style preference (default: black and white)

Store answers. They become defaults for every carousel config.

---

## Step 1 - Create Folder Structure

Create in the project root:

```
carousel/
  config/        ← one YAML file per post slug
  brand/         ← logo.png and other brand assets
  in-progress/   ← slides being built (one subfolder per slug)
  published/     ← move here after publishing
```

---

## Step 2 - Set Up Python Environment

```bash
python -m venv carousel/.venv
```

Activate:
- Windows: `carousel\.venv\Scripts\activate`
- Mac/Linux: `source carousel/.venv/bin/activate`

Install:
```bash
pip install pyyaml
```

---

## Step 3 - Install Playwright and Build Script

Install Playwright globally:

```bash
npm install -g playwright
npx playwright install chromium
```

Create `carousel/screenshot.js`:

```js
const { chromium } = require('playwright');
const path = require('path');

const [,, inputPath, outputPath = 'screenshot.png', ...flags] = process.argv;
const width = parseInt((flags.find(f => f.startsWith('--width=')) || '--width=800').split('=')[1]);
const height = parseInt((flags.find(f => f.startsWith('--height=')) || '--height=1000').split('=')[1]);

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.setViewportSize({ width, height });
  const url = inputPath.startsWith('http')
    ? inputPath
    : `file:///${path.resolve(inputPath).replace(/\\/g, '/')}`;
  await page.goto(url, { waitUntil: 'networkidle' });
  await page.screenshot({ path: outputPath, fullPage: false });
  await browser.close();
  console.log(`Screenshot saved: ${outputPath}`);
})();
```

Create `carousel/build.py`. This script:
- Reads a YAML config file
- Renders one HTML page per slide (three types: cover, content, cta)
- Screenshots each page via `carousel/screenshot.js` at 800x1000px
- Saves PNG files to the output directory in the config

**Slide types:**
- `cover` - black background, large centered heading, name/handle footer, "Swipe Right" button
- `content` - white background, left-aligned heading + body text, optional `accent: true` adds a rule line, logo footer
- `cta` - black background, centered heading + subtext + bordered button, name/handle footer

**Logo handling:** if a `logo:` path is set in config, render it as an `<img>` tag in the footer.
On dark slides use `filter: invert(1)`. On light slides use as-is.
Fallback: render text (author name + handle) if no logo.

**Font:** Poppins via Google Fonts (800 weight for headings, 400 for body).

**Config format:**
```yaml
output_dir: carousel/in-progress/[slug]/
author: Your Name
handle: "@yourhandle"
hashtag: "#YourHashtag"
logo: carousel/brand/logo.png   # omit if no logo

slides:
  - type: cover
    heading: "Your hook here"

  - type: content
    heading: "Section heading"
    body: "Body text for this slide."
    accent: true

  - type: cta
    heading: "Your CTA question"
    body: "How to take action."
    cta_button: "Comment below"
```

Run to build:
```bash
python carousel/build.py carousel/config/[slug].yaml
```

---

## Step 4 - Write the Post Content (Approval Gate 1)

Ask the user:
- What is this post about?
- Who is the audience?
- What's the one thing you want them to take away?

Write a slide plan (max 10 slides):
- Slide 1: Cover - the hook. One strong claim or question.
- Slides 2-8: Content - one idea per slide. Short and scannable.
- Last slide: CTA - one clear action.

**Present the slide plan. Wait for explicit approval before building anything.**

---

## Step 5 - Build the Slides (Approval Gate 2)

Create `carousel/config/[slug].yaml` from the approved slide plan.

Run:
```bash
python carousel/build.py carousel/config/[slug].yaml
```

Screenshot each output PNG and show it to the user.

**Wait for explicit approval before publishing.**

---

## Step 6 - Publish

Slides are in `carousel/in-progress/[slug]/`. Upload using your publishing tool.

After publishing: move the folder to `carousel/published/[slug]/`.

---

## Hard Limits

| Platform  | Max slides |
|-----------|-----------|
| LinkedIn  | 10        |
| Instagram | 10        |
| Facebook  | 16        |

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

אתם לא מתקינים תוסף (plugin) צד שלישי ולא מתחברים לעוד כלי SaaS חיצוני. אתם בונים כלי שנמצא בבעלותכם המלאה – וברגע שהוא קיים, תוכלו להרחיב ולהתאים אותו לצרכים שלכם ללא שום מגבלה.

סקריפט ה-build.py האישי שלי כולל התאמה אוטומטית של צבעי הלוגו, תמיכה בשלושת סוגי השקפים שהצגתי, והגדרה של הגופן (font) הפופולרי Poppins.

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

בהצלחה! :)