En pocas palabras
Herramienta de Vercel para generar e iterar interfaces y aplicaciones mediante instrucciones y referencias visuales.
Qué problema resuelve
Esfuerzo inicial para convertir una idea de interfaz en una experiencia demostrable.
Cuándo utilizarlo
Prototipos y exploración frontend. Ejemplo: preparar un dashboard con datos simulados.
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
Combina conversación y generación de código para construir pantallas y refinar diseño e interacción. El alcance depende de las capacidades y servicios configurados.
Ejemplo de uso
Especificar un panel de cartera con filtros, estados vacíos y versión móvil. Usar datos ficticios, probar tareas de usuarios y revisar después su integración con las APIs reales.
Flujo de trabajo típico
- Instrucción inicial: describe usuarios, tarea, datos y restricciones visuales («tabla de créditos en mora con filtros por país y días de atraso, modo oscuro, componentes shadcn/ui»).
- Referencias: adjunta capturas, bocetos o un archivo de Figma para orientar la composición.
- Iteración: pide cambios concretos sobre la versión generada o selecciona un elemento para modificarlo.
- Exportación: descarga el código, conéctalo a un repositorio de GitHub o despliega en Vercel.
El código generado suele basarse en React, Next.js, Tailwind CSS y shadcn/ui, lo que facilita integrarlo en proyectos con ese stack.
Cómo escribir buenas instrucciones
| En vez de | Mejor |
|---|---|
| «Un dashboard de créditos» | «Dashboard para analistas de cobranza: KPIs de mora 30/60/90, tabla paginada, filtro por país» |
| «Que se vea moderno» | «Densidad alta, tipografía de 14 px, sin sombras, colores de estado accesibles» |
| «Añade validación» | «Valida que el monto esté entre 100 000 y 50 000 000 y muestra el error bajo el campo» |
Incluye siempre estados vacíos, de carga y de error; los generadores tienden a diseñar solo el caso feliz.
Del prototipo al producto
| Aspecto | Qué revisar antes de reutilizar el código |
|---|---|
| Arquitectura | Separación de datos, estado y presentación; encaje con tu estructura |
| Accesibilidad | Roles, foco, contraste, etiquetas; pasar axe-core |
| Seguridad | Ninguna clave en el cliente; validación también en el servidor |
| Dependencias | Versiones, licencias y librerías añadidas sin necesidad |
| Diseño | Uso de tokens y componentes del sistema de diseño propio |
Alternativas
Figma Make, UX Pilot, Bolt o Lovable cubren necesidades parecidas. La técnica general está en self-serve UI prototyping with GenAI.
Criterios de implementación
Validar accesibilidad, seguridad y rendimiento. Acordar qué se reutiliza y qué se reimplementa; un prototipo funcional no demuestra calidad operativa ni mantenibilidad.
Continúa en las fuentes
Documentación oficial para verificar detalles y explorar más.