1. מבוא
בשיעור Codelab הזה תלמדו איך ליצור אתר שמוכן לייצור באמצעות שילוב של עיצוב מבוסס-AI עם סביבת פיתוח בעדיפות לסוכנים. תשתמשו ב-Google Stitch כדי ליצור ממשק משתמש באיכות גבוהה, ואז תחברו אותו ל-Antigravity IDE באמצעות Model Context Protocol (MCP). לבסוף, תשתמשו בסוכן אוטונומי כדי לאחזר את ה-DNA של העיצוב ולהטמיע אפליקציית React מושלמת.
מה תעשו
- יצירת ממשק משתמש ב-Stitch: אפשר להשתמש בשפה טבעית כדי ליצור עיצוב מלא לאתר ב-Google Stitch.
- גישור באמצעות MCP: מחברים את Antigravity לפרויקט Stitch באמצעות Model Context Protocol.
- הטמעה אוטונומית: אפשר להשתמש בכרטיסיית הסוכן של Antigravity כדי לאחזר טוקנים של עיצוב ולבנות פרויקט React/Tailwind.
- אימות ושיפור: משתמשים בדפדפן המשולב כדי לבצע בדיקת אווירה של הקוד מול העיצוב המקורי.
מה תלמדו
- איך משתמשים ב-Google Stitch כדי ליצור אב טיפוס במהירות של עיצובים של ממשקי משתמש ברמת דיוק גבוהה.
- איך מגדירים שרתי MCP ב-Antigravity IDE.
- איך משתמשים בסוכנים אוטונומיים כדי לתרגם מטא נתונים של עיצוב חזותי לקוד מודולרי.
מה תצטרכו
- דפדפן האינטרנט Chrome
- Antigravity IDE מותקן
- חשבון Google Stitch
- מפתח Stitch API
- Node.js (גרסה 18 ואילך) מותקן באופן מקומי
לפני שמתחילים
- ב-מסוף Google Cloud, בדף לבחירת הפרויקט, בוחרים או יוצרים פרויקט ב-Google Cloud.
- הקפידו לוודא שהחיוב מופעל בפרויקט שלכם ב-Cloud. כך בודקים אם החיוב מופעל בפרויקט
- עוברים אל stitch.withgoogle.com ומוודאים שאפשר להיכנס לחשבון.
- מוודאים ש-Antigravity IDE מותקן (זמין בכתובת antigravity.google).
2. יצירת העיצוב ב-Google Stitch
הסוכן צריך מקור אמת חזותי כדי לפעול לפיו. לפני שכותבים קוד, צריך להגדיר את האסתטיקה.
- גישה לפלטפורמה: עוברים אל stitch.withgoogle.com.
- בחירת סוג הפרויקט: בלוח הבקרה הראשי, מאתרים את לחצן ההפעלה התחלת עיצוב חדש. לוחצים על Web כדי לוודא שהעיצוב מותאם לפריסות מבוססות-דפדפן.
- בחירת המודל: בתיבת הפרומפט, לוחצים על התפריט הנפתח לבחירת המודל (שמוצג בו כרגע 3.0 Flash). כדי לקבל את חשיבה רציונלית משופרת המתקדמת ביותר ואת יצירת הפריסה הטובה ביותר, חשוב לוודא ש-Gemini 3 נבחר.
- מתארים את החזון: באזור הטקסט שנקרא "מתארים את העיצוב", מזינים את ההנחיה:
"תכנן דף נחיתה מודרני של SaaS לסטארט-אפ בתחום טכנולוגיית החלל בשם LaunchPad. תשתמש בפלטת צבעים של כחול כהה וסגול ניאון. תכלול קטע מרכזי עם לחצן 'מתחילים', רשת של תכונות עם 3 עמודות וטבלת מחירים עם אפקט זכוכית." 5. יצירה: לוחצים על סמל החץ (לצד בורר המודלים) כדי להתחיל בתהליך היצירה. 6. שיפור ומתן שם: אחרי שהממשק נוצר, נותנים לפרויקט שם בכותרת העליונה. נקרא לזה LaunchPad. אפשר להשתמש בסרגל הצד של הצ'אט כדי לשפר רכיבים ספציפיים לפני שעוברים ל-IDE.
[!TIP] אפשר גם לבחור מתוך
"הנחיות לדוגמה"
אם אתם רוצים להתחיל במהירות.
3. הגדרת MCP ב-Antigravity
כדי לאפשר ל-Antigravity Agent "לקרוא" את העיצוב, צריך ליצור מפתח API מאובטח ולהוסיף את שרת ה-MCP של Stitch.
יצירת מפתח Stitch API
- ב-Google Stitch, לוחצים על תמונת הפרופיל בפינה השמאלית העליונה.
- בתפריט הנפתח, בוחרים באפשרות הגדרות של תפירה.
- עוברים לקטע API key.
- לוחצים על הלחצן יצירת מפתח.
- מעתיקים את המפתח: מעתיקים מיד את המפתח שנוצר ושומרים אותו במקום בטוח. תצטרכו אותו בשלב הבא.
הגדרת Stitch MCP ב-Antigravity
- פותחים את Antigravity IDE.
- פותחים את המרכז לניהול סוכנים.
בכל שלב, אפשר לעבור בין Agent Manager לבין העורך באמצעות הקשה על CMD+E (Mac) או על CTRL+E (Windows), או באמצעות הלחצנים Open Editor (פתיחת העורך) ו-Open Agent Manager (פתיחת Agent Manager) בפינה השמאלית העליונה של סרגל התפריטים. .
- לוחצים על + פתיחת Workspace.
כדי להתחיל שיחה חדשה במרחב, בוחרים את המרחב הרצוי בכרטיסייה 'התחלת שיחה' או לוחצים על לחצן הפלוס שליד שם המרחב בסרגל הצד.
- לוחצים על 'פתיחת סביבת עבודה חדשה', נותנים שם לסביבת העבודה
LaunchPad-Projectובוחרים ספרייה מקומית. כך סוכן ה-AI מקבל תיקיית בסיס ספציפית ליצירת קבצים, בלי להעמיס על פרויקטים אחרים.
הגדרת ה-MCP של Stitch
- בסביבת העבודה החדשה, חוזרים אל Agent Manager (מנהל הסוכנים) (CMD+E ב-Mac או CTRL+E ב-Windows) ובוחרים באפשרות MCP Servers (שרתי MCP).
פותחים את חנות ה-MCP דרך התפריט הנפתח '…' בחלק העליון של חלונית הסוכן בכלי העריכה.
Antigravity תומך ב-Model Context Protocol (MCP), תקן שמאפשר לעורך להתחבר בצורה מאובטחת לכלים, למסדי נתונים ולשירותים חיצוניים מקומיים. השילוב הזה מספק ל-AI הקשר בזמן אמת, מעבר לקבצים שפתוחים בעורך.
פלטפורמת ה-MCP משמשת כגשר בין Antigravity לבין Google Stitch. במקום לייצא ידנית טוקנים של עיצוב או להעתיק קודי הקס ומטא-נתונים של פריסות אל העורך, MCP מאפשר ל-Antigravity לאחזר את ה-DNA של העיצוב ישירות מפרויקט Stitch שלכם כשצריך.
- מחפשים את Stitch ולוחצים על Install (התקנה).
- כשמוצגת בקשה, מדביקים את מפתח ה-API של Stitch בשדה ההגדרה.
- אימות: בצ'אט עם נציג, מקלידים:
List my Stitch projects.אם מוחזרת התוצאהLaunchPad, אפשר להמשיך.
- בודקים: בצ'אט עם הסוכן, מקלידים:
List my Stitch projects.אם הסוכן מחזירLaunchPad, הגשר מוגדר בהצלחה.
4. אחזור הקשר העיצובי
הסוכן צריך עכשיו להטמיע את המטא-נתונים של העיצוב כדי לוודא שהקוד מדויק.
- בצ'אט של Antigravity, מקלידים: "Use the Stitch MCP to fetch the ‘LaunchPad' project. תחלץ את פלטת הצבעים והטיפוגרפיה, ואז תיצור קובץ
DESIGN.mdבספריית הבסיס שלי". - בדיקה: פותחים את
DESIGN.mdשנוצר כדי לראות את קודי ה-Hex ואת כללי הפריסה שהסוכן חילץ.
5. הטמעה (הגרסה)
משתמשים בסוכן כדי לתרגם את העיצוב לאפליקציית React פעילה.
- מזינים את ההנחיה 'יצירה':
"אני רוצה לבנות את האתר המלא הזה עכשיו. משתמשים ב-React וב-Tailwind CSS. מוודאים שהרכיבים מודולריים. אחרי שתסיים, תפעיל את שרת הפיתוח ותציג לי אותו בדפדפן המשולב". 2. צופים בסוכן: הוא יבנה את הפרויקט בטרמינל, יכתוב את הרכיבים בכלי העריכה ויפתח את התצוגה המקדימה בדפדפן המשולב.
6. בדיקה ושיפור
בודקים את הפלט ומשתמשים בסוכן כדי לתקן פערים חזותיים.
- משווים את הפלט של הדפדפן המשולב לעיצוב המקורי של Stitch.
- אם יש אלמנטים שלא תואמים (למשל, ריווח פנימי של לחצן או עובי הגופן), מנחים את הסוכן: "הריווח הפנימי של הלחצן 'התחלה' לא מדויק. עליך לעיין בעיצוב של Stitch ולעדכן את המחלקות של Tailwind".
- הסוכן יאחזר מחדש את הקשר העיצובי ויחיל את התיקון באופן מיידי.
7. סיכום והשלבים הבאים
מעולה! הצלחתם לגשר על הפער בין עיצוב באיכות גבוהה לבין בסיס קוד פונקציונלי באמצעות Antigravity ו-Stitch MCP.
סיכום הפעולות שביצעת:
- עיצוב ממשק משתמש ב-Stitch באמצעות Gemini 3.
- יצירת מפתח API מאובטח והגדרת Antigravity MCP.
- השתמשתם בסוכן אוטונומי כדי ליצור ולאמת אתר React + Tailwind.