Langsung ke konten utama

​
1. Buat dan pratinjau layar

Alur kerja yang paling umum: buat layar (membuat file dalam langkah yang sama), lalu lihat hasilnya. 
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]
Menghilangkan fileId membuat file baru secara otomatis. Teruskan fileId yang ada untuk menambahkan layar ke file tersebut. Prompt ke asisten AI Anda:
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. Visualisasikan komponen React

Unggah file .jsx atau .tsx sebagai lampiran dan minta Flowstep untuk membuat desain yang sesuai. Flowstep membaca kode sumber dan menghasilkan layar — tidak perlu menjalankan aplikasi. 
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]
Prompt ke asisten AI Anda:
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. Iterasi pada layar yang dihasilkan MCP

edit-design dan regenerate-design memerlukan konteks desain yang hanya ada pada layar yang dihasilkan dengan array designs. Untuk layar yang dihasilkan tanpanya, solusinya adalah merender layar sebagai lampiran dan memanggil create-new-design dengan gambar tersebut. 
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]
Untuk layar yang memiliki konteks desain, panggil edit-design langsung dengan perubahan di message dan layar di targets.

​
4. Perluas layar ke alur lengkap

Tambahkan layar lanjutan ke desain yang ada. 
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]
Ulangi langkah 2 dengan operationVariant: "error_state" atau "empty_state" untuk menambahkan layar kasus tepi.
operationVariant adalah parameter yang diperlukan untuk expand-design. Layar dasar juga harus telah dihasilkan dengan array designs (konteks desain) — untuk layar tanpanya, gunakan solusi lampiran dari Contoh 3.

​
5. Audit kuota sebelum pekerjaan batch

Periksa kapasitas yang tersisa sebelum memulai beberapa generasi. 
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
Jika daily rendah, jadwalkan batch setelah 00:00 UTC saat sistem direset ulang.