jomvick/design-oracle

O que é?

Recursos principais

• 01Captura a página inteira com Playwright e Chromium.
• 02Extrai cores, tipografia, espaçamento e caixas delimitadoras dos componentes.
• 03Exporta configuração do Tailwind v4, JSX para React, tokens de design em JSON e relatórios em Markdown.
• 04Acompanha o progresso da análise em tempo real via SSE e pub/sub do Redis.
• 05Disponibiliza ferramentas de análise para agentes de IA por meio de um servidor MCP.

Casos de uso

• Transformar o estilo de um site existente em um tema Tailwind para uma reformulação.
• Gerar stubs de componentes React que reproduzam o layout de um site de referência.
• Fornecer a um agente de programação com IA um resumo estruturado do design de um site antes de criar a interface.
• Documentar o sistema de design de um concorrente ou de um site legado em um relatório Markdown.

Início rápido

1. 1

   Clone o repositório e acesse o diretório

2. 2

   Copie o arquivo env (opcional no Docker)

   cp .env.example .env
3. 3

   Inicie com Docker Compose e, em seguida, abra http://localhost:3000

   docker compose up --build -d

Antes de usar

• !A análise usa uma única janela de visualização de 1440×900; a análise em vários dispositivos não foi implementada.
• !Sites com proteção avançada contra bots podem bloquear o Playwright e talvez ainda exijam a resolução de CAPTCHA ou o uso de proxies pagos.
• !A detecção de componentes depende de heurísticas, não de modelos de ML ou visão computacional.
• !O armazenamento SQLite é adequado para uso local por um único usuário, não para implantações multi-tenant.

Tópicos

Perguntas frequentes

O que é design-oracle?

Analisa qualquer site com Playwright e exporta seu sistema de design como configuração do Tailwind v4, componentes React, tokens de design ou relatório DESIGN.md. O Design Oracle recebe uma URL, renderiza a página inteira no Chromium com Playwright e extrai o sistema visual do site: cores, tipografia, espaçamento, componentes como seções de hero, preços, navegação e FAQ, além de padrões de UX. Cada análise é salva com uma captura de tela, uma sobreposição dos componentes e dados JSON brutos.

design-oracle é gratuito? Qual é a licença?

design-oracle é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

design-oracle ainda é mantido?

Atualizado nos últimos 6 meses. O último commit de design-oracle foi em 9 de ago. de 2026.

Para que posso usar design-oracle?

Transformar o estilo de um site existente em um tema Tailwind para uma reformulação. Gerar stubs de componentes React que reproduzam o layout de um site de referência. Fornecer a um agente de programação com IA um resumo estruturado do design de um site antes de criar a interface. Documentar o sistema de design de um concorrente ou de um site legado em um relatório Markdown.

Como instalar design-oracle?

Clone o repositório e acesse o diretório Copie o arquivo env (opcional no Docker): cp .env.example .env Inicie com Docker Compose e, em seguida, abra http://localhost:3000: docker compose up --build -d

Onde consigo design-oracle?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/jomvick/design-oracle