Skip to main content
Flowstep genera pantallas de UI a partir de prompts en lenguaje natural, permitiéndote pasar de una idea a un diseño visual en segundos. Ya sea que necesites una única pantalla para validar un concepto o un conjunto completo de pantallas que cubra un viaje de usuario completo, un prompt bien escrito es todo lo que necesitas para comenzar.

​
Generar un diseño

1

Abre un nuevo proyecto

Desde tu panel de control de Flowstep, crea un nuevo proyecto o abre uno existente donde desees agregar pantallas.
2

Escribe tu prompt

Escribe una descripción de la pantalla o pantallas que deseas. Sé específico sobre el tipo de aplicación, el objetivo del usuario y el contenido que esperas ver.
3

Especifica cuántas pantallas quieres

Por defecto, Flowstep genera una única pantalla. Si quieres múltiples pantallas, dilo explícitamente en tu prompt — Flowstep puede generar hasta 6 pantallas a partir de un único prompt.
4

Genera

Envía tu prompt. Flowstep produce tus pantallas y las muestra en el editor, listas para revisar o refinar.

​
Una pantalla única vs. múltiples pantallas

Puedes generar ya sea una pantalla o hasta 6 pantallas a partir de un único prompt. Ambos enfoques se adaptan a diferentes fases del trabajo de diseño.
  • Una pantalla — mejor para explorar un estado de UI específico, un componente o un concepto enfocado.
  • Múltiples pantallas — mejor para mapear flujos, comparar opciones de diseño o cubrir un viaje de usuario completo rápidamente.
Cuando quieras múltiples pantallas, sé explícito en tu prompt. Flowstep usa la redacción de tu prompt para decidir cuántas pantallas producir, por lo que los prompts vagos normalmente devuelven una única pantalla. Las pantallas generadas se denominan Screen 1, Screen 2, y así sucesivamente — usa estos nombres para referirte a una pantalla específica en prompts de seguimiento.

​
Más formas de usar prompts

El texto no es la única entrada. También puedes:
  • Adjunta archivos — agrega imágenes (JPG, PNG, WEBP) o documentos (PDF, MD, TXT) de hasta 3 MB cada uno al prompt, mediante arrastrar y soltar, el selector de archivos, o pegando. Referencia una imagen adjunta en tu prompt y Flowstep la incorpora a las pantallas generadas. Consulta Usa Referencias.
  • Dicta tu prompt — haz clic en el botón de micrófono en la barra de prompts (o presiona Cmd+Shift+V en Mac, Ctrl+Shift+V en Windows) y habla hasta 60 segundos. La transcripción se añade a lo que ya has escrito.
  • Permite que Flowstep investigue la web — cuando tu prompt lo requiere (por ejemplo, “clona la página de precios de Stripe”), Flowstep puede buscar en la web y leer la marca de una página — colores, fuentes, logo, componentes de UI — y usarla en las pantallas generadas. Flowstep decide por su cuenta si investigar o no, por lo que no necesariamente se activará en cada prompt; ten en cuenta que los sitios web recreados usan imágenes y navegación diferentes a los originales.
  • Establece directrices de diseño — define reglas de estilo permanentes que se aplican a cada generación en el archivo. Consulta Directrices de Diseño.

​
Cómo escribir prompts efectivos

Ejemplo de prompt de una pantalla: “Diseña una pantalla de inicio de sesión móvil para una aplicación de seguimiento de actividad física con campos de correo electrónico y contraseña, un botón de inicio de sesión y un enlace de contraseña olvidada.”
Ejemplo de prompt de múltiples pantallas: “Genera múltiples pantallas para un flujo de incorporación de aplicación de entrega de comida — cubre la selección de preferencias de cocina, ingreso de dirección de entrega y confirmación del primer pedido.”
Ejemplo de prompt de viaje completo: “Cubre el viaje de usuario completo en una aplicación de reporte de gastos, desde enviar un recibo hasta la aprobación del gerente.”
Ten en mente estos principios al escribir prompts:
  • Nombra la plataforma (móvil, escritorio, tableta) para que Flowstep dimensione las pantallas correctamente.
  • Describe el objetivo del usuario, no solo elementos de UI — Flowstep infiere el diseño a partir de la intención.
  • Incluye contenido clave como etiquetas, acciones o datos si son importantes para el diseño.
  • Usa frases como “generar múltiples pantallas” o “cubrir el viaje de usuario completo” para activar la salida de múltiples pantallas.