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
- סביבת פיתוח משולבת (IDE) של Antigravity מותקנת
- חשבון Google Stitch
- מפתח Stitch API
- Node.js (גרסה 18 ואילך) מותקן באופן מקומי
לפני שמתחילים
- ב-מסוף Google Cloud, בדף לבחירת הפרויקט, בוחרים או יוצרים פרויקט ב-Google Cloud.
- הקפידו לוודא שהחיוב מופעל בפרויקט שלכם ב-Cloud. כך בודקים אם החיוב מופעל בפרויקט
זיכויים ב-Google Cloud: כדי לעזור לכם להשתמש ב-Antigravity עם פרויקטים ב-Google Cloud, אתם יכולים לממש את הזיכויים ב-Google Cloud בחינם באמצעות הקישור הזה. כדי להפעיל את הקרדיט וליצור פרויקט חדש, אפשר לפעול לפי ההוראות שמופיעות כאן.
- עוברים אל stitch.withgoogle.com ומוודאים שאפשר להיכנס לחשבון.
- מוודאים שAntigravity IDE מותקן (זמין בכתובת antigravity.google).
2. יצירת העיצוב ב-Google Stitch
ה-Agent צריך מקור אמת חזותי כדי לפעול לפיו. לפני שכותבים קוד, צריך להגדיר את האסתטיקה.
- גישה לפלטפורמה: עוברים אל stitch.withgoogle.com.
- בחירת סוג הפרויקט: בלוח הבקרה הראשי, מאתרים את מתג התחלת עיצוב חדש. לוחצים על Web כדי לוודא שהעיצוב מותאם לפריסות מבוססות-דפדפן.
- בחירת המודל: לוחצים על התפריט הנפתח לבחירת מודל (שמוצג בו כרגע 3.0 Flash) בתוך תיבת ההנחיה. כדי לקבל את החשיבה הרציונלית המשופרת המתקדמת ביותר ואת פריסת התוצאות הטובה ביותר, חשוב לוודא שבוחרים באפשרות Gemini 3.
- מתארים את החזון: באזור הטקסט עם התווית "מתארים את העיצוב", מזינים את ההנחיה:
"תכנן דף נחיתה מודרני של SaaS לסטארט-אפ בתחום טכנולוגיית החלל בשם LaunchPad. השתמש בפלטת צבעים של כחול כהה וסגול ניאון. צריך לכלול קטע מרכזי עם לחצן 'מתחילים', טבלת תכונות עם 3 עמודות וטבלת מחירים עם אפקט זכוכית." 5. יצירה: לוחצים על סמל החץ (לצד בורר המודלים) כדי להתחיל בתהליך היצירה. 6. שיפור ושם: אחרי שהממשק נוצר, נותנים לפרויקט שם בכותרת העליונה. נקרא לזה LaunchPad. אפשר להשתמש בסרגל הצד של הצ'אט כדי לשפר רכיבים ספציפיים לפני שעוברים ל-IDE.
[!TIP] אפשר גם לבחור מתוך
"כדאי לנסות את ההנחיות האלה"
אם אתם רוצים להתחיל במהירות.
3. הגדרת Antigravity MCP
כדי לאפשר ל-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שנוצר כדי לראות את הקודים ההקסדצימליים ואת כללי הפריסה שהסוכן חילץ.
5. הטמעה (הגרסה)
משתמשים בסוכן כדי לתרגם את העיצוב לאפליקציית React פעילה.
- מזינים את ההנחיה 'יצירה':
"אני רוצה לבנות את האתר המלא הזה עכשיו. משתמשים ב-React וב-Tailwind CSS. מוודאים שהרכיבים מודולריים. אחרי שתסיים, תריץ את שרת הפיתוח ותציג לי אותו בדפדפן המשולב". 2. צופים בסוכן: הוא יבנה את הפרויקט בטרמינל, יכתוב את הרכיבים בכלי העריכה ויפתח את התצוגה המקדימה בדפדפן המשולב.
6. בדיקה ושיפור
בודקים את הפלט ומשתמשים בסוכן כדי לתקן פערים חזותיים.
- משווים את הפלט של הדפדפן המשולב לעיצוב המקורי של Stitch.
- אם יש אלמנטים שלא תואמים (למשל, ריווח פנימי של לחצן או עובי גופן), נותנים לסוכן את ההנחיה: "הריווח הפנימי של הלחצן 'תחילת העבודה' לא מדויק. עליך לעיין שוב בעיצוב של Stitch ולעדכן את המחלקות של Tailwind".
- הסוכן יאחזר מחדש את הקשר העיצובי ויחיל את התיקון באופן מיידי.
7. סיכום והשלבים הבאים
מעולה! הצלחתם לגשר על הפער בין עיצוב באיכות גבוהה לבין codebase פונקציונלי באמצעות Antigravity ו-Stitch MCP.
סיכום הפעולות שביצעת:
- עיצוב ממשק משתמש ב-Stitch באמצעות Gemini 3.
- יצירת מפתח API מאובטח והגדרת Antigravity MCP.
- השתמשתם בסוכן אוטונומי כדי ליצור ולאמת אתר React + Tailwind.