Website Analyzer

Website Analyzer MCP

Transforme qualquer site em um sistema de design reutilizável.

Faça engenharia reversa de páginas ao vivo em tokens de design estruturados e documentação que seu agente de codificação de IA pode usar — cores, tipografia, espaçamento, componentes, layout e comportamento responsivo.

Construído com MCP · Playwright · TypeScript

Gratuito e de código aberto. Este servidor não chama APIs de LLM pagas. Ele retorna JSON estruturado (e markdown de modelo opcional) para seu próprio cliente Claude / Cursor / VS Code / Gemini / Ollama.

---

Por que isso existe

Agentes de IA são ótimos para escrever UI — mas geralmente adivinham sistemas de design. O Website Analyzer MCP inspeciona uma página real e entrega ao seu agente:

• Tokens de design (cor, tipo, espaçamento, raio, sombra)
• Sinais de componentes e layout
• Análise responsiva de viewport + capturas de tela
• Documentação markdown determinística (design.md, rule.md, …)

Use para clonar um visual, auditar um site ou iniciar um sistema de design a partir da produção.

Recursos

• Inspeção de página (DOM, landmarks, cabeçalhos, links, formulários)
• Extração de cor / tipografia / espaçamento
• Detecção de raio de borda e sombra
• Sinais de layout e componentes
• Análise responsiva (mobile / tablet / desktop)
• Captura de tela (até 5 viewports)
• Tokens de sistema de design como JSON estruturado
• Documentação markdown determinística
• Proteção SSRF + respeito opcional ao robots.txt

Início rápido (usuários finais)

Você não precisa clonar este repositório — o pacote está no npm.

1. Instale o Chromium do Playwright uma vez:
   npx playwright install chromium
2. Adicione o servidor MCP na configuração do seu cliente.

Cursor (Settings → MCP ou ~/.cursor/mcp.json):

{ "mcpServers": { "website-analyzer": { "command": "npx", "args": ["-y", "website-analyzer-mcp"] } } }

Claude Desktop (claude_desktop_config.json):

1. Reinicie o IDE / recarregue o MCP.
2. Pergunte:

Analyze https://example.com and create design.md

npx -y baixa o pacote do npm automaticamente.

Clientes suportados

Claude Code · Cursor · VS Code · Claude Desktop · qualquer cliente compatível com MCP

Ferramentas

Ferramenta	O que faz
inspect_page	JSON estruturado de DOM / página
capture_screenshot	PNGs de viewport (mobile / tablet / desktop, até 5 larguras)
analyze_design	Cores, tipo, espaçamento, raio, sombras, layout, componentes → JSON
analyze_responsive	Análise de breakpoint / media-query (+ capturas de tela opcionais)
generate_docs	Escreve design.md, rule.md, component.md, layout.md, content.md, README.md

Prompts sugeridos

Analyze https://example.com

Create:
- design.md
- rule.md
- component.md
- layout.md
- README.md

Fluxo preferido

1. inspect_page / analyze_design / analyze_responsive → JSON para o LLM
2. ou generate_docs → arquivos determinísticos em docs/<host>/

Configuração

Copie .env.example ou defina variáveis de ambiente:

Variável	Padrão	Descrição
MAX_PAGES	20	Limite de páginas rastreadas (crawl multi-página planejado)
REQUEST_TIMEOUT	30000	Tempo limite de navegação (ms)
MAX_DEPTH	2	Profundidade de rastreamento (planejado)
SCREENSHOT	true	Capturar capturas de tela em generate_docs
MOBILE_VIEW / TABLET_VIEW / DESKTOP_VIEW	true	Quais faixas de viewport amostrar
USER_AGENT	WebsiteAnalyzerMCP/1.0	User agent da requisição
RESPECT_ROBOTS_TXT	true	Respeitar Disallow do robots.txt
MAX_RESPONSE_SIZE	5000000	Tamanho máximo do corpo da resposta (bytes)
WEBSITE_ANALYZER_OUTPUT	package output/	Substituir raiz de capturas de tela / saída

Exemplo com env no Cursor:

{ "mcpServers": { "website-analyzer": { "command": "npx", "args": ["-y", "website-analyzer-mcp"], "env": { "REQUEST_TIMEOUT": "45000", "RESPECT_ROBOTS_TXT": "true" } } } }

Desenvolver a partir do código-fonte

git clone https://github.com/bigy2012/website-analyzer.git cd website-analyzer npm install npx playwright install chromium npm run build

Aponte seu cliente MCP para o entrypoint compilado:

{ "mcpServers": { "website-analyzer": { "command": "node", "args": ["/absolute/path/to/website-analyzer/dist/index.js"] } } }

Scripts

npm run typecheck npm test npm run smoke npm run build npm run demo:gif # regenera assets/demo.gif

Docker

docker compose build docker compose run --rm website-analyzer-mcp

Imagens publicadas (em releases com tag): ghcr.io/<owner>/website-analyzer

Segurança

• Bloqueia alvos SSRF de localhost / IP privado / link-local / metadados de nuvem
• Aplicação opcional de robots.txt (RESPECT_ROBOTS_TXT=true)
• Timeouts e limites de tamanho via env

Uso responsável

O Website Analyzer MCP é apenas para análise legítima de sites — por exemplo, aprender padrões de layout, auditar seus próprios sites ou extrair sinais estruturados que seu agente de IA possa raciocinar.

Usar esta ferramenta não concede permissão para copiar ou reutilizar o design, conteúdo, imagens, logotipos ou outros ativos de outro site sem autorização.

Por favor, respeite:

Copyright	Design, texto, mídia e marca permanecem propriedade de seus detentores de direitos
Termos de Serviço	Siga os Termos de Serviço e as regras de uso aceitável de cada site
robots.txt	Respeite as diretrizes de rastreamento (RESPECT_ROBOTS_TXT=true por padrão)
Limites de taxa	Não sobrecarregue nem faça scraping agressivo
Privacidade	Não colete nem use indevidamente dados pessoais
Leis aplicáveis	Incluindo leis de direitos autorais, marcas registradas e acesso a computadores em sua jurisdição

Você é responsável por como usa a saída da análise. Em caso de dúvida, analise sites que você possui ou tem permissão para estudar e obtenha aconselhamento jurídico para reutilização comercial.

Limitações (v0.1)

• URL única / página única (crawler multi-página planejado)
• Os documentos de modelo são heurísticas determinísticas, não prosa escrita por LLM
• Folhas de estilo de origem cruzada podem estar incompletas

Lançamento

CI/CD vive em .github/workflows/:

• ci.yml — typecheck, build e teste em PR/push
• release.yml — em tags v*, publica para npm, GHCR e GitHub Releases

Guia de configuração: docs/RELEASE.md

Contribuindo

Issues e PRs são bem-vindos. Por favor, mantenha as mudanças focadas, adicione/ajuste testes ao tocar em segurança ou analisadores e execute npm run typecheck && npm test antes de abrir um PR.

Licença

MIT