1. Generar y previsualizar una pantalla
El flujo más común: genera una pantalla (creando el archivo en el mismo paso) y luego visualiza el resultado.fileId crea un archivo nuevo automáticamente. Pasa un fileId existente para añadir pantallas a ese archivo.
Prompt para tu asistente de IA:
Genera un diseño de Flowstep: una pantalla de inicio de sesión móvil para una herramienta de desarrollo, con correo electrónico y contraseña y un botón de SSO de Google, en tema oscuro. Luego muéstrame la imagen.
2. Visualizar un componente de React
Sube un archivo.jsx o .tsx como adjunto y pide a Flowstep que genere un diseño que coincida. Flowstep lee el código fuente y produce una pantalla; no necesitas ejecutar la app.
upload-attachment con mimeType y fileName en su lugar, y ejecuta el uploadCommand que devuelve. Consulta upload-attachment.
Prompt para tu asistente de IA:
Lee src/components/settings/ApiKeys.tsx, súbelo como adjunto y genera una pantalla de Flowstep que coincida con la disposición del componente. Muéstrame la imagen renderizada.
3. Iterar sobre una pantalla
Cambia una pantalla existente en su lugar con instrucciones libres y, en la misma llamada, añade una pantalla nueva que coincida con ella.screenIds enumera cada pantalla que la llamada creó o cambió, así que llama a get-screen-image una vez para cada una. Omite la última frase del mensaje si solo quieres editar la pantalla existente.
Para cambiar solo una parte de una pantalla, llama primero a get-screen-jsx con "includeIds": true y pasa en elementIds el data-id del elemento que quieres cambiar.
Para aplicar un preajuste de un clic a una pantalla completa, llama a ai-edit-screen-variant en su lugar, por ejemplo con "operationVariant": "light_theme" o "different_layout".
Prompt para tu asistente de IA:
En mi archivo de Flowstep “Login flow”, cambia la pantalla de inicio de sesión a modo oscuro, añade una casilla “Remember me” debajo del campo de contraseña y añade una pantalla de recuperación de contraseña que coincida. Muéstrame los resultados.
4. Ampliar una pantalla a un flujo completo
Añade pantallas siguientes a un diseño existente.operationVariant: "error_state" o "empty_state" para añadir pantallas de casos límite, o con "web_version" o "tablet_version" para otras plataformas.
operationVariant es obligatorio para ai-generate-screen-variant, y la herramienta acepta exactamente un screenId. Para añadir una pantalla que no sea variante de una existente, usa ai-design-screens con un fileId.5. Pasa una pantalla a tu código y vuelve a escribir los cambios en el lienzo
Lee una pantalla como JSX, construye a partir de ella y envía tu JSX editado de vuelta al lienzo, todo sin usar mensajes.name, fidelity, screenType, colorTheme, fragments) conservan sus valores actuales. Para conservar el original y añadir tu versión junto a él, llama a add-screen-jsx con screenType y jsx en lugar de replace-screen-jsx.
Para mostrar una imagen propia en la pantalla, súbela con upload-attachment y pon el assetUrl devuelto en un img src de tu JSX. Consulta Imágenes en JSX.
6. Consulta tu asignación antes de un trabajo por lotes
Consulta la capacidad restante antes de iniciar varias generaciones.get-plan-details es gratuita.
remaining.messages.daily es bajo, programa el lote para después de las 00:00 UTC, cuando se restablece.