Flowstep genera pantallas de interfaz de usuario a partir de prompts en lenguaje natural, lo que te permite pasar de una idea a un diseño visual en segundos. Ya sea que necesites una sola pantalla para validar un concepto o un conjunto completo de pantallas que cubra un recorrido de usuario entero, basta con un prompt bien escrito para empezar.
Genera un diseño
1
Abre un proyecto nuevo
Desde tu panel de Flowstep, crea un proyecto nuevo o abre uno existente donde quieras añadir pantallas.
2
Escribe tu prompt
Escribe una descripción de la pantalla o las pantallas que quieres. Sé específico sobre el tipo de app, el objetivo del usuario y el contenido que esperas ver.
3
Especifica cuántas pantallas quieres
De forma predeterminada, Flowstep genera una sola pantalla. Si quieres varias, indícalo de forma explícita en tu prompt: Flowstep puede generar hasta 6 pantallas a partir de un solo prompt.
4
Genera
Envía tu prompt. Flowstep produce tus pantallas y las muestra en el editor, listas para revisar o refinar.
Cuando creas un archivo nuevo y envías su primer prompt, Flowstep le asigna un nombre basado en ese prompt, para que sea fácil de encontrar más adelante. Un archivo que ya tiene nombre, o que tiene prompts anteriores, conserva su nombre, y puedes cambiar el nombre de cualquier archivo tú mismo en cualquier momento.
Detén una generación
Mientras Flowstep responde, el botón de enviar se convierte en un botón de detener (Stop Flowstep response). Haz clic en él para detener la generación. En una solicitud de varias pantallas, las pantallas que ya terminaron permanecen en tu lienzo y las que no terminaron se eliminan. Detener la generación después de que Flowstep haya empezado a crear pantallas sigue consumiendo el mensaje. Consulta mensajes y límites.Una pantalla frente a varias pantallas
Puedes generar una pantalla o hasta 6 pantallas a partir de un solo prompt. Ambos enfoques son útiles en distintas etapas del trabajo de diseño.- Una pantalla: ideal para explorar un estado específico de la interfaz, un componente o un concepto concreto.
- Varias pantallas: ideal para mapear flujos, comparar opciones de disposición o cubrir un recorrido de usuario completo con rapidez.
Más formas de escribir prompts
El texto no es la única entrada. También puedes:- Adjuntar archivos: añade imágenes (JPG, PNG, WEBP) o documentos (PDF, MD, TXT) de hasta 3 MB cada uno al prompt, arrastrándolos, con el selector de archivos o pegándolos. Haz referencia a una imagen adjunta en tu prompt y Flowstep la incorpora en las pantallas generadas. Consulta Usar referencias.
- Dictar tu prompt: haz clic en el botón del micrófono en la barra de prompts (o pulsa Cmd+Shift+V en Mac, o Ctrl+Shift+V en Windows) y habla durante hasta 60 segundos. La transcripción se añade a lo que ya hayas escrito.
- Dejar que Flowstep investigue en la web: cuando tu prompt lo requiera (por ejemplo, “clona la página de precios de Stripe”), Flowstep puede buscar en la web y leer la identidad visual de una página (colores, tipografías, logotipo, componentes de la interfaz) y usarla en las pantallas generadas. Flowstep decide por sí mismo si debe investigar, así que no se activará necesariamente con cada prompt. Ten en cuenta que los sitios web recreados usan imágenes y navegación distintas a las del original.
- Definir directrices de diseño: define reglas de estilo permanentes que se apliquen a cada generación del archivo. Consulta Directrices de diseño.
Cómo escribir prompts eficaces
Ten en cuenta estos principios al escribir prompts:- Indica la plataforma (móvil, escritorio, tablet) para que Flowstep ajuste correctamente el tamaño de las pantallas.
- Describe el objetivo del usuario, no solo los elementos de la interfaz. Flowstep deduce la disposición a partir de la intención.
- Incluye el contenido clave, como etiquetas, acciones o datos, si son importantes para el diseño.
- Usa frases como “genera varias pantallas” o “cubre el recorrido completo del usuario” para activar una salida de varias pantallas.