jomvick/design-oracle

¿Qué es?

Funciones clave

• 01Captura de páginas completas con Playwright y Chromium.
• 02Extrae colores, tipografía, espaciado y los cuadros delimitadores de los componentes.
• 03Exporta configuración de Tailwind v4, JSX de React, tokens de diseño en JSON e informes en Markdown.
• 04Progreso del análisis en tiempo real mediante SSE y pub/sub de Redis.
• 05Expone herramientas de análisis a agentes de IA mediante un servidor MCP.

Casos de uso

• Convertir los estilos de un sitio web existente en un tema de Tailwind para rediseñarlo.
• Generar componentes React básicos que reproduzcan la disposición de un sitio de referencia.
• Proporcionar a un agente de programación con IA un resumen estructurado del diseño de un sitio antes de crear la interfaz.
• Documentar el sistema de diseño de un sitio de la competencia o heredado en un informe Markdown.

Inicio rápido

1. 1

   Clona el repositorio y entra en el directorio

2. 2

   Copia el archivo env (opcional con Docker)

   cp .env.example .env
3. 3

   Inicia con Docker Compose y, después, abre http://localhost:3000

   docker compose up --build -d

Antes de usarlo

• !El análisis utiliza una única ventana gráfica de 1440×900; no se ha implementado el análisis en varios dispositivos.
• !Los sitios con protección avanzada contra bots pueden bloquear Playwright y quizá requieran resolver CAPTCHA o usar proxies de pago.
• !La detección de componentes se basa en heurísticas, no en modelos de ML o visión.
• !El almacenamiento SQLite es adecuado para uso local de un solo usuario, no para implementaciones multiinquilino.

Temas

Preguntas frecuentes

¿Qué es design-oracle?

Analiza cualquier sitio web con Playwright y exporta su sistema de diseño como configuración de Tailwind v4, componentes React, tokens de diseño o un informe DESIGN.md. Design Oracle recibe una URL, renderiza la página completa en Chromium con Playwright y extrae el sistema visual del sitio: colores, tipografía, espaciado, componentes como secciones hero, de precios, navegación y preguntas frecuentes, además de patrones de UX. Cada análisis se guarda con su captura de pantalla, una superposición de componentes y los datos JSON sin procesar.

¿design-oracle es gratuito? ¿Qué licencia tiene?

design-oracle es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.

¿design-oracle sigue mantenido?

Actualizado en los últimos 6 meses. El último commit de design-oracle fue el 9 ago 2026.

¿Para qué puedo usar design-oracle?

Convertir los estilos de un sitio web existente en un tema de Tailwind para rediseñarlo. Generar componentes React básicos que reproduzcan la disposición de un sitio de referencia. Proporcionar a un agente de programación con IA un resumen estructurado del diseño de un sitio antes de crear la interfaz. Documentar el sistema de diseño de un sitio de la competencia o heredado en un informe Markdown.

¿Cómo se instala design-oracle?

Clona el repositorio y entra en el directorio Copia el archivo env (opcional con Docker): cp .env.example .env Inicia con Docker Compose y, después, abre http://localhost:3000: docker compose up --build -d

¿Dónde consigo design-oracle?

El código fuente y las instrucciones de instalación están en GitHub: https://github.com/jomvick/design-oracle