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