Přejít na hlavní obsah

​
1. Vygenerujte a zobrazte obrazovku

Nejčastější pracovní postup: vygenerujte obrazovku (vytvoření souboru v tomto kroku) a poté si zobrazte výsledek. 
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]
Vynechání fileId automaticky vytvoří nový soubor. Předejte existující fileId pro přidání obrazovek do tohoto souboru. Prompt pro vašeho AI asistenta:
Vygenerujte Flowstep design: mobilní přihlašovací obrazovku pro vývojářský nástroj s poli pro e-mail/heslo a tlačítkem Google SSO v tmavém režimu, a poté mi zobrazte obrázek.

​
2. Vizualizujte komponentu React

Nahrajte soubor .jsx nebo .tsx jako přílohu a požádejte Flowstep, aby vygeneroval odpovídající design. Flowstep přečte zdrojový kód a vytvoří obrazovku — není potřeba spouštět aplikaci. 
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 pro vašeho AI asistenta:
Přečtěte si src/components/settings/ApiKeys.tsx, nahrajte ji jako přílohu a vygenerujte Flowstep obrazovku, která odpovídá rozložení komponenty. Zobrazte mi vykreslený obrázek.

​
3. Iterujte nad obrazovkou generovanou MCP

edit-design a regenerate-design vyžadují kontext designu, který je přítomen pouze na obrazovkách generovaných s polem designs. Pro obrazovky generované bez něj je řešením vykreslit obrazovku jako přílohu a zavolat create-new-design s obrázkem. 
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]
Pro obrazovky, které mají kontext designu, zavolejte edit-design přímo se změnou v message a obrazovkou v targets.

​
4. Rozšiřte obrazovku na úplný tok

Přidejte navazující obrazovky k existujícímu designu. 
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]
Opakujte krok 2 s operationVariant: "error_state" nebo "empty_state" pro přidání obrazovek okrajových případů.
operationVariant je povinný parametr pro expand-design. Základní obrazovka musí být také vygenerována s polem designs (kontext designu) — pro obrazovky bez něj použijte obejití pomocí přílohy z příkladu 3.

​
5. Auditujte kvótu před hromadnou úlohou

Zkontrolujte zbývající kapacitu před spuštěním více generování. 
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
Pokud je daily nízko, naplánujte dávku na dobu po 00:00 UTC, kdy se resetuje.