1. Genera e visualizza in anteprima una schermata
Il flusso di lavoro più comune: genera una schermata (creando il file nello stesso passaggio), poi visualizza il risultato.fileId crea automaticamente un nuovo file. Passa un fileId esistente per aggiungere invece le schermate a quel file.
Prompt per il tuo assistente AI:
Genera un design Flowstep: una schermata di accesso mobile per uno strumento per sviluppatori, con email/password e un pulsante Google SSO in tema scuro, poi mostrami l’immagine.
2. Visualizza un componente React
Carica un file.jsx o .tsx come allegato e chiedi a Flowstep di generare un design corrispondente. Flowstep legge il sorgente e produce una schermata: non serve eseguire l’app.
upload-attachment con mimeType e fileName ed esegui il uploadCommand restituito. Vedi upload-attachment.
Prompt per il tuo assistente AI:
Leggi src/components/settings/ApiKeys.tsx, caricalo come allegato e genera una schermata Flowstep che corrisponda al layout del componente. Mostrami l’immagine renderizzata.
3. Itera su una schermata
Modifica una schermata esistente in place con istruzioni libere e, nella stessa chiamata, aggiungi una nuova schermata che le corrisponda.screenIds elenca ogni schermata che la chiamata ha costruito o modificato, quindi chiama get-screen-image una volta per ciascuna. Ometti l’ultima frase del messaggio se vuoi modificare solo la schermata esistente.
Per modificare solo una parte di una schermata, chiama prima get-screen-jsx con "includeIds": true e passa in elementIds il data-id dell’elemento che vuoi cambiare.
Per un preset con un clic su un’intera schermata, chiama invece ai-edit-screen-variant, per esempio con "operationVariant": "light_theme" oppure "different_layout".
Prompt per il tuo assistente AI:
Nel mio file Flowstep “Login flow”, passa la schermata di accesso al tema scuro, aggiungi una casella “Remember me” sotto il campo della password e aggiungi una schermata corrispondente per il recupero password. Mostrami i risultati.
4. Espandi una schermata in un flusso completo
Aggiungi schermate successive a un design esistente.operationVariant: "error_state" o "empty_state" per aggiungere schermate di casi limite, oppure con "web_version" o "tablet_version" per altre piattaforme.
operationVariant è obbligatorio per ai-generate-screen-variant, e lo strumento accetta esattamente un screenId. Per aggiungere una schermata che non è una variante di una esistente, usa ai-design-screens con un fileId.5. Passa una schermata alla codebase, poi riporta le modifiche
Leggi una schermata come JSX, costruisci a partire da essa e riporta sul canvas il JSX modificato, senza usare messaggi.name, fidelity, screenType, colorTheme, fragments) mantengono i valori attuali. Per conservare l’originale e aggiungere la tua versione accanto, chiama add-screen-jsx con screenType e jsx invece di replace-screen-jsx.
Per mostrare un’immagine tua nella schermata, caricala con upload-attachment e inserisci l’assetUrl restituito in un img src nel tuo JSX. Vedi Immagini nel JSX.
6. Verifica la quota prima di un lavoro in batch
Controlla la capacità residua prima di avviare più generazioni.get-plan-details è gratuito.
remaining.messages.daily è basso, programma il batch dopo le 00:00 UTC, quando si azzera.