פיתוח מהיר ב-Vibe Mode

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

מה זה בכלל Vibe Mode?

בעולם של Kiro, ה-Vibe Mode הוא "המסלול המהיר" (The Happy Path). זהו מצב עבודה שבו אנחנו מתארים משימה בשפה חופשית וטבעית בתוך פאנל הצ'אט, ו-Kiro פשוט מבצע אותה.

בניגוד למצבים מורכבים יותר, ה-Vibe Mode לא דורש מאיתנו לעבור תהליך תכנון ארוך של דרישות ועיצוב. זה המקום שבו אנחנו "מדברים" עם הקוד שלנו.

מה קורה אחרי ששולחים את הבקשה?

רגע אחרי ששלחתם את הפרומפט בצ'אט, איך Kiro מתנהג? זה תלוי בכפתור אחד קטן אך משמעותי – כפתור ה-Autopilot.

• כשה-Autopilot כבוי (Supervised Mode - מצב מפוקח): קירו לא נוגע בקוד על דעת עצמו. הוא יחשוב, ואז יציג לכם על המסך תצוגת השוואה (Diff). תראו בדיוק מה הוא מתכנן לשנות – שורות באדום (מה שנמחק) מול שורות בירוק (מה שנוסף). אתם אלה שעוברים על השינויים ומחליטים אם ללחוץ על אישור (Accept) או דחייה (Reject) עבור כל קובץ בנפרד. יש לכם 100% שליטה.
• כשה-Autopilot דלוק (Autonomous Mode - מצב עצמאי): קירו מקבל מכם "יד חופשית". הוא ייצור קבצים חדשים, יערוך קוד קיים ואפילו ימחק דברים כדי להשלים את המשימה שביקשתם – והכל ברצף, מבלי לעצור ולבקש אישור על כל צעד. זה המסלול המהיר ביותר, והוא עובד כמו קסם כשהסוכן כבר מכיר את הפרויקט דרך קבצי ה-Steering.

באילו מקרים נרצה להשתמש בזה?

מצב Vibe מצטיין במיוחד במקרים הבאים:

• הוספת רכיבי UI (Quick UI additions): מעולה כשרוצים להוסיף כפתורים, טפסים או אלמנטים ויזואליים לממשק.
• שדרוגים פשוטים (Simple feature enhancements): כאשר רוצים להרחיב או לשפר פונקציונליות קיימת באפליקציה.
• תיקוני באגים (Bug fixes): טיפול בבעיות נקודתיות וספציפיות בתוך רכיבים בודדים (קומפוננטות מבודדות).
• שיפור קוד (Refactoring): ארגון מחדש ושיפור המבנה של הקוד בתוך קובץ יחיד.

איך Vibe Mode משתמש בקבצי ההנחיה (Steering) מהפרק הקודם?

כאן הקסם האמיתי קורה. לפני שאתם בכלל כותבים את הבקשה הראשונה שלכם בצ'אט, Kiro כבר קרא את קבצי ה-Steering שלכם (כמו מסמכי המוצר, הטכנולוגיה והארכיטקטורה). המשמעות היא שאתם לא צריכים להסביר לו בכל פעם מחדש דברים כמו "תשתמש ב-TypeScript", "תעבוד לפי התבניות של React" או "תתאים לעיצוב הקיים". Kiro כבר יודע את כל זה. אתם רק צריכים לתאר מה אתם רוצים שהוא יבנה, בלי להסביר לו איך לבנות את זה.

בונוס: דוגמאות לפרומפטים עבור יעילות מירבית

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

דוגמה 1: הוספת רכיב ממשק (Adding a UI Element)

❌ פרומפט חלש: Add a search bar

למה הוא חלש?

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

✅ פרומפט טוב: Add a search input field at the top of the 'Users' page. It should filter the user list table in real-time by the 'username' and 'email' columns as the user types.

למה הוא טוב?

• מגדיר מיקום מדויק (בראש עמוד המשתמשים).
• מסביר במדויק את ההתנהגות (סינון בזמן אמת תוך כדי הקלדה).
• מציין בדיוק אילו נתונים צריך לסנן (שם משתמש ואימייל).

דוגמה 2: שינויי עיצוב (Styling Changes)

❌ פרומפט חלש: Make the navigation bar look more modern

למה הוא חלש?

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

✅ פרומפט טוב: Change the navigation bar background to dark gray (#333333), update all link text to white with a font-weight of 600, and add a 2px solid blue underline transition when hovering over a link.

למה הוא טוב?

• מספק שינויים ויזואליים ספציפיים.
• כולל ערכים מדידים (קוד צבע, עובי פונט 600, קו תחתון של 2px).
• מגדיר טריגר ברור לפעולה (במעבר עכבר - hover).

דוגמה 3: תיקון באגים (Bug Fixes)

❌ פרומפט חלש: Fix the shopping cart

למה הוא חלש?

• לא מתאר בכלל מה הבאג או מה קורה בפועל.
• לא נותן הקשר לאיזה חלק בעגלת הקניות שבור.
• Kiro לא יודע מאיפה להתחיל לחפש את הבעיה.

✅ פרומפט טוב: When a user clicks the 'Add to Cart' button on a product page, the cart icon counter in the top header should instantly increment by 1. Currently, the counter only updates after manually refreshing the page. Fix this state update issue.

למה הוא טוב?

• מתאר את ההתנהגות הנוכחית (התקלה מופיעה רק אחרי ריענון).
• מתאר את ההתנהגות המצופה (המספר אמור לעלות מיד).
• מציין מיקום ספציפי (הקאונטר ב-header לעומת כפתור ההוספה בעמוד המוצר).

לסיכום – מה למדנו בפרק זה?

• Vibe Mode הוא "המסלול המהיר": למדנו איך לתקשר עם Kiro בשפה טבעית כדי לכתוב ולשפר קוד במהירות, מבלי להיכנס לתכנון ארכיטקטוני ארוך.
• השימושים האידיאליים: הבנו שזהו הכלי המושלם לתוספות UI, פיצ'רים קטנים, תיקוני באגים ו-Refactoring של קבצים בודדים.
• הכוח של קבצי ה-Steering: ראינו איך ההנחיות שיצרנו בפרק הקודם עובדות מאחורי הקלעים ומונעות מאיתנו לחזור על עצמנו בכל בקשה מחדש.
• אומנות הפרומפט: גילינו שפרומפט יעיל – כזה שכולל מיקום ברור, התנהגות רצויה ונתונים ספציפיים – הוא המפתח לתוצאות מדויקות, עבודה חלקה וחיסכון בקרדיטים.

להלן אינפוגרפיקה שמרכזת את כל הנקודות החשובות שדיברנו עליהן בתמונה אחת: