En pocas palabras
Herramienta de IA para generar propuestas de pantallas, wireframes y flujos de experiencia.
Qué problema resuelve
Tiempo elevado para explorar alternativas visuales y comunicar recorridos iniciales.
Cuándo utilizarlo
Ideación y diseño temprano. Ejemplo: explorar variantes de un panel de operaciones.
De la idea a la práctica
Funcionamiento, ejemplos y decisiones para pasar al siguiente nivel.
En el Radar compartido: Trial (valoración de la edición aportada).
Cómo funciona
Transforma instrucciones y referencias en diseños que pueden refinarse en herramientas como Figma. Ayuda a generar variantes y conectar pantallas de un recorrido.
Ejemplo de uso
Describir tareas, roles y restricciones de una consola operativa; generar varias propuestas. Elegir elementos según comprensión y eficiencia observadas, no solo atractivo visual.
Qué produce
| Salida | Uso |
|---|---|
| Wireframes | Explorar estructura y jerarquía sin distracción visual |
| Diseños de alta fidelidad | Propuestas con estilo aplicado |
| Flujos de varias pantallas | Recorridos completos conectados |
| Exportación a Figma | Continuar el trabajo con el equipo de diseño |
| Código | HTML o componentes como punto de partida |
| Revisión de diseño | Comentarios heurísticos sobre una pantalla existente |
Funciona como aplicación web y como plugin de Figma.
Cuándo aporta más
- Fase divergente: generar muchas alternativas de layout en minutos antes de converger.
- Equipos sin diseñador dedicado que necesitan una base razonable para una herramienta interna.
- Workshops con negocio: materializar ideas durante la conversación para discutir sobre algo concreto.
Instrucciones que funcionan
Consola para analistas de riesgo que revisan solicitudes de crédito.
Usuarios expertos, pantalla de escritorio de 1440 px, uso intensivo durante horas.
Lista de solicitudes pendientes a la izquierda; detalle a la derecha con datos del
solicitante, resultado del buró y documentos. Acciones: aprobar, rechazar con motivo,
pedir más información. Incluir estados: sin pendientes, error al cargar el buró.
Indica perfil de usuario, densidad de información, dispositivo y estados; sin ellos, el resultado tiende a una landing genérica.
Evaluar las propuestas
Elige entre variantes con criterios explícitos: tiempo para completar una tarea en una prueba rápida, número de clics, legibilidad de los datos clave y encaje con el sistema de diseño. Compara con Figma Make (prototipos interactivos), v0 (código React) y AI Design Reviewer (revisión).
Criterios de implementación
Revisar accesibilidad, componentes existentes y estados vacíos o de error. Proteger materiales sensibles y validar la viabilidad técnica antes de pasar a implementación.
Continúa en las fuentes
Documentación oficial para verificar detalles y explorar más.