1. Генеруйте та переглядайте екран
Найпоширеніший робочий процес: генеруйте екран (створюючи файл у тому ж кроці), а потім переглядайте результат.fileId автоматично створює новий файл. Передайте існуючий fileId, щоб додати екрани до цього файлу замість цього.
Промпт для вашого помічника AI:
Створіть дизайн Flowstep: мобільний екран входу для інструменту розробника з полями електронної пошти/пароля та кнопкою Google SSO у темній темі, а потім покажіть мені зображення.
2. Візуалізуйте компонент React
Завантажте файл.jsx або .tsx як додаток і попросіть Flowstep створити відповідний дизайн. Flowstep читає вихідний код і створює екран — немає потреби запускати додаток.
Прочитайте src/components/settings/ApiKeys.tsx, завантажте його як додаток і створіть екран Flowstep, який відповідає макету компонента. Покажіть мені відображене зображення.
3. Ітеруйте над екраном, створеним MCP
edit-design і regenerate-design вимагають контексту дизайну, який присутній лише на екранах, створених за допомогою масиву designs. Для екранів, створених без нього, обхідним шляхом є відображення екрану як додатку та виклик create-new-design зі зображенням.
edit-design безпосередньо зі змінами в message та екраном в targets.
4. Розширте екран на повний потік
Додавайте наступні екрани до існуючого дизайну.operationVariant: "error_state" або "empty_state", щоб додати екрани граничних випадків.
operationVariant є обов’язковим параметром для expand-design. Базовий екран також повинен був бути створений за допомогою масиву designs (контекст дизайну) — для екранів без нього використовуйте обхідний шлях із додатками з прикладу 3.5. Перевірте квоту перед масовим завданням
Перевірте залишкову ємність перед запуском кількох поколінь.daily низький, заплануйте партію після 00:00 UTC, коли вона скидається.