Skip to main content

1. Генеруйте та переглядайте екран

Найпоширеніший робочий процес: генеруйте екран (створюючи файл у тому ж кроці), а потім переглядайте результат.
Пропуск fileId автоматично створює новий файл. Передайте існуючий fileId, щоб додати екрани до цього файлу замість цього. Промпт для вашого помічника AI:
Створіть дизайн Flowstep: мобільний екран входу для інструменту розробника з полями електронної пошти/пароля та кнопкою Google SSO у темній темі, а потім покажіть мені зображення.

2. Візуалізуйте компонент React

Завантажте файл .jsx або .tsx як додаток і попросіть Flowstep створити відповідний дизайн. Flowstep читає вихідний код і створює екран — немає потреби запускати додаток.
Промпт для вашого помічника AI:
Прочитайте src/components/settings/ApiKeys.tsx, завантажте його як додаток і створіть екран Flowstep, який відповідає макету компонента. Покажіть мені відображене зображення.

3. Ітеруйте над екраном, створеним MCP

edit-design і regenerate-design вимагають контексту дизайну, який присутній лише на екранах, створених за допомогою масиву designs. Для екранів, створених без нього, обхідним шляхом є відображення екрану як додатку та виклик create-new-design зі зображенням.
Для екранів, які мають контекст дизайну, викликайте edit-design безпосередньо зі змінами в message та екраном в targets.

4. Розширте екран на повний потік

Додавайте наступні екрани до існуючого дизайну.
Повторіть крок 2 з operationVariant: "error_state" або "empty_state", щоб додати екрани граничних випадків.
operationVariant є обов’язковим параметром для expand-design. Базовий екран також повинен був бути створений за допомогою масиву designs (контекст дизайну) — для екранів без нього використовуйте обхідний шлях із додатками з прикладу 3.

5. Перевірте квоту перед масовим завданням

Перевірте залишкову ємність перед запуском кількох поколінь.
Якщо daily низький, заплануйте партію після 00:00 UTC, коли вона скидається.