Wireframes
Bienvenida
El área de Wireframes te permite diseñar y prototipar tus diseños de interfaz de forma visual. Crea wireframes para planificar la estructura de tu aplicación antes de programar. Cuando abras Wireframes por primera vez, verás la pantalla de bienvenida con una tarjeta Crear Wireframe para comenzar, o usa el botón + Nuevo Wireframe en la esquina superior derecha.
Características Principales
Diseño Manual
Construye wireframes a mano usando el editor de lienzo visual — arrastra y suelta componentes para diseñar tus pantallas.
Generación con IA
Describe lo que quieres y deja que la IA genere documentación y marcos de wireframe automáticamente.
Entrada de Voz
Usa el botón de micrófono integrado o el clic central para dictar la descripción de tu wireframe con voz.
De Wireframe a Código
Una vez que tu wireframe está listo, envíalo directamente a la generación de código — pasando del diseño al código funcional en un flujo de trabajo continuo.
Crear un Wireframe
Haz clic en Crear Wireframe o + Nuevo Wireframe para abrir el diálogo de creación. Ingresarás un título, seleccionarás la plataforma objetivo (Móvil, Escritorio o Web), escribirás una descripción de tu wireframe y elegirás entre el modo Manual o Con IA.
Campos de Configuración del Proyecto
Título
Dale un nombre a tu proyecto de wireframe para poder identificarlo después en la lista de wireframes.
Plataforma
Selecciona la plataforma objetivo — Móvil, Escritorio o Web — para adaptar el diseño y las restricciones del wireframe.
Descripción
Describe lo que quieres construir. Esto lo utiliza el modo con IA para generar documentación y marcos. Admite entrada de voz a través del botón de micrófono.
Modo
Elige Manual para ir directamente al editor de lienzo, o Con IA para que la IA genere documentación y marcos por ti.
Modo Manual
Cuando seleccionas la pestaña Manual y haces clic en Crear, serás llevado directamente al editor de lienzo de wireframes donde puedes empezar a construir tus pantallas de inmediato. Esta es la mejor opción cuando ya tienes una idea clara de tu diseño y quieres control total desde el principio.
Cuándo Usar Manual
Tienes un diseño específico en mente y quieres construirlo tú mismo.
Quieres esbozar rápidamente un diseño preliminar antes de refinarlo.
Prefieres control total sobre cada elemento desde el principio.
Modo con IA
Cuando seleccionas la pestaña Con IA, aparecen opciones adicionales. Puedes escribir o dictar tu descripción, opcionalmente definir marcos individuales, seleccionar tu modelo de IA preferido del menú desplegable en la parte superior y luego hacer clic en Generar para que la IA cree la documentación del wireframe por ti.
Cómo Funciona
Ingresar detalles
Completa el título, selecciona una plataforma y escribe una descripción de tu proyecto.
Definir marcos (Opcional)
Cambia a la pestaña Definir marcos para especificar pantallas o vistas individuales que deseas que la IA genere.
Seleccionar modelo de IA
Elige tu modelo de IA preferido del menú desplegable (p. ej., Claude Code, Opus 4.6).
Generar
Haz clic en Generar para iniciar la generación de documentación con IA. El proyecto de wireframe aparecerá en tu lista mientras se crea la documentación.
Construir marcos
Una vez que la documentación esté completa, puedes comenzar a generar cada marco individual desde el editor de wireframes.
Mejorar con IA
En el modo Con IA, al hacer clic en el botón Mejorar con IA se abre un diálogo que te permite mejorar tu descripción usando IA. Esto toma lo que hayas escrito en el campo de descripción y lo mejora según tus instrucciones — haciéndolo más detallado, estructurado o completo antes de generar el wireframe.
Opciones de Mejora
Modelo de IA
Selecciona el modelo de IA a usar para mejorar tu descripción (por ejemplo, Claude Code, Opus 4.6).
Instrucciones de Mejora
Opcionalmente proporciona instrucciones específicas sobre cómo la IA debe mejorar la descripción. Admite entrada de voz.
Mejorar Descripción
Haz clic para ejecutar la mejora. La IA reescribirá y mejorará tu descripción basándose en tu entrada e instrucciones.
Generación de Documentación
Después de hacer clic en Generar en el modo Con IA, tu proyecto de wireframe aparece en la lista de wireframes con un estado de Generando Documentación.... La IA está creando documentación estructurada para tu proyecto basándose en el título, la plataforma, la descripción y los marcos que hayas definido.
Qué Sucede Después
Generación de documentación
La IA crea un documento estructurado que define cada pantalla, componente y diseño basándose en tu descripción.
Generación de marcos
Una vez que la documentación esté completa, puedes abrir el wireframe y comenzar a generar cada marco individual desde el editor.
Refinamiento
Después de que los marcos se generen, puedes ajustar, agregar o eliminar componentes manualmente en el editor de lienzo para afinar el diseño.