1. Een scherm genereren en bekijken
De meest voorkomende workflow: genereer een scherm (het bestand wordt in dezelfde stap aangemaakt) en bekijk daarna het resultaat.fileId weg om automatisch een nieuw bestand aan te maken. Geef een bestaande fileId mee om schermen aan dat bestand toe te voegen.
Prompt voor je AI-assistent:
Genereer een Flowstep-ontwerp: een mobiel inlogscherm voor een developertool met e-mail/wachtwoord-velden en een Google SSO-knop, in een donker thema. Toon daarna de afbeelding.
2. Een React-component visualiseren
Upload een.jsx- of .tsx-bestand als bijlage en vraag Flowstep om een passend ontwerp te genereren. Flowstep leest de broncode en maakt een scherm. Je hoeft de app niet te draaien.
upload-attachment met mimeType en fileName, en voer je het teruggegeven uploadCommand uit. Zie upload-attachment.
Prompt voor je AI-assistent:
Lees src/components/settings/ApiKeys.tsx, upload het als bijlage en genereer een Flowstep-scherm dat de lay-out van de component evenaart. Toon me de gerenderde afbeelding.
3. Een scherm itereren
Wijzig een bestaand scherm ter plekke met vrije instructies, en voeg in dezelfde aanroep een nieuw scherm toe dat erbij past.screenIds somt elk scherm op dat de aanroep heeft gebouwd of gewijzigd, dus roep get-screen-image één keer per scherm aan. Laat de laatste zin van het bericht weg als je alleen het bestaande scherm wilt bewerken.
Om alleen een deel van een scherm te wijzigen, roep je eerst get-screen-jsx aan met "includeIds": true. Geef daarna in elementIds de data-id mee van het element dat je wilt wijzigen.
Voor een voorinstelling met één klik op een heel scherm roep je in plaats daarvan ai-edit-screen-variant aan, bijvoorbeeld met "operationVariant": "light_theme" of "different_layout".
Prompt voor je AI-assistent:
Schakel in mijn “Login flow”-Flowstep-bestand het inlogscherm over naar donkere modus, voeg een selectievakje “Remember me” toe onder het wachtwoordveld en voeg een bijpassend scherm voor wachtwoord vergeten toe. Toon me de resultaten.
4. Een scherm uitbreiden tot een volledige flow
Voeg vervolgschermen toe aan een bestaand ontwerp.operationVariant: "error_state" of "empty_state" om schermen voor randgevallen toe te voegen, of met "web_version" of "tablet_version" voor andere platforms.
operationVariant is verplicht voor ai-generate-screen-variant, en de tool accepteert precies één screenId. Om een scherm toe te voegen dat geen variant van een bestaand scherm is, gebruik je ai-design-screens met een fileId.5. Een scherm naar je codebase brengen en wijzigingen terugschrijven
Lees een scherm als JSX, bouw erop verder en zet je bewerkte JSX terug op het canvas. Dit doe je zonder berichten te gebruiken.name, fidelity, screenType, colorTheme, fragments) behouden hun huidige waarde. Om het origineel te bewaren en je versie ernaast te zetten, roep je add-screen-jsx aan met screenType en jsx in plaats van replace-screen-jsx.
Om je eigen afbeelding in het scherm te tonen, upload je die met upload-attachment en zet je de teruggegeven assetUrl in een img src in je JSX. Zie Afbeeldingen in JSX.
6. Controleer je quotum voordat je een batchtaak start
Controleer het resterende quotum voordat je meerdere generaties start.get-plan-details is gratis om aan te roepen.
remaining.messages.daily laag is, plan je de batch voor na 00:00 UTC, wanneer het quotum wordt gereset.