Google Stitch + Claude Code: עיצוב אתרים בלי “מראה ה-AI”

הנחיות נוספות לעבודה עם Ailoot מופיעות בתיעוד.

למה אתרים שנבנים עם Claude Code נראים כמו “זבל AI”?#

במקרה המעשי המתואר כאן, העבודה על דף הבית של אפליקציית שיחות התחילה בפרויקט ריק ובבקשה מ-Claude Code לבנות דף נחיתה. התוצאה הייתה קלאסית: slate-950 לרקע, indigo-500 להדגשה, Inter מודגש בכותרת ושלושה כרטיסים זהים עם צללים מתחתיה. אותה פריסה כמו ב-v0 הראשון, ב-Lovable הראשון ובהפקת ChatGPT הראשונה. שכתבתי את ההנחיה חמש פעמים, הוספתי “פרימיום”, “לא כמו כולם”, “מודרני” — והדף עדיין נראה כמו ערכת עיצוב של WordPress מ-2015.

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

ההיגיון פשוט: בלי אילוצים, המודל מחשב את הממוצע הסטטיסטי של מה שראה. והוא ראה מיליון דפי נחיתה זהים שנבנו עם Bootstrap ו-Tailwind. כדי לקבל תוצאה שאינה ממוצעת, צריך לתת לסוכן פרטים מדויקים: אילו צבעים, אילו גופנים, אילו מרווחים ואילו רכיבים להחשיב למוסמכים. מבחינת מודל, המילה “יפה” פירושה “החציון של 2020”. שמות תואר לא ישנו את התוצאה; צריך פרמטרים מדויקים.

בחנתי את אותו פער במדריך על מערכות עיצוב מוכנות עם Refero — שם לוקחים סגנון של מישהו אחר (Apple, Linear, Stripe) ונותנים אותו לסוכן. Google Stitch ניגש לזה מהכיוון ההפוך: במקום לשאול סגנון של מישהו אחר, יוצרים סגנון משלכם — מתוך התיאור שלכם.

מהו Google Stitch ואיך הוא עוזר?#

Stitch הוא ניסוי של Google Labs שהוצג ב-Google I/O במאי 2025. כותבים בשדה ההנחיה איך רוצים שהאפליקציה תיראה (או מעלים צילום מסך, סקיצה מלוח מחיק או דף של מתחרה), ו-Stitch יוצר מסכי ממשק על גבי לוח קנבס אינסופי. מתחת למכסה המנוע הוא משתמש ב-Gemini 2.5 Pro וב-Flash, ובדצמבר 2025 נוספה Gemini 3 כדי ליצור פריסות מלוטשות יותר.

מה שימושי לנו:

• Vibe Design — מתארים את התחושה במילים (“מינימליסטי ויוקרתי, כמו Stripe”) ומקבלים כמה כיוונים חזותיים לבחירה.
• הפניות — מעלים תמונה מ-Dribbble או מ-Pinterest; Stitch משמר את הפריסה ומיישם את הדרישות שלכם.
• ייצוא בשלושה פורמטים: ל-Figma (עם שכבות שאפשר לערוך), כ-HTML/CSS נקי ובאמצעות MCP — ישירות לסוכן.

ההבדל מסגנונות מוכנים כמו Refero חשוב. Refero היא ספרייה של מערכות עיצוב שכבר חולצו מאתרים אמיתיים; לוקחים מותג קיים. Stitch יוצר מערכת למוצר שלכם מאפס. אין לכם עיצוב ייחוס ואתם רוצים מראה משלכם? זה Stitch. צריכים להחיל במהירות את הסגנון של מוצר מוכר? Refero. הם מכסים שלבים שונים ומשלימים זה את זה יפה.

ל-Claude עצמו יש גם מצב עיצוב מובנה; סקרתי אותו במדריך על Claude Design. Stitch שונה כי הוא מספק מערכת מוכנה בקובץ חיצוני שהסוכן קורא בכל פעם שהוא בונה משהו.

דרישות הזמינות של Google Stitch#

Stitch אינו זמין בכל מדינה: נציג Google כתב בפורום הרשמי שהשירות זמין למשתמשים בני 18 ומעלה ב-212 מדינות, ושהרשימה מתרחבת. באזורים מוגבלים, כשתיכנסו תראו הודעה אחת בדיוק: “Sorry, Stitch is unavailable.”

צריך חשבון Google — אפשר להתחבר רק באמצעותו.

כשאימות Stitch MCP חוסם את העבודה עם Claude Code#

יש ברשת הרבה שטויות על חיבור MCP, וחצי מההנחיות פשוט לא עובדות. למשל, מדריכים רבים (כולל מדריכים פופולריים באנגלית) ממליצים להתקין את החבילה @google/stitch-mcp באמצעות הפקודה npx -y @google/stitch-mcp@latest. החבילה הזאת לא קיימת — npm מחזיר 404. אל תעתיקו את הפקודה הזאת; תבזבזו זמן. מאותה סיבה, בחרו אינטגרציות שההתקנה והאימות שלהן במשימה אמיתית אושרו.

ניסיון ה-MCP המרוחק שתואר כאן הגיע לשגיאת Incompatible auth server ב-Claude Code. השגיאה שנצפתה אינה מתכון הגדרה עובד או הוכחה שכל תצורה נוכחית נכשלת. אל תמשיכו עם שלב ״חבר MCP״ לא מוגדר: השתמשו במסלול ייצוא HTML/CSS הידני שלהלן עד שתאומת תצורה תואמת מדויקת.

למסלול הידני שמתואר כאן אין צורך ליצור מפתח API או להוסיף פרוקסי MCP לא מאומת. ייצאו את המסך שבחרתם כ-HTML/CSS יחד עם הנכסים, שמרו את הקבצים בפרויקט ואמתו מקומית שהייצוא מציג את אותו מסך. את DESIGN.md בונים מהערכים שנמצאים בקבצים, לפי שבעת השלבים בהמשך.

תהליך העבודה עם Stitch ו-DESIGN.md הוא הנדסת הקשר בצורתה הטהורה ביותר: מכניסים הקשר של Claude אסימונים מדויקים מראש, והוא בונה לפיהם בקפדנות, בלי “לנחש למה התכוונתי”. המתודולוגיה המלאה משלבת את שלושת העמודים — תאום ה-AI, המוח השני והנדסת הקשר. השילוב הזה הוא שהופך את Claude מ“עוזר שמנחש” לכלי שמפיק תוצאות צפויות.

מהו DESIGN.md ולמה הוא עדיף על צילום מסך?#

הנה פרט חשוב שרוב ההנחיות טועות בו: אין ב-Stitch כפתור “Export DESIGN.md”. הסוכן מרכיב את הקובץ בעצמו. לפי ה-codelab הרשמי של Google, ההנחיה נראית בערך כך: “עבור דרך Stitch MCP אל הפרויקט, חלץ ממנו את פלטת הצבעים והטיפוגרפיה והרכב מהם קובץ DESIGN.md.” ה-codelab הזה מניח חיבור MCP שעובד. במסלול הידני כאן, Claude Code קורא במקום זאת את HTML/CSS שייצאתם וכותב את הקובץ המובנה בשורש הפרויקט; עליו לציין אסימוני עיצוב חסרים במקום לנחש אותם מתמונה.

DESIGN.md מכיל פרטים מדויקים במקום שמות תואר:

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

כדי לגרום ל-Claude Code להשתמש בו, מפנים לקובץ מתוך CLAUDE.md (למשל, באמצעות השורה “השתמש בעיצוב של כל הרכיבים מתוך DESIGN.md”) — והסוכן טוען את אותם אסימונים בכל הפעלה. כפתור מיום שני וכרטיס מיום שישי ייצאו באותו סגנון, כי יש מקור אמת אחד.

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

איך בונים אתר: התהליך המלא מטקסט לעיצוב?#

הנה כל התהליך לפי הסדר:

1. פתחו את Stitch. בדקו זמינות במדינה שלכם והיכנסו ל-stitch.withgoogle.com באמצעות חשבון Google.
2. תארו את המוצר. ציינו מסכים ומסע משתמש; אשרו או ערכו את רשימת המסכים המוצעת.
3. הוסיפו הפניה. העלו את צילום המסך המיועד וציינו צבעים, טיפוגרפיה ופריסה שברצונכם לשמור.
4. צרו ולטשו. בחרו מסך אחד וחדדו אותו לפני הרחבת העיצוב.
5. ייצאו את המסך שנבחר כ-HTML/CSS. שמרו את הקבצים והנכסים הדרושים בתיקיית הפניות בפרויקט. פתחו את ה-HTML שיוצא מקומית ובדקו שזה המסך שנבחר; צילום מסך לבדו אינו נושא ערכי CSS מדויקים.
6. הרכיבו DESIGN.md מהייצוא המקומי. בקשו מ-Claude Code לקרוא HTML/CSS שיוצא, לתעד את ערכי הצבע, הגופן, המרווחים, הפריסה והרכיבים בפועל ולפרט ערכים חסרים להחלטתכם. המסלול אינו דורש מפתח API של Stitch או אימות MCP.
7. בנו ובדקו עמוד אחד. תנו ל-Claude Code את ההנחיות האלה, תוך החלפת שם התיקייה בנתיב הייצוא המקומי בפועל:

קרא את ייצוא HTML/CSS של Stitch בתיקייה refs/stitch-export/. צור DESIGN.md בשורש הפרויקט לפי הערכים שנמצאים בקבצים. זהה ערכים חסרים במקום להמציא אותם.

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

מכאן הכול עובר ל-Claude Code: ניווט בין מסכים, התאמה למסכים השונים לפי נקודות השבירה ב-DESIGN.md, אנימציות ואינטראקטיביות. Stitch מספק מסכים סטטיים ואב טיפוס שאפשר ללחוץ בו, אבל הוא לא בונה לוגיקה עובדת או מפרסם לאחסון — זה תפקידו של הסוכן.

איך נפטרים מ“מראה ה-AI”: מה בדיוק צריך לשנות?#

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

• צבע. סגול indigo-500 הוא הסימן הראשון. מגדירים את הצבעים הראשיים והצבעים להדגשה כערכי hex מדויקים ישירות ב-DESIGN.md. כל סוכן יפרש “כחול של המותג” בדרכו.
• גופן. Inter הוא הבחירה הבטוחה ביותר, ולכן גם “גופן ה-AI” המזוהה ביותר. בוחרים צימוד גופנים עם אופי: למשל, גופן sans serif לטקסט הגוף ומשהו עם אופי לכותרות. מגדירים זאת בעיצוב של Stitch ומתעדים זאת ב-DESIGN.md.
• הפניה במקום שם תואר. המודל מפרש “תעשה את זה מודרני” כ“החציון של 2020”. הוא מתייחס ל“השתמש בפריסה מהדף הזה” עם צילום מסך אמיתי כפשוטו. מעלים תמונת הפניה ל-Stitch; אי אפשר להעביר טעם במילים.
• מרווחים ואוויר. פריסה תבניתית מזוהה לפי הבלוקים הצפופים והזהים שלה. מגדירים סולם מרווחים נדיב ב-DESIGN.md — הסוכן יסדר את הרכיבים בחופשיות רבה יותר.

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

Google Stitch או חלופות: מה כדאי לבחור?#

השוויתי בין הכלים לפי המאפיינים שבאמת חשובים כשמתכנתים לפי תחושה בתקציב מוגבל:

תהליך העבודה שאני משתמש בו: Stitch לחקר העיצוב → Claude Code לבנייה וללוגיקה. למי שמתכנת לפי תחושה בתקציב מוגבל, Stitch מנצח כי הוא חינמי ומעצב מראה ייחודי למוצר שלכם מאפס. אם אתם רוצים להבין את כל מגוון הכלים בשוק, סקרתי אותם במאמר המרכזי במה מתכנתים ב-2026.

היכן Google Stitch נכשל: מה המגבלות שלו?#

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

• ממשק בלבד. אין Backend, מסד נתונים או פרסום לאחסון. בשביל זה צריך את Claude Code (או את Lovable, אם רוצים הכול במקום אחד).
• עריכה מוגבלת בתוך הכלי. אי אפשר להזיז רכיב יחיד באמצעות העכבר — רק לשנות אותו באמצעות הנחיה וליצור אותו מחדש. זה לא Figma.
• חוסר דטרמיניזם. אותה הנחיה מפיקה תוצאות שונות. זה טוב לחקר רעיונות, אבל לא נוח כשצריך פלט שניתן לשחזור.
• מכסה. מגיעים למגבלת היצירות החינמיות (כרגע יומית); אי אפשר לקנות עוד, ולכן צריך לחכות לאיפוס המכסה. המספר המדויק משתנה, אז בדקו בממשק.
• סטטוס ניסיוני. Google Labs אינה מתחייבת לתמיכה ארוכת טווח. השירות עשוי להשתנות או להיסגר.
• הגבלה גאוגרפית ובעיית ההרשאה של MCP ב-Claude Code, שהוזכרו בסעיפי הזמינות וההגדרה.

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

מה הלאה?#

בנו את תהליך העבודה הקטן ביותר עם מסך אחד: תארו את המוצר ב-Stitch, צרו את דף הבית, ייצאו את HTML/CSS שלו ובקשו מ-Claude Code להרכיב DESIGN.md ולבנות את העמוד מהקבצים המקומיים האלה. כשתראו שהמעבר הסגול נעלם מעצמו, ההמשך יהיה קל יותר.

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

תאום ה-AI, המוח השני והנדסת הקשר חשובים למוצר. עיצוב באמצעות Stitch הוא אבני הבניין הראשונות של השילוב הזה.

להמשך עבודה עם מודלים, תוכלו לעבור אל Ailoot.