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 בסביבת הפיתוח המשולבת (IDE) של Antigravity.
- איך משתמשים בסוכנים אוטונומיים כדי לתרגם מטא נתונים של עיצוב חזותי לקוד מודולרי.
מה תצטרכו
- דפדפן האינטרנט Chrome
- סביבת פיתוח משולבת (IDE) של Antigravity מותקנת
- חשבון 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.
יצירת מפתח API של Stitch
- ב-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.