Skip to main content
Flowstep genera pantallas de interfaz de usuario a partir de prompts en lenguaje natural, permitiéndote pasar de la idea al 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 redactado es todo lo que necesitas para empezar.

​
Genera un diseño

1

Abre un nuevo proyecto

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

Escribe tu prompt

Escribe una descripción de la pantalla o las 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 deseas

Por defecto, Flowstep genera una única pantalla. Si deseas varias pantallas, indícalo 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.
Cuando creas un nuevo archivo y envías su primer prompt, Flowstep nombra el archivo automáticamente según ese prompt, por lo que es fácil encontrarlo después. Un archivo que ya tiene un nombre — o prompts anteriores — mantiene su nombre, y puedes renombrar cualquier archivo tú mismo en cualquier momento.

​
Pantalla única vs. múltiples pantallas

Puedes generar una pantalla o hasta 6 pantallas a partir de un único prompt. Ambos enfoques se adaptan a diferentes etapas del trabajo de diseño.
  • Una pantalla — mejor para explorar un estado específico de la interfaz de usuario, componente o concepto enfocado.
  • Múltiples pantallas — mejor para mapear flujos, comparar opciones de diseño o cubrir un viaje de usuario completo rápidamente.
Cuando desees 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 típicamente devuelven una única pantalla. Las pantallas generadas se nombran Screen 1, Screen 2, y así sucesivamente — usa estos nombres para referirte a una pantalla específica en prompts posteriores.

​
Más formas de hacer prompts

El texto no es la única entrada. También puedes:
  • Adjuntar 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. Haz referencia a una imagen adjunta en tu prompt y Flowstep la incorpora en las pantallas generadas. Consulta Usar 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 durante hasta 60 segundos. La transcripción se añade a lo que ya hayas escrito.
  • Deja que Flowstep investigue 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 marca de una página — colores, fuentes, logo, componentes de la interfaz de usuario — y usarlo en las pantallas generadas. Flowstep decide por sí solo si debe investigar, por lo que no necesariamente se activará en cada prompt; ten en cuenta que los sitios web recreados utilizan imágenes y navegación diferentes que el original.
  • Establece directrices de diseño — define reglas de estilo permanentes que se apliquen a cada generación en el archivo. Consulta directrices de diseño.

​
Escribir prompts efectivos

Ejemplo de prompt de pantalla única: “Diseña una pantalla de inicio de sesión móvil para una aplicación de seguimiento de fitness 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 multi-pantalla: “Genera múltiples pantallas para un flujo de incorporación de aplicación de entrega de comida — cubre seleccionar preferencias de cocina, ingresar una dirección de entrega y confirmar el primer pedido.”
Ejemplo de prompt de viaje completo: “Cubre el viaje completo del usuario en una aplicación de informe de gastos, desde enviar un recibo hasta la aprobación del gerente.”
Ten en mente estos principios cuando escribas prompts:
  • Nombra la plataforma (móvil, escritorio, tablet) para que Flowstep ajuste correctamente el tamaño de las pantallas.
  • Describe el objetivo del usuario, no solo elementos de la interfaz de usuario — Flowstep deduce el diseño de la intención.
  • Incluye contenido clave como etiquetas, acciones o datos si importan para el diseño.
  • Usa frases como “generar múltiples pantallas” o “cubrir el viaje de usuario completo” para activar salida multi-pantalla.