Design Analyzer

Design Analyzer

Analisa paginas web reais via browser MCP e extrai documentacao tecnica completa de design.

Workflow

1. Acessar a pagina via Browser MCP

Usar um dos MCPs de browser disponiveis (prioridade):

1. Playwright MCP (browser_navigate + browser_take_screenshot + browser_evaluate)
2. Claude in Chrome (navigate + get_page_text + javascript_tool)

# Playwright
browser_navigate -> URL
browser_take_screenshot -> full-page screenshot
browser_evaluate -> injetar scripts de extracao

# Claude in Chrome
navigate -> URL
javascript_tool -> injetar scripts de extracao

2. Capturar screenshots

Salvar em docs/design-analysis/screenshots/:

• full-page.png - pagina completa
• navbar.png, hero.png, footer.png, etc. - componentes isolados

3. Extrair design tokens

Injetar scripts/extract-styles.js via browser MCP para extrair automaticamente:

• Cores (com conversao RGB -> HEX)
• Tipografia (font-family, size, weight, line-height, letter-spacing)
• Bordas e sombras
• CSS custom properties (variaveis :root)
• Classes Tailwind detectadas
• Animacoes e transicoes

4. Mapear componentes

Injetar scripts/extract-components.js para detectar e medir:

• Navbar, sidebar, hero, cards, CTAs, footer, modais, forms, tabelas, badges
• Dimensoes (width, height, position)
• Estilos computados de cada componente
• Breakpoints responsivos detectados nas media queries

5. Gerar documentacao

Criar a estrutura em docs/design-analysis/:

docs/design-analysis/
  README.md
  design-tokens.md
  wireframe.md
  implementation-guide.md
  components/
    navbar.md
    hero.md
    cards.md
    footer.md
    [componente].md
  screenshots/
    full-page.png
    [componente].png

Consultar references/output-templates.md para formato exato de cada arquivo.

Regras

• SEMPRE acessar a pagina real via browser MCP. Nunca inventar valores de design
• Extrair valores exatos em px/rem. Nunca usar termos vagos como "espacamento grande"
• Incluir snippets prontos em Tailwind CSS E CSS puro no implementation-guide.md
• Se a pagina usa Tailwind, extrair as classes diretamente do DOM
• Documentar estados (hover, active, focus, disabled) quando detectados
• Registrar breakpoints responsivos observados
• Para animacoes: documentar propriedade, duracao, easing, delay
• Analisar CSS custom properties (:root) e incluir no design-tokens.md

Extracao via JavaScript

Os scripts em scripts/ fazem a extracao automatica. Para dados adicionais, injetar JS customizado:

// Extrair computed style de um elemento especifico
JSON.stringify((() => {
  const el = document.querySelector('.seletor');
  const cs = getComputedStyle(el);
  return { bg: cs.backgroundColor, color: cs.color, padding: cs.padding, font: cs.font };
})());

// Extrair todas as fontes carregadas
JSON.stringify([...document.fonts].map(f => ({ family: f.family, weight: f.weight, style: f.style, status: f.status })));

// Extrair icones (SVGs inline)
document.querySelectorAll('svg').length + ' SVGs encontrados';