1. יצירה והצגה מקדימה של מסך
התהליך הנפוץ ביותר: יוצרים מסך (והקובץ נוצר באותו שלב), ואז צופים בתוצאה.fileId יוצרת קובץ חדש אוטומטית. העבירו fileId קיים כדי להוסיף מסכים לקובץ הזה במקום.
פרומפט לעוזר ה-AI שלכם:
צרו עיצוב Flowstep: מסך כניסה לנייד לכלי פיתוח, עם שדות דוא״ל/סיסמה וכפתור Google SSO בערכת נושא כהה, ואז הציגו לי את התמונה.
2. הצגה חזותית של רכיב React
העלו קובץ.jsx או .tsx כקובץ מצורף, ובקשו מ-Flowstep ליצור עיצוב תואם. Flowstep קורא את קוד המקור ומפיק מסך — אין צורך להריץ את האפליקציה.
upload-attachment עם mimeType ו-fileName במקום, והריצו את uploadCommand שיוחזר. ראו upload-attachment.
פרומפט לעוזר ה-AI שלכם:
קראו את src/components/settings/ApiKeys.tsx, העלו אותו כקובץ מצורף, וצרו מסך Flowstep שתואם לפריסת הרכיב. הציגו לי את התמונה המרונדרת.
3. שיפור מסך
שנו מסך קיים במקומו באמצעות הוראות חופשיות — ובאותה קריאה, הוסיפו מסך חדש שתואם לו.screenIds מפרט כל מסך שהקריאה בנתה או שינתה, לכן קראו ל-get-screen-image פעם אחת עבור כל אחד מהם. השמיטו את המשפט האחרון של ההודעה כדי לערוך רק את המסך הקיים.
כדי לשנות רק חלק ממסך, קראו קודם ל-get-screen-jsx עם "includeIds": true, והעבירו ב-elementIds את ה-data-id של האלמנט שברצונכם לשנות.
לשינוי מוגדר מראש בלחיצה אחת על מסך שלם, קראו ל-ai-edit-screen-variant במקום — למשל "operationVariant": "light_theme" או "different_layout".
פרומפט לעוזר ה-AI שלכם:
בקובץ “Login flow” שלי ב-Flowstep, עברו את מסך הכניסה לערכת נושא כהה, הוסיפו תיבת סימון “Remember me” מתחת לשדה הסיסמה, והוסיפו מסך שכחתי סיסמה תואם. הציגו לי את התוצאות.
4. הרחבת מסך לתהליך מלא
הוסיפו מסכי המשך לעיצוב קיים.operationVariant: "error_state" או "empty_state" כדי להוסיף מסכי קצה, או עם "web_version" / "tablet_version" לפלטפורמות אחרות.
operationVariant נדרש עבור ai-generate-screen-variant, והכלי מקבל בדיוק screenId אחד. כדי להוסיף מסך שאינו וריאציה של מסך קיים, השתמשו ב-ai-design-screens עם fileId.5. העברת מסך לבסיס הקוד שלכם, ואז כתיבת שינויים בחזרה
קראו מסך כ-JSX, בנו ממנו, ודחפו את ה-JSX הערוך בחזרה לקנבס — בלי להשתמש בהודעות.name, fidelity, screenType, colorTheme, fragments) שומרים על ערכיהם הנוכחיים. כדי לשמור את המקור ולהוסיף לצידו את הגרסה שלכם, קראו ל-add-screen-jsx עם screenType ו-jsx במקום replace-screen-jsx.
כדי להציג תמונה משלכם במסך, העלו אותה עם upload-attachment והכניסו את ה-assetUrl שהוחזר ב-img src שב-JSX שלכם. ראו תמונות ב-JSX.
6. בדיקת המכסה לפני משימה קבוצתית
בדקו את המכסה שנותרה לפני שתתחילו כמה יצירות. אפשר לקרוא ל-get-plan-details בחינם.
remaining.messages.daily נמוך, תזמנו את המשימה לאחר 00:00 UTC, כשהמכסה מתאפסת.