Introducción

Vibr es una herramienta de prototipado para diseñadores. Describes una pantalla con tus propias palabras y un agente la planifica, la construye con el sistema de diseño que elijas, comprueba que se renderiza, la revisa en busca de problemas de accesibilidad y de diseño, y repara lo que encuentra. El resultado es código React real que puedes recorrer, revisar, anotar, enlazar en flujos y exportar.

Cómo funciona

1. Trae una clave. Vibr llama a Google Gemini, OpenAI, Anthropic u OpenRouter con tu propia clave de API. La clave se queda en tu navegador.
2. Elige un sistema de diseño. Material UI, Ant Design, Fluent UI, Mantine, Shoelace, Octuple o cualquier paquete de npm.
3. Describe una pantalla. Vibr muestra cada paso mientras trabaja, y el lienzo dibuja la pantalla mientras se escribe.
4. Sigue adelante. Pide cambios, señala un elemento para cambiar solo esa parte, compara versiones, fija comentarios y guarda en tu biblioteca.

Qué lo hace diferente

• Componentes reales, no imitaciones. Los borradores importan del paquete real del sistema de diseño, así que lo que ves es lo que entregaría un ingeniero.
• Revisa su propio trabajo. Cada borrador se renderiza y luego se revisa en anchos de escritorio, tableta y móvil con comprobaciones automáticas de accesibilidad antes de que lo veas.
• Tu biblioteca va contigo. Las imágenes, los vídeos, los temas de color, las escalas tipográficas y los iconos que añadas se pueden incluir en cualquier petición con una mención @.
• Sin cuenta ni servidor. Todo se ejecuta en tu navegador. Consulta Claves, privacidad y almacenamiento.

Siguientes pasos

• ¿Eres nuevo? Empieza por Primeros pasos.
• ¿Quieres mejores resultados? Lee Escribir peticiones.
• ¿Te preguntas qué significan los pasos? Consulta Cómo funciona una ejecución.
• ¿Algo ha salido mal? Revisa Solución de problemas.