Skip to main content

1. Vygenerujte a zobrazte obrazovku

Nejčastější pracovní postup: vygenerujte obrazovku (vytvoření souboru v tomto kroku) a poté si zobrazte výsledek.
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.
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.
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.
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í.
Pokud je daily nízko, naplánujte dávku na dobu po 00:00 UTC, kdy se resetuje.