gabrielciprianoo/design-review

Revisão de Design (Refactoring UI)

O conhecimento reside em references/. Nunca carregue tudo. Siga a cadeia: SKILL.md → INDEX.md → apenas o(s) arquivo(s) necessário(s).

1. Classifique a solicitação

Tipo de tarefa	Sinais	Carregar
Correção de componente	"revisar estes cards / este formulário / a navbar"	references/components/INDEX.md → 1–2 components/<nome>.md
Auditoria de tela	"revisar esta página / tela / aplicativo"	references/principles/INDEX.md → hierarchy.md, layout-spacing.md, typography.md, color.md; adicione depth.md, images.md, finishing.md apenas se relevante
Redesign	"redesenhar / propor uma versão melhor"	Conjunto da auditoria de tela + personality.md + systems.md (+ process.md)
Polimento	"deixar com aparência mais polida / toques finais"	finishing.md, depth.md, images.md
Novo design	"projetar um … do zero"	process.md, personality.md, systems.md, depois arquivos de tópicos conforme necessário

Identifique também quais componentes estão na tela (veja as descrições em components/INDEX.md); para uma auditoria de tela, abra os arquivos de componente dos 1–2 componentes dominantes.

2. Capture a interface

Use o que estiver disponível, nesta ordem:

1. Ferramenta do navegador (Claude no Chrome, navegador integrado, Playwright MCP): abra a página, tire uma captura de tela, então execute scripts/measure_styles.js com a execução JavaScript da ferramenta. Para delimitar uma região, primeiro execute window.__DR_ROOT = '<seletor_css>'.
2. Shell + Playwright (Claude Code): python3 scripts/capture.py <url|arquivo> [--selector ".card"] [--out dir] → captura de tela, captura em escala de cinza, measurements.json.
3. Apenas captura de tela: apenas verificações visuais; informe que as medições não estavam disponíveis.
4. Apenas código: leia o CSS/marcação e calcule os mesmos sinais manualmente.

Sempre execute o teste de escala de cinza (PRO-03): visualize uma versão dessaturada (capture.py gera uma; em uma ferramenta de navegador aplique document.documentElement.style.filter='grayscale(1)', tire uma captura, depois remova).

3. Analise

• Mapeie cada achado para um ID de princípio. Use as medições como evidência (as chaves de measurements.json referenciam IDs nos comentários de measure_styles.js).
• Verifique nesta ordem de impacto: hierarquia → espaçamento/layout → tipografia → cor/contraste → profundidade → imagens → acabamento.
• As medições são dicas, não veredictos: confirme cada uma na captura de tela antes de relatá-la.
• Respeite a marca/personalidade existente, a menos que seja solicitado a alterá-la (PER-*). Para redesigns, declare primeiro a personalidade alvo.
• Princípios de [process] guiam redesigns; não os relate como defeitos em uma auditoria.

4. Entregue

A. Achados — classificados por impacto, máximo ~10, cada um como: [ID] Problema — evidência (valor medido ou o que está visível) → correção (valores concretos das escalas do livro)

B. Design corrigido — a menos que o usuário queira apenas a crítica:

• Reconstrua a tela/componente como uma página HTML/CSS autocontida aplicando as correções, usando as escalas dos arquivos de princípios (espaçamento 4/8/12/16/24/32/48/64…, tipo 12/14/16/18/20/24/30/36/48…, sombras de 5 níveis, tons de cor 100–900). Mostre o antes (captura de tela) e o depois lado a lado quando possível.
• Ou, se o usuário quiser alterações no código, forneça um patch de CSS/marcação.

C. Resumo do sistema (redesigns) — a escala tipográfica, escala de espaçamento, paleta (cinzas + primária + destaques em HSL) e sombras utilizadas, para que a equipe possa adotá-las.

Regras

• Cite IDs; nunca invente princípios além das referências. Se algo não for coberto, diga que está fora do livro.
• Prefira poucas alterações de alto impacto em vez de listas longas.
• Não copie o texto do livro; as referências são resumos parafraseados.

Manutenção

Os arquivos de princípios são a fonte da verdade. Após editá-los, regenere índices e arquivos de componente: python3 tools/build_indexes.py skills/design-review (o script reside no repositório de origem em tools/, não na habilidade instalada).