1. Generer og forhåndsvis en skjerm
Den vanligste arbeidsflyten: generer en skjerm (filen opprettes i samme steg), og vis deretter resultatet.fileId, opprettes en ny fil automatisk. Send inn en eksisterende fileId for å legge til skjermer i den filen i stedet.
Prompt til AI-assistenten din:
Generer et Flowstep-design: en mobil innloggingsskjerm for et utviklerverktøy med felt for e-post og passord og en Google SSO-knapp i mørkt tema, og vis meg deretter bildet.
2. Visualiser en React-komponent
Last opp en.jsx- eller .tsx-fil som vedlegg, og be Flowstep generere et tilsvarende design. Flowstep leser kildekoden og lager en skjerm. Du trenger ikke å kjøre appen.
upload-attachment med mimeType og fileName i stedet, og kjører den returnerte uploadCommand. Se upload-attachment.
Prompt til AI-assistenten din:
Les src/components/settings/ApiKeys.tsx, last den opp som vedlegg, og generer en Flowstep-skjerm som samsvarer med komponentens oppsett. Vis meg det gjengitte bildet.
3. Forbedre en skjerm
Endre en eksisterende skjerm på stedet med frie instruksjoner. I samme kall kan du også legge til en ny skjerm som samsvarer med den.screenIds lister alle skjermene kallet bygde eller endret, så kall get-screen-image én gang for hver. Utelat den siste setningen i meldingen hvis du bare vil redigere den eksisterende skjermen.
For å endre bare en del av en skjerm kaller du først get-screen-jsx med "includeIds": true, og sender data-id til elementet du vil endre i elementIds.
For en forhåndsinnstilling med ett klikk på en hel skjerm kaller du ai-edit-screen-variant i stedet, for eksempel med "operationVariant": "light_theme" eller "different_layout".
Prompt til AI-assistenten din:
I Flowstep-filen «Login flow» bytter du innloggingsskjermen til mørkt tema, legger til et avkrysningsfelt «Remember me» under passordfeltet, og legger til en tilsvarende skjerm for glemt passord. Vis meg resultatene.
4. Utvid en skjerm til en hel flyt
Legg til oppfølgingsskjermer i et eksisterende design.operationVariant: "error_state" eller "empty_state" for å legge til skjermer for kantstilfeller, eller "web_version" / "tablet_version" for andre plattformer.
operationVariant er påkrevd for ai-generate-screen-variant, og verktøyet tar nøyaktig én screenId. For å legge til en skjerm som ikke er en variant av en eksisterende, bruker du ai-design-screens med en fileId.5. Gi en skjerm til kodebasen din, og skriv endringer tilbake
Les en skjerm som JSX, bygg videre på den, og send den redigerte JSX-en tilbake til lerretet. Ingen av stegene bruker meldinger.name, fidelity, screenType, colorTheme, fragments), beholder de gjeldende verdiene sine. For å beholde originalen og legge til versjonen din ved siden av den, kaller du add-screen-jsx med screenType og jsx i stedet for replace-screen-jsx.
For å vise ditt eget bilde i skjermen laster du det opp med upload-attachment og legger den returnerte assetUrl-en i en img src i JSX-en din. Se Bilder i JSX.
6. Sjekk kvoten din før en batchjobb
Sjekk gjenværende kapasitet før du starter flere genereringer.get-plan-details er gratis å kalle.
remaining.messages.daily er lav, planlegger du batchen til etter 00:00 UTC, når grensen nullstilles.