כבר לא צריך לכתוב אלפי שורות קוד כדי לבנות אפליקציית ווב. עם Gemini Canvas מתארים בשיחה מה רוצים, ותוך כמה דקות יש אפליקציה של עמוד אחד שעובדת.
הנה תהליך ה"Vibe Coding" צעד אחרי צעד, עם הפרומפטים המדויקים לכל שלב.
המסך מתחלק לשניים: הצ'אט משמאל, ומימין חלון Preview / Code חי.
לא כותבים "תבנה לי אתר". קודם מבקשים מ-Gemini לנסח פרומפט בנייה טוב.
המטא פרומפט:
אני רוצה לבנות אתר ל[הרעיון שלכם, למשל: מאפייה שכונתית / תיק עבודות אישי]. תעזור לי לכתוב פרומפט ראשון ל-Gemini Canvas לפי הכללים האלה: 1. להתחיל מהסגנון והאווירה. 2. להישאר בעמוד אחד נקי. 3. [הפונקציות שאתם צריכים].
ככה ה-AI בונה הוראות מסודרות שמותאמות לפרויקט, עוד לפני שנכתבת שורת קוד אחת.
תתנהג כמפתח ווב בכיר. תבנה אפליקציית ווב מודרנית בעמוד אחד ל[שם העסק / הפרויקט].
סגנון ואווירה: מינימליסטי, נקי וחמים. רקע אוף וייט רך (#FAF9F6) עם נגיעות ירוק מרווה (#8A9A86) ופינות מעוגלות.
התפקיד גורם ל-AI לכתוב קוד נקי. הגבלת ההיקף שומרת על מבנה קטן. קודי הצבע מורידים ניחושים, והתוצאה הראשונה כבר נראית כמו שרציתם.
אחרי ששולחים את הפרומפט, Gemini כותב את הקוד ומציג תצוגה חיה מימין. בלשונית Preview לוחצים על כפתורים ובודקים ניווט כמו משתמש אמיתי. בלשונית Code רואים את ה-HTML, ה-CSS וה-JavaScript.
לוחצים על אייקון "Select and Ask" בפינה הימנית התחתונה של התצוגה, לוחצים על כפתור, כותרת או תמונה, וכותבים מה לשנות. למשל:
תצבע את הכפתור הזה בכחול חשמלי ותגדיל לו את הריפוד.
Gemini מזהה את האלמנט ומשנה רק את החלק הזה בקוד.
מוסיפים דבר אחד בכל פעם, במילים פשוטות:
תוסיף כפתור מצב כהה לסרגל הניווט העליון.
תוסיף גלילה חלקה כשלוחצים על קישורים בתפריט.
ואם משהו נשבר, מתארים מה לא עובד ו-Gemini מוצא ומתקן.
Vibe Coding עם Gemini Canvas הופך בניית אתר לשיחה: מתארים תחושה, מנסחים פרומפט ממוקד, רואים מיד, מתקנים ויזואלית ומוסיפים פיצ'ר אחד בכל פעם. הקוד נשאר מסודר והתוצאה נשארת קרובה למה שדמיינתם.
עוד תהליכי עבודה וכלי AI ב-masterphub.io.