Skip to main content

1. דור ותצוגה מקדימה של מסך

זרימת העבודה הנפוצה ביותר: דור מסך (יצירת הקובץ באותו שלב), ואז הצגת התוצאה.
השמטת fileId יוצרת קובץ חדש באופן אוטומטי. העבר קיים fileId כדי להוסיף מסכים לאותו קובץ במקום. פרומפט לעוזר ה-AI שלך:
Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.

2. תצוגה של רכיב React

העלה קובץ .jsx או .tsx כ-attachment והבקש מ-Flowstep לדור עיצוב תואם. Flowstep קורא את המקור וייצור מסך — אין צורך להריץ את האפליקציה.
פרומפט לעוזר ה-AI שלך:
Read src/components/settings/ApiKeys.tsx, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.

3. איטרציה על מסך שנוצר ב-MCP

edit-design ו-regenerate-design דורשים הקשר עיצוב שקיים רק על מסכים שנוצרו עם מערך designs. עבור מסכים שנוצרו ללא אחד, ההסדר הוא לעבד את המסך כ-attachment וקרא ל-create-new-design עם התמונה.
עבור מסכים שיש להם הקשר עיצוב, קרא ל-edit-design ישירות עם השינוי ב-message והמסך ב-targets.

4. הרחבת מסך לזרימת עבודה מלאה

הוסף מסכים עוקבים לעיצוב קיים.
חזור על שלב 2 עם operationVariant: "error_state" או "empty_state" כדי להוסיף מסכי מקרים קיצוניים.
operationVariant הוא פרמטר חובה עבור expand-design. גם המסך הבסיס חייב להיות נוצר עם מערך designs (הקשר עיצוב) — עבור מסכים ללא אחד, השתמש בהסדר attachment מדוגמה 3.

5. ביקורת קוטה לפני עבודה קבוצתית

בדוק יכולת שיורית לפני הפעלת דורים מרובים.
אם daily נמוך, תזמן את העבודה הקבוצתית אחרי 00:00 UTC כאשר היא מתאפסת.