כלי עיצוב (כוחות-על אופציונליים) — Figma, Google Stitch ו-MCP

12.1 ההבהרה החשובה ביותר בפרק — הידע > הכלים

אם תקראו רק סעיף אחד מהפרק הזה — שזה יהיה הסעיף הזה. אם תזכרו רק משפט אחד מכל 13 הפרקים של הקורס — שזה יהיה המשפט הבא:

זו לא סיסמה. זו תוצאה ישירה של איך AI בונה אתרים ב-2025-2026. סוכן AI (Claude, GPT-5, Gemini, Cursor Agent) מקבל טקסט, מעבד טקסט, ופולט קוד. כל מה שאתם יודעים להגיד לו ב-300 מילים — הוא ייקח. כל מה שלא תגידו לו — הוא ימציא, והברירה-מחדל שלו היא ממוצע האינטרנט.

שני המסלולים שמובילים לאותה תוצאה

תחשבו על זה ככה. יש שני מסלולים לקבל landing page מקצועי מ-AI:

מסלול א' — עם כלים (Tool-heavy path):

1. פותחים Figma, בונים wireframe בסיסי (20 דקות)
2. מוסיפים פלטת צבעים ו-typography (15 דקות)
3. עיצוב מפורט של 3-4 מסכים (60-90 דקות)
4. מתקינים Figma MCP ומחברים ל-Cursor (15 דקות חד-פעמי)
5. נותנים ל-AI פקודה "implement this design" (5 דקות)
6. סה"כ: 1.5-2.5 שעות לעיצוב אחד, ~50 דקות ל-handoff

מסלול ב' — בלי כלים (Text-only path):

1. כותבים פרומפט של 250-400 מילים שמפרט: archetype, palette, typography scale, 8px grid, CSS features, הוראות שליליות (no Inter-only, no purple-blue gradient)
2. פולטים את הפרומפט לסוכן AI
3. עוברים על התוצאה, נותנים 2-3 הערות יעד, מחדדים
4. סה"כ: 30-45 דקות לעיצוב אחד

שני המסלולים מגיעים לאותה איכות סופית — בתנאי שבשני המסלולים יש Vibe Coder שיודע מה פרימיום. ההבדל הוא בזמן (מסלול ב' פי 3-4 מהיר), במורכבות ההגדרה (מסלול א' דורש התקנות), ובכמות הידע הויזואלי שצריך לפני שמתחילים (מסלול א' דורש היכרות עם Figma; מסלול ב' דורש רק הקלדה ברורה).

אז למה בכלל הפרק הזה קיים

שאלה הוגנת. התשובה ישירה: כי יש מצבים ספציפיים שבהם כלי עיצוב הוא האצה אמיתית, ולא רק עוד כלי. הפרק הזה מזהה בדיוק מה המצבים האלה (סעיפים 12.13-12.14), מציג את הכלים ברמה שמאפשרת לכם לקבל החלטה מודעת, ובעיקר — מוודא שאתם לא נופלים לפח של "כולם משתמשים ב-Figma אז גם אני חייב". כי זה לא נכון. אתם לא חייבים.

12.2 למה בכל זאת שווה להכיר את הכלים

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

1. עבודה מול מעצב אנושי — אם אתם עובדים עם freelancer מעצב או צוות פנימי, הם כמעט בוודאות יעבירו לכם עיצובים ב-Figma. לא תוכלו להתחמק. היכולת לפתוח קובץ Figma, לעשות inspect, ולחלץ spec היא חובה אם יש באג ב-handoff.
2. Client handoff במעמד פורמלי — לקוח B2B שמקבל אתר רוצה להסתכל על "מה הולך להיות" לפני שמאשר budget. Screenshots מ-Figma זה הפורמט הרגיל לזה. "תראה לי את הפרומפט שאני הולך לתת ל-AI" זה לא אותו דבר.
3. Design system גדול — אם אתם בונים מערכת של 30+ components שצריכה להישאר עקבית לאורך זמן, כדאי שכל רכיב יתועד במקום אחד ויזואלי. Figma זה המקום הטבעי.
4. Prototyping מהיר לפני קוד — לפעמים יותר מהיר לגרור משהו ב-Stitch תוך 5 דקות ולבדוק "זה בכלל נראה טוב?" מאשר לבנות קוד, לפרסם, ולבדוק.
5. חילוץ הדוגמה — ראיתם אתר יפה (למשל Linear.app), רוצים להעתיק את ה-spacing וה-typography שלו לפרויקט שלכם. אם יש קובץ Figma ציבורי — Inspect ב-Figma עדיף על לנחש ב-DevTools.

שימו לב: בכל 5 המצבים האלה הידע שלכם עדיין הבסיס. הכלי רק מאיץ workflow ספציפי. ב-Vibe Coder ממוצע שבונה 1-2 אתרים אישיים, אף אחד מה-5 לא בהכרח רלוונטי — ולכן הרבה מאוד Vibe Coders יכולים לחיות חיים מאושרים בלי Figma לעולם.

12.3 Figma — מה זה ולמה כולם מדברים עליו

Figma (figma.com) הוא כלי עיצוב ממשק משתמש מבוסס-דפדפן. בניגוד ל-Photoshop או Sketch, הוא לא דורש התקנה — פותחים דפדפן, נרשמים (חינם), ומתחילים לעבוד. נרכש על ידי Adobe ב-2022 (עסקה שבסוף בוטלה) ונותר כלי עצמאי; ב-2025-2026 הוא הסטנדרט התעשייתי של רוב המעצבים בישראל ובעולם — דומיננטי גם בסטארטאפים, גם בסטודיוים, גם באגנציות.

מה Figma טוב ב-

• עיצוב ויזואלי של מסכים — frames, components, styles, auto-layout
• שיתוף פעולה בזמן אמת — כמה אנשים עובדים על אותו קובץ, כמו Google Docs
• Design systems — ספריות של components שאפשר לייבא בין פרויקטים
• Prototyping — חיבור מסכים במעברים כדי לדמות flow ללא קוד
• Handoff למפתחים — Inspect mode, code snippets, export assets

מה Figma לא טוב ב-

• לא מייצר אתר אמיתי — Figma מייצר ויזואליזציה, לא קוד שרץ. הקוד בסוף חייב להיבנות במקום אחר (AI, developer ידני).
• עקומת לימוד לא-מיידית — Auto-layout, constraints, variants — לוקח ימים להרגיש בנוח.
• אין אנימציות CSS אמיתיות — ה-prototyping של Figma הוא "פסאודו" ולא משקף scroll-driven animations או view transitions שלמדתם בפרקים 7-8.

לוח המחיר ב-2025-2026

• Free — מספיק ל-Vibe Coder: 3 קבצים, collaborators unlimited, כל ה-features החשובים
• Professional — כ-12-15 דולר/חודש — קבצים ללא הגבלה, design systems, version history
• Organization/Enterprise — מחיר משתנה — לחברות

המלצה ישירה: עבור Vibe Coder — חשבון Free מספיק. אל תשלמו על Figma עד שיש סיבה ברורה.

12.4 Figma Inspect — חילוץ CSS מעיצוב קיים

זו היכולת החשובה ביותר של Figma מבחינת Vibe Coder. Inspect mode מאפשר לבחור כל אלמנט בעיצוב ולראות את ה-CSS שלו — spacing, color, font, border-radius, shadow — במילים פשוטות, Figma "מתרגם" את העיצוב לקוד שתוכלו להעתיק או להזין לפרומפט AI.

איך מגיעים ל-Inspect mode

1. פתחו קובץ Figma כלשהו (שלכם או ציבורי)
2. בצד ימין למעלה, יש טאבים: Design / Prototype / Inspect
3. עברו ללשונית Inspect
4. לחצו על כל אלמנט במסך
5. בצד ימין תראו: Properties (גדלים, צבעים, typography), ו-Code (CSS / iOS / Android snippets)

בחינם, Figma מראה CSS רגיל. עם extensions כמו Figma to Code, Anima או Builder.io אפשר לקבל HTML+Tailwind מוכן. הוסיפו את זה רק אם אתם מוצאים את עצמכם עושים inspect הרבה.

השפה של Figma — 7 מונחים שכדאי להכיר

לפני שאתם צוללים ל-Inspect, יש כמה מונחים בסיסיים ב-Figma שייחסכו לכם בלבול. אלו לא מונחי עיצוב — אלו מונחים של הכלי עצמו:

• Frame — המקבילה של Artboard ב-Photoshop. "עמוד" או "מסך" שבתוכו שמים אלמנטים. לכל מסך שאתם בונים יש Frame.
• Layer — כל אלמנט ב-Figma הוא שכבה (טקסט, צורה, תמונה). כמו ב-Photoshop.
• Component — אלמנט שאפשר לעשות לו instance שוב ושוב. ה-equivalent של React component. שינוי במקור משנה בכל ההופעות.
• Variant — גרסאות של component (למשל: button/primary, button/secondary, button/disabled). מעצבים מקצועיים עובדים עם variants כדי לשמור על עקביות.
• Auto-layout — ה-equivalent של Flexbox ב-Figma. מאפשר לאלמנטים "להתאים את עצמם" לתוכן. ה-feature החשוב ביותר של Figma המודרני.
• Constraints — כללים איך אלמנט מתנהג כשה-parent משנה גודל. דומה ל-responsive design.
• Variables (ב-Figma 2024+) — ה-equivalent של CSS custom properties ב-Figma. פלטת צבעים, spacing, typography נשמרים כ-variables ומתעדכנים גלובלית.

אם מעצב מעביר לכם Figma file ומזכיר "יש לי variables של color tokens" — שיחה פתחה. זה אומר שיש לו design system מסודר, ואתם יכולים לחלץ אותו בצורה מאוד נקייה.

מה לחלץ מ-Inspect (ומה להעתיק לפרומפט AI)

טיפ מהותי — לא מעתיקים CSS, מתרגמים לטוקנים

הטעות הנפוצה: להעתיק CSS ישר מ-Figma ל-HTML. התוצאה — קוד מלא inline styles אבסולוטיים, בלי design tokens, בלי spacing scale. הגישה הנכונה: להעתיק את הערכים ל-CSS custom properties (שלמדתם בפרק 3), ואז לתת ל-AI את ה-tokens ולא את ה-raw CSS:

פחות טוב: "Hero padding is 80px top, 32px left-right..."
יותר טוב: "Use spacing tokens — hero: --space-hero: 5rem (vertical), --space-md: 2rem (horizontal). Apply same tokens across the site."

ההפרש: הגרסה השנייה יוצרת מערכת, לא רק pixel-copy.

12.5 Figma Measure ו-Export — מרחקים, אייקונים ו-SVGs

Measure tool — מה זה ומתי להשתמש

בחרתם אלמנט ב-Figma. אתם רוצים לדעת: כמה פיקסלים בדיוק בינו לאלמנט השכן? במקום לנחש או להוציא סרגל — הקישו Alt (Windows) או Option (Mac) ותעבירו עכבר (hover) מעל האלמנט השכן. Figma יציג מרחקים מדויקים בפיקסלים — top, right, bottom, left.

למה זה חשוב? כי הרבה עיצוב מקצועי הוא יחסים — למשל: "ה-hero תמיד באותו מרחק מהטקסט מתחתיו כמו ה-subheading מ-CTA". כשאתם מחלצים את היחסים האלה מעיצוב מקצועי (Linear, Stripe, Apple), אתם מבינים למה הוא נראה "נקי" ולא רק איך.

Export — הוצאת אייקונים, תמונות ו-SVGs

אייקון ב-SVG שנראה מדויק בכל גודל הוא אחד מה-polish הכי חשובים באתר מקצועי. Figma מאפשר לייצא כל אלמנט ל-SVG, PNG או JPG בכמה לחיצות:

1. בחרו את האלמנט (frame / group / shape)
2. בצד ימין למטה — Export section
3. לחצו "+" כדי להוסיף פורמט ייצוא
4. בחרו SVG (לאייקונים וגרפיקות וקטוריות) או PNG 2x (לתמונות raster)
5. Export selected → הקובץ נשמר ל-Downloads

עצה חשובה על SVG

SVGs שיוצאים מ-Figma לעיתים קרובות מגיעים עם ערבוב של attributes שהופכים אותם "כבדים". כשאתם מוציאים SVG, העבירו אותו דרך SVGOMG (jakearchibald.github.io/svgomg) כדי לקבל קובץ אופטימלי. זה חוסך 30-60% בגודל SVG ממוצע — רלוונטי לפרק 11 (Performance).

12.6 דוגמה מלאה — מקובץ Figma ציבורי לפרומפט AI

נעשה עכשיו שרשרת מלאה: Figma ציבורי → Inspect → חילוץ spec → פרומפט AI → אתר. התהליך הזה הוא הדוגמה הטהורה ביותר למתי Figma מוסיף ערך אמיתי — כשיש עיצוב כבר קיים שרוצים לשכפל.

שלב 1 — מצאו קובץ השראה

ב-Figma Community יש אלפי design systems ו-landing pages ציבוריים. לדוגמה חפשו: "Stripe-style landing", "Linear clone", "dashboard UI". מעצבים רבים משתפים את העבודות שלהם. לחצו Duplicate כדי להעתיק לעצמכם.

שלב 2 — עברו ל-Inspect ואספו spec

צרו בפתקית (או קובץ markdown) את המבנה הבא:

# Design Spec חילוץ מ-Figma

## Colors
- Primary: #[hex]
- Accent: #[hex]
- Background: #[hex]
- Text: #[hex]
- Muted: #[hex]

## Typography
- Display font: [name] [weight] [size] / lh [x] / ls [x]
- Body font: [name] [weight] [size] / lh [x]
- Small/caption: [name] [size]

## Spacing (extracted from 3-5 key components)
- Hero py: [px]
- Section py: [px]
- Card p: [px]
- Button px-py: [px]
- Gaps: [px, px, px]

## Radius / Shadow
- Card radius: [px]
- Button radius: [px]
- Shadow: [value]

## Layout
- Container max-width: [px]
- Content max-width: [px]
- Grid columns: [number]
- Grid gap: [px]

הצעד הזה לוקח 15-20 דקות לעיצוב בינוני. בסוף יש לכם "תעודת זהות" שלמה של העיצוב.

שלב 3 — הזינו לפרומפט AI

קחו את ה-spec הזה והזינו ל-Cursor/Claude עם פרומפט כזה:

Build a landing page for [your product] matching this design spec.
Use CSS custom properties for all tokens. Use the 8px grid from chapter 2.

[paste your spec here]

Rules:
- Use these exact colors via --primary, --accent, --bg, --text variables
- Use the exact typography scale — no other font sizes
- Mobile-first responsive (see chapter 10)
- Use Grid for layout, Flexbox for components (chapter 5)
- No Inter-only. No purple-to-blue gradient. No generic CTAs.
- Add proper hover states (chapter 1, tell #5)
- Add scroll-driven reveal animations on sections (chapter 7)

שלב 4 — השוואה מהירה

ריצו את הפרומפט. קבלו את הקוד. פתחו דפדפן. השוו זה-מול-זה: Figma design (שמאל) — האתר שלכם (ימין). במקרה הטוב, יתאימו ב-85%. ב-15% הנותרים תיתנו הערות יעד (בלי לחזור ל-Figma) — "ה-CTA יותר גדול", "ה-typography scale קצת קטן יותר" — ואז תסיימו ב-2-3 סיבובים.

12.7 Google Stitch — Text-to-UI בדקות

Google Stitch (stitch.withgoogle.com) הוא כלי Text-to-UI של Google Labs. התפיסה פשוטה: אתם מתארים UI במילים, והוא מייצר עיצוב ויזואלי וקוד קוד בסיסי. הוא הוכרז ב-2024 ונותן היום (2025-2026) בחינם לחשבונות Google.

איך Stitch עובד — הלופ הבסיסי

1. נכנסים ל-stitch.withgoogle.com
2. נרשמים עם Google
3. בשדה הפרומפט: תיאור UI — "Landing page for a fitness SaaS, dark mode, hero with CTA, 3 features grid, testimonials"
4. Stitch מייצר עיצוב ויזואלי תוך 20-40 שניות
5. אפשר לעשות "remix" / "iterate" עד שמגיעים למשהו סביר
6. Export: HTML + Tailwind, או Figma file, או Code snippets

Stitch vs כלים מתחרים

היתרון של Stitch: חינם, פשוט, טוב לידיאציה מהירה.
החיסרון של Stitch: פלטי ה-UI נוטים להיראות "Google-ish" ולחזור על patterns דומים בין prompts שונים — מה שאנחנו מכירים כבר כ-AI slop (פרק 1).

12.8 Stitch — מה הוא עושה טוב, ואיפה הוא נשבר

מה Stitch עושה טוב

1. Ideation מהיר — צריכים להראות ללקוח "בערך איך זה ייראה" תוך 10 דקות? Stitch מעולה.
2. Inspiration starter — לפעמים מספיק לראות עיצוב כדי לדעת שאתם רוצים את ההפך ממנו. Stitch זול להפעלה לצורך זה.
3. Wireframe alternative — במקום לצייר בידיים wireframe, תנו ל-Stitch לבנות אחד.
4. Multi-screen flows — Stitch יכול לבנות flow של 3-5 מסכים בפקודה אחת. מתאים לאפליקציות.

איפה Stitch נשבר

1. Branding אמיתי — Stitch לא מבין "ה-brand שלי הוא X". הוא בונה עיצובים "נחמדים" אבל לא "שלך".
2. Production-readiness — ה-code שיוצא מ-Stitch יעיל למראה אבל לא בהכרח לעמידה ב-Core Web Vitals (פרק 11), accessibility, או RTL.
3. עברית — Stitch טוב באנגלית. בעברית הוא יכול להציג טקסט אבל ה-RTL שלו לא תמיד מושלם, והפונטים שהוא בוחר לא תמיד תומכים.
4. מגמות עיצוב מתקדמות — Liquid Glass, scroll-driven animations, view transitions (פרקים 7-9) — Stitch לא יוצר אותן אוטומטית. הוא נשאר ב-2023-2024 aesthetic.
5. Consistency לאורך זמן — 2 prompts דומים עלולים להחזיר עיצובים שונים, קשה לבנות design system על Stitch.

הכלל הפשוט — Stitch = prototype, Stitch != product

12.9 דוגמה מלאה — landing page ב-Stitch ומה צריך לשפר

ניקח את התוצאה מ-Do Now 6 (pricing page שיצרתם ב-Stitch) ונעבור עליה עם "עין מקצועית" — בדיוק הדבר שלמדתם בפרק 1.

Checklist בדיקה של פלט Stitch — 8 שאלות

1. פונט: האם זה Inter, או פונט עם אישיות? (Tell #1 מפרק 1)
2. Gradient: יש רקע purple-to-blue? (Tell #2)
3. Copy: יש "Transform", "Seamless", "Empower"? (Tell #3)
4. Spacing: האם כל section עם אותו py-16, או שיש hierarchy? (Tell #4)
5. Hover states: הכפתורים מגיבים? (Tell #5 — אבל Stitch לא תמיד מדמה זאת בתצוגה)
6. Palette: כמה צבעים? האם יש פלטה מובהקת? (Tell #7)
7. Typography scale: hero H1 ב-44-56px? line-height 1.1-1.2 ל-headings? (פרק 2, 4)
8. 8px grid: ה-spacing values נחלקים ב-8? (פרק 2)

סביר מאוד שתראו ש-Stitch מצליח ב-3-4 מתוך 8 — וזה בדיוק למה הוא לא מספיק ל-production.

איך ממירים פלט Stitch לאתר מקצועי

1. צלמו screenshot של ה-Stitch output
2. פתחו Cursor / Claude
3. כתבו: "Rebuild this design [attach screenshot] with the following improvements: (a) replace default font with [serif+sans pairing from ch 4], (b) use [branded palette from ch 3], (c) upgrade typography scale to hero H1 48-56px / line-height 1.1 / letter-spacing -0.02em, (d) add proper hover states with 200ms ease-out transitions, (e) implement 8px grid for all spacing, (f) add scroll-driven reveal on sections. Hebrew + RTL support required."
4. קבלו גרסה מקצועית, שמרו את שתי הגרסאות (Stitch + Claude) להשוואה

הנקודה היא ש-Stitch הוא התחלה, לא סוף. הוא חוסך לכם 10 דקות של wireframing. הוא לא חוסך לכם את הידע שמשדרג את התוצאה.

12.10 MCP (Model Context Protocol) — ההסבר בשפה פשוטה

MCP = Model Context Protocol. פרוטוקול פתוח שהוכרז על ידי Anthropic בסוף 2024 ו"התפוצץ" בשימוש בתעשייה במהלך 2025-2026. השם המפחיד, הרעיון פשוט.

מה MCP פותר — ההסבר ב-3 משפטים

לסוכני AI (Claude, Cursor, Copilot) אין גישה ישירה לכלים שלכם. כשאתם רוצים שה-AI יראה עיצוב ב-Figma, תצטרכו לצלם screenshot ולשלוח לו. MCP הוא "תקע חשמל" שמחבר כל כלי (Figma, Stitch, Postgres, Google Drive...) ישירות לסוכן AI, כך שהוא יכול לקרוא ולכתוב דרכו בלי שתעבירו ידנית. זו מהפכת ה-workflow של 2025-2026.

אנלוגיה — MCP כ-USB-C של עולם ה-AI

לפני USB-C, לכל מכשיר היה כבל ייחודי — כבל לאייפון, כבל לאנדרויד, כבל למצלמה, כבל ל-Kindle. אנדרלמוסיה. USB-C הפך את כולם לסטנדרט אחד. MCP הוא אותו דבר בעולם ה-AI: פרוטוקול אחד שמחבר כל כלי לכל סוכן.

מה זה נראה בפועל

לפני MCP:

• אתם פותחים Figma, מצלמים screenshot של מסך
• מעתיקים לצ'אט Claude
• מבקשים "בנה את זה ב-HTML+Tailwind"
• מקבלים קוד, מדביקים לפרויקט
• חוזרים ל-Figma, שינוי קטן, צילום נוסף, עוד הדבקה...

אחרי MCP (Figma MCP מותקן):

• בצ'אט עם Claude / Cursor: "תבנה את ה-frame בשם 'Pricing Page v3' שנמצא בקובץ Figma [URL]"
• Claude קורא את ה-Figma file ישירות, רואה את כל השכבות, הצבעים, ה-typography
• פולט קוד production-ready שתואם 1:1 לעיצוב
• בשינוי קטן: "ה-hero גדול יותר ב-Figma, עדכן" — Claude יקרא שוב, יעדכן

הערך: אין יותר אובדן מידע בין העיצוב לקוד, והמחזורים הופכים מהירים פי 3-5.

היבטים טכניים ב-2 משפטים

MCP הוא פרוטוקול תקשורת שמריצים לוקאלית (על המחשב שלכם) או בענן. "שרת MCP" הוא שירות קטן שמדבר עם כלי אחד (Figma, Stitch, Postgres) וחושף API סטנדרטי שה-AI יכול לקרוא. רוב כלי הקוד המודרניים (Cursor 0.40+, Claude Desktop, Windsurf, Continue.dev) תומכים ב-MCP מהקופסה.

דוגמאות לשרתי MCP פופולריים ב-2025-2026

כדי לתת לכם תחושה של הגודל של ה-ecosystem, הנה דוגמה לחלק משרתי MCP הנפוצים (לא כולם רלוונטיים ל-Vibe Coder של עיצוב, אבל הם מראים למה ה-protocol חשוב):

המסקנה: Figma MCP ו-Stitch MCP הם שני שרתים ספציפיים בקטגוריה של "עיצוב", אבל ה-ecosystem הרבה יותר גדול. המשמעות ל-Vibe Coder: הפרוטוקול כאן כדי להישאר, ושווה להיות מעודכנים אם משהו חדש נכנס (כמו "Framer MCP" או "Webflow MCP" שייכולים לצאת בעתיד).

סיכונים ובעיות של MCP להיות מודעים אליהם

• הרשאות — שרת MCP שמתחבר לחשבון Figma שלכם רואה את כל הקבצים. אם יש פרויקטי לקוחות רגישים — שקלו חשבון Figma נפרד ל-MCP work.
• יציבות — חלק משרתי ה-MCP עדיין ב-beta. אל תבנו workflow פרודקשני עליו לפני שהכלי הוא stable.
• Token consumption — כש-AI קורא Figma file שלם, זה עלול להכניס 20K+ tokens לcontext. בפרויקט גדול זה מתורגם לעלות ממשית ב-API calls.
• Vendor lock-in קל — ברגע שה-workflow שלכם מסתמך על MCP, מעבר לכלי אחר (למשל מ-Cursor ל-Windsurf) דורש להתקין מחדש את כל השרתים.

האם אתם חייבים MCP?

לא. בהחלט לא. Vibe Coder ממוצע יכול לעבוד שנים בלי MCP. תצלם screenshot, תעתיק, תדביק — זה עובד מצוין ל-95% מהמקרים. MCP הוא ל-5% האחוז של workflows צפופים (מעצב שעובר עיצוב כל יום, agency שעוברת 10 פרויקטים במקביל).

12.11 Figma MCP — כשה-AI קורא את העיצוב ישירות

Figma השיקו שרת MCP רשמי בסוף 2024 (beta) ובמהלך 2025 הפכו אותו ל-production. הוא פתוח לכל חשבון Figma מסוג Professional ומעלה (ולפעמים זמין גם ב-Free Tier — הסטטוס משתנה; כדאי לבדוק עדכני באתר Figma).

מה Figma MCP מאפשר

1. קריאת frames — ה-AI רואה שכבות, spacing, colors, typography בלי שתעבירו screenshot
2. חילוץ design tokens — Figma variables / styles מיובאים אוטומטית כ-CSS custom properties
3. Diff בין גרסאות — "מה השתנה בין Figma v2 ל-v3?" — שאלה שה-AI יכול לענות ישירות
4. Asset export אוטומטי — ה-AI יכול "לבקש" מ-Figma לייצא SVG ספציפי

התקנה — התמצית ב-5 שלבים (בדקו עדכני)

1. בדקו שיש לכם Cursor 0.40+ או Claude Desktop מעודכן
2. ב-Cursor: Settings → MCP → Add Server → חפשו "Figma"
3. חברו את חשבון Figma שלכם (OAuth flow רגיל)
4. ב-Cursor chat: @figma — אתם אמורים לראות autocomplete עם הקבצים שלכם
5. נסו: "Read the frame named 'Home' from my Figma file 'landing-v2'"

הזמן הכולל לסטאפ ראשוני: 15-25 דקות. רוב הזמן זה אישורי הרשאות והבנת ה-chat syntax החדש.

מתי Figma MCP באמת משנה

• אתם עובדים מול מעצב שמעביר עדכונים תכופים (יומיים+)
• אתם מתחזקים אתר עם 10+ עמודים שצריך להישאר סנכרון עם Figma
• אתם בונים multiple variants (A/B testing) ושומרים ב-Figma כ-source of truth

מתי לא שווה את הזמן

• פרויקט קטן של 1-3 עמודים
• אין לכם מעצב (רק אתם, שיצרתם את ה-Figma לעצמכם)
• העיצוב יציב ולא משתנה (screenshot + paste מספיק)

12.12 Stitch MCP — חיבור Stitch לסוכן הקוד

Stitch MCP הוא שכבת חיבור שמאפשרת לפלט של Google Stitch לזרום ישירות לסוכן ה-AI שלכם (Cursor, Claude). המטרה: לחסוך את שלב ה-"export code → paste in project" ולאפשר ל-AI לקחת את הפלט של Stitch ולהמיר אותו ישירות לקוד ב-stack שלכם (Next.js, Astro, Vanilla + Tailwind, וכו').

סטטוס ב-2025-2026

Stitch MCP עדיין פחות בשל מ-Figma MCP. בתחילת 2026 יש כמה implementations community-made, ו-Google עצמם בתהליך הוספת רשמית. אל תתקינו אם אתם לא כבר משתמשים ב-Stitch כלי יומיומי. זו לא הסיבה להתחיל להשתמש ב-Stitch.

הערך של Stitch MCP אם אתם כן משתמשים

• פלטי Stitch "מגיעים" ל-Cursor כ-components React, Astro או vanilla HTML אוטומטית
• איטרציות על Stitch design מבלי לעשות export/paste כל פעם
• תרגום Stitch-to-Tailwind של Stitch נעשה אוטומטית

המלצה חד-משמעית

Stitch MCP הוא ב-Tier 3 מבחינת הפרק הזה — "כנראה לא רלוונטי לכם". אם ספציפית Stitch הוא הכלי היומיומי שלכם לאידיאציה ו- אתם מאטרים הרבה איטרציות, הוא שווה בדיקה. אחרת — דלגו.

12.13 שתי מסלולים — Workflow עם כלים מול Workflow בלי כלים

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

מסלול A — Workflow עם כלים (Figma → Stitch → Cursor+MCP → אתר)

מסלול B — Workflow בלי כלים (Text → AI → אתר)

מה זה אומר במספרים

• מסלול A לוקח פי 2-4 יותר זמן במחזור הראשון (כולל התקנות)
• מסלול B מגיע לאיכות סופית דומה אם הידע שלכם חזק
• מסלול A מצטיין ב-handoff ל-stakeholders ובסנכרון עם מעצבים
• מסלול B מצטיין בזריזות ובעלות (אפס התקנות, אפס מעבר בין כלים)

איכות סופית — מי ניצח?

12.14 Decision Framework — מתי כל כלי שווה את ההשקעה

12.15 תיאור טקסטואלי עשיר — הפרומפט שמחליף שעות של כלים

אם בחרתם במסלול B (בלי כלים), הפרומפט הוא הכל. זו הדוגמה הקאנונית — 400 מילים שבונות landing page ברמה של Figma+MCP בתוך 10 דקות.

מבנה הפרומפט — 8 בלוקים

1. Context block — מי אני, מה המוצר, למי
2. Archetype block — SaaS / Agency / Portfolio / E-commerce (פרק 2)
3. Palette block — 4-5 צבעים עם תפקידים (פרק 3)
4. Typography block — font pairing + scale + line-height + letter-spacing (פרק 4)
5. Layout block — Grid/Flex, 8px spacing, hierarchy (פרק 5)
6. Features block — Modern CSS, scroll animations, view transitions (פרקים 6-8)
7. Anti-patterns block — מה לא לעשות (פרק 1)
8. Quality gates block — Core Web Vitals, accessibility, RTL (פרקים 10-11)

דוגמה מלאה — 400 מילים באנגלית

Build a landing page for "Neria" — a B2B invoice automation SaaS for small accounting firms in Israel.

ARCHETYPE: SaaS, Stripe-style (from Chapter 2). Clean, confident, restraint over excess. Target audience: accountants 35-55 who are skeptical of "AI hype" but need help.

PALETTE (from Chapter 3): primary: #1E3A8A (deep blue), accent: #F59E0B (warm gold), bg: #FAFAFA, text: #0F172A, muted: #64748B. Dark mode via prefers-color-scheme with inverse pairs. Use CSS custom properties for all.

TYPOGRAPHY (Chapter 4):
- Display: 'Fraunces' serif, weight 600
- Body: 'Inter' sans, weight 400, body 500 for bold
- Hebrew fallback: 'Heebo' (display+body)
- Scale: H1 clamp(44px, 5vw, 56px), H2 32-40px, body 16-18px, captions 13px
- Letter-spacing: -0.02em headings, 0 body
- Line-height: 1.1 headings, 1.6 body
- font-display: swap

LAYOUT (Chapter 5):
- CSS Grid for page-level, Flexbox for components
- 8px grid: gap-2 (8), gap-4 (16), gap-6 (24), gap-8 (32), gap-12 (48), gap-20 (80)
- Container max 1280px, content max 720px
- Hero py-32 desktop / py-20 mobile
- Sections py-20 desktop / py-12 mobile

MODERN CSS (Chapters 6-8):
- Use container queries for card sizing (not media queries)
- :has() for form validation states
- Scroll-driven reveal on sections (fade + translateY 20px)
- View Transitions API on internal navigation
- color-mix() for hover variants
- oklch() for palette mixing

ANTI-PATTERNS (Chapter 1 — MUST avoid):
- Inter-only typography
- Purple-to-blue gradient anywhere
- Generic CTAs ("Get Started", "Learn More") — use specific outcomes
- Identical py-16 everywhere — use hierarchy
- Zero hover states — every interactive element responds
- Stock photos of smiling teams

QUALITY GATES (Chapters 10-11):
- Mobile-first. Breakpoints at 640, 768, 1024, 1280.
- LCP < 2.5s, CLS < 0.1, INP < 200ms
- lazy-load all images below fold. Hero image eager.
- Touch targets min 44x44px
- RTL support via dir="rtl" + proper logical properties

HEBREW SUPPORT: All content in Hebrew. Use logical properties (padding-inline, margin-block) not directional ones. Test H1 with Hebrew text renders without overflow.

Deliver: complete index.html + styles.css. Inline SVG icons (no external libs). Single file, no build step required.

כ-400 מילים בלבד. התוצאה: landing page שעומד באיכות של עבודת סטודיו, תוך 10 דקות יצירה + 20 דקות איטרציה. ללא Figma. ללא Stitch. ללא MCP.

12.16 הסגירה — הידע הוא מה שקובע, תמיד

חזרנו לאותה נקודה שהתחלנו בה, ולא בטעות.

11 הפרקים הראשונים של הקורס לימדו אתכם איך לחשוב על עיצוב — מה הופך אתר לפרימיום (פרק 2), איך לבחור פלטה (פרק 3), איך לבנות hierarchy טיפוגרפית (פרק 4), איך לסדר layout (פרק 5), איך להשתמש ב-CSS מודרני (פרק 6), איך להוסיף אנימציות (פרקים 7-8), איך להיראות עדכני (פרק 9), איך לעבוד על כל מכשיר (פרק 10), ואיך להיות מהירים (פרק 11). זה הידע.

הפרק הזה (12) הוסיף לכם 3 כלים — Figma, Stitch ו-MCP — שיכולים להאיץ workflows ספציפיים. אבל בכל המצבים, הידע מלפני הוא מה שעושה את ההבדל. כלי בלי ידע = slop מהיר יותר. כלי עם ידע = workflow מעולה. ידע בלי כלי = עדיין workflow מעולה, רק שונה.

הבחירה מה לעשות עם הידע הזה היא שלכם. חלקכם ישתחררו מהפרק הזה עם Figma מותקן ו-MCP פעיל. חלקכם יסגרו את הפרק בלי לפתוח Figma ויבנו את ה-capstone של פרק 13 רק עם טקסט. שתי הדרכים נכונות. הקורס לא מעדיף אחת על השניה.

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