Перейти до основного вмісту

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

Найпоширеніший робочий процес: генеруйте екран (створюючи файл у тому ж кроці), а потім переглядайте результат. 
1. create-new-design { "message": "Mobile sign-in screen for a developer tool.
                                  Email/password fields, Google SSO button, dark theme." }
                     → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

2. get-screen-image  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                     → [inline PNG]
Пропуск fileId автоматично створює новий файл. Передайте існуючий fileId, щоб додати екрани до цього файлу замість цього. Промпт для вашого помічника AI:
Створіть дизайн Flowstep: мобільний екран входу для інструменту розробника з полями електронної пошти/пароля та кнопкою Google SSO у темній темі, а потім покажіть мені зображення.

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

Завантажте файл .jsx або .tsx як додаток і попросіть Flowstep створити відповідний дизайн. Flowstep читає вихідний код і створює екран — немає потреби запускати додаток. 
1. upload-attachment  { "fileData": "<UTF-8 contents of ApiKeys.tsx>",
                        "fileName": "ApiKeys.tsx",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. create-new-design  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
Промпт для вашого помічника AI:
Прочитайте src/components/settings/ApiKeys.tsx, завантажте його як додаток і створіть екран Flowstep, який відповідає макету компонента. Покажіть мені відображене зображення.

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

edit-design і regenerate-design вимагають контексту дизайну, який присутній лише на екранах, створених за допомогою масиву designs. Для екранів, створених без нього, обхідним шляхом є відображення екрану як додатку та виклик create-new-design зі зображенням. 
1. upload-attachment  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. create-new-design  { "fileId": "FILE_ID",
                        "message": "Change the color scheme to dark mode and
                                    add a 'Remember me' checkbox below the password field.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]
Для екранів, які мають контекст дизайну, викликайте edit-design безпосередньо зі змінами в message та екраном в targets.

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

Додавайте наступні екрани до існуючого дизайну. 
1. list-screens   { "fileId": "FILE_ID" }
                  → [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }]

2. expand-design  { "fileId": "FILE_ID",
                    "message": "Add the next screen in the user flow",
                    "operationVariant": "next_screen",
                    "targets": ["BASE_SCREEN_ID"] }
                  → { "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"] }

3. get-screen-image { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                    → [inline PNG]
Повторіть крок 2 з operationVariant: "error_state" або "empty_state", щоб додати екрани граничних випадків.
operationVariant є обов’язковим параметром для expand-design. Базовий екран також повинен був бути створений за допомогою масиву designs (контекст дизайну) — для екранів без нього використовуйте обхідний шлях із додатками з прикладу 3.

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

Перевірте залишкову ємність перед запуском кількох поколінь. 
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
Якщо daily низький, заплануйте партію після 00:00 UTC, коли вона скидається.