לעצב עם Google Stitch ולבנות עם Claude Code

למה בכלל צריך את זה

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

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

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

המקום הזה הוא Google Stitch.

מה זה Stitch

ה-Stitch הוא כלי עיצוב חינמי של Google Labs. אתה כותב לו במילים מה אתה רוצה, והוא מייצר ממשק שלם, מסך אחרי מסך. הוא בנוי על Gemini, הוא רץ בדפדפן, ואתה נכנס אליו עם חשבון Google רגיל בכתובת stitch.withgoogle.com. בלי תשלום ובלי רשימת המתנה.

עד כאן זה נשמע כמו עוד מחולל ממשקים. מה שמייחד אותו הוא לא הקנבס אלא הקובץ שהוא משאיר אחריו. DESIGN.md.

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

ההבדל בין זה לבין העתקת HTML ידנית הוא עצום. HTML שמעתיקים הוא צילום של מסך אחד. DESIGN.md הוא ההיגיון מאחורי כל המסכים, כך שהמסך העשירי שקלוד קוד בונה נראה כמו אותו מוצר כמו המסך הראשון, ולא נסחף לכיוון אחר.

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

התמונה הגדולה, שלושה שלבים

לפני שנכנסים לפרטים, זו כל השיטה בשלוש שורות.

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

השלב השני, מייצאים את DESIGN.md. זה הקובץ שנושא את כל החלטות העיצוב.

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

עכשיו נפרק כל שלב.

שלב 1: לעצב ב-Stitch

הכניסה

נכנסים ל-stitch.withgoogle.com, מתחברים עם Google. הכלי ישאל אם אתה מעצב ל-Web או ל-Mobile. תבחר לפי מה שאתה בונה. אם זה אתר תבחר Web, אבל תדע שכאן הוא פחות חזק, אז תצטרך פרומפטים מפורטים יותר.

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

הכלל הכי חשוב בכל המדריך

שינוי אחד בכל פרומפט.

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

במקום זה. בקשה אחת, מסתכלים, בקשה הבאה. זה מרגיש איטי, אבל זה הרבה יותר מהיר מלתקן מסך שנשבר.

מבנה של פרומפט טוב

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

הנה דוגמה למבנה.

הקשר: אפליקציית מובייל למעקב אחר הוצאות יומיות.

משתמש: אנשי מקצוע צעירים שבודקים הוצאות כמה פעמים ביום, בדרך כלל בתנועה.

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

סגנון: רקע כהה, אקסנט אחד בצבע ירוק, הרבה מקום ריק, גופן נקי.

תשים לב שכל חלק עונה על שאלה אחרת. ההקשר עונה על "מה זה", המשתמש על "בשביל מי", המסך על "מה בפנים", והסגנון על "איך זה מרגיש".

תגיד לו את התחושה, לא רק את הרכיבים

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

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

שלב 2: לייצא את DESIGN.md

אחרי שהעיצוב נראה כמו שאתה רוצה, אתה מוציא את מערכת העיצוב החוצה.

ה-Stitch מייצא ל-Figma, ל-AI Studio, ולכל כלי שמדבר בפרוטוקול שנקרא MCP, שזו בעצם השפה שמאפשרת לכלים לדבר ביניהם. אבל בשבילנו, החלק החשוב הוא קובץ ה-DESIGN.md.

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

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

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

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

שלב 3: לתת את זה ל-Claude Code

עכשיו יש לך DESIGN.md בתיקיית הפרויקט. מכאן זה הפרומפט לקלוד קוד.

קרא את DESIGN.md בתיקייה. זו מערכת העיצוב של הפרויקט. אני רוצה שתבנה את [המסך או העמוד] לפי הפלטה, הגופנים, המרווחים ומבנה הרכיבים שמוגדרים שם. אל תמציא צבעים או גדלים משלך, תשתמש רק במה שכתוב בקובץ. תראה לי תוכנית לפני שאתה כותב.

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

זו החלוקה שגורמת לזה לעבוד. Stitch מחליט איך זה נראה. קלוד קוד מחליט איך זה עובד. אף אחד מהם לא נאלץ לעשות את החלק שהוא פחות טוב בו.

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

דוגמאות לפרומפטים שבונים דברים רציניים

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

דשבורד SaaS

הקשר: דשבורד אנליטיקה למוצר תוכנה במודל מנוי.

משתמש: מנהלי מוצר שנכנסים בבוקר לבדוק מספרים במהירות.

המסך: ארבעה כרטיסי מדד למעלה, גרף מגמה גדול במרכז, וטבלת פעילות אחרונה למטה.

סגנון: פלטת אפור כהה, אקסנט כחול חשמלי אחד, נקי ומרווח.

חנות מוצרים

הקשר: עמוד מוצר לחנות בגדים מקוונת.

משתמש: קונים שגולשים מהטלפון בערב.

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

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

עמוד נחיתה

הקשר: עמוד נחיתה לקורס דיגיטלי.

משתמש: אנשים שהגיעו מקישור באינסטגרם ורואים את המותג בפעם הראשונה.

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

סגנון: מודרני, אמין, אקסנט צבע חם אחד, בלי עומס.

אפליקציית מובייל, זרימה מרובת מסכים

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

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

ואז, בפרומפט נפרד אחרי שהראשון מוכן.

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

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

פתרון תקלות ובעיות נפוצות

העיצוב היה יפה, ואז נשבר אחרי בקשה אחת

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

המסך יצא כללי ומשעמם

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

רכיב יצא לא במקום או לא בסוג הנכון

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

עשיתי אתר, אבל זה נראה כמו אפליקציה

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

הצבעים בין הגרסה הבהירה לכהה לא תואמים

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

חיבור ה-MCP לא עובד

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

תזרים העבודה המומלץ, מקצה לקצה

בשביל לסכם את הכל לרצף אחד שאפשר לעבוד לפיו.

תפתח פרויקט ב-Stitch, תבחר Web או Mobile. תכתוב פרומפט בנוי, הקשר, משתמש, מסך, סגנון. תלטש בשיחה, שינוי אחד בכל פעם, עד שזה נראה כמו שרצית. תעתיק את ה-DESIGN.md ותשים אותו בתיקיית הפרויקט שלך. תגיד לקלוד קוד לקרוא את הקובץ ולבנות לפיו, בלי להמציא צבעים או גדלים משלו. תיתן לקלוד קוד להוסיף את הלוגיקה, הנתונים, וההעלאה לאוויר. תבדוק בדפדפן לפני שאתה שולח.

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

מילה אחרונה

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

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