Pontuação de Design

Quando Usar

Use esta habilidade quando precisar pontuar a qualidade do design de um arquivo de UI de 0 a 100 em relação à linguagem de design do StyleSeed — detalhamento por categoria, os piores infratores e uma lista de correções priorizadas. Uma versão quantificada de /ss-review.

/ss-review diz o que está errado. /ss-score diz quão bom é no geral e o que corrigir primeiro — um único número mais um detalhamento por categoria, para que você possa acompanhar a qualidade da UI como acompanha a cobertura de testes.

Quando NÃO Usar

• Para uma aprovação/rejeição rápida antes de confirmar → use /ss-lint
• Para uma auditoria completa em prosa com correções → use /ss-review
• Para arquivos que não são de UI (lógica, configuração) — a pontuação é sem sentido

O Que Pontuar

Pontue o arquivo (ou cada arquivo em um diretório) em seis categorias ponderadas que se mapeiam para a linguagem de design. Total = 100.

Como Pontuar Cada Categoria

Para cada categoria, comece com a pontuação máxima e subtraia por violações que você encontrar ao ler o código. Seja específico e baseado em evidências — cite a linha.

Disciplina de Cores (20) — deduzir por: qualquer #000/text-black (−4 cada, limite de −8); mais de uma cor de destaque usada decorativamente (−5); emojis usados como ícones de UI (multicoloridos, quebram o acento único) (−5); um estado normal/OK/"보통" mostrado em uma cor de status em vez de cinza neutro (−4); cor de status na maioria/todas as linhas (sem hierarquia de severidade) (−4); cores decorativas (estrelas douradas, pontos de categoria arco-íris) em vez de acento/cinza (−3); hex hardcoded onde um token semântico existe (−2 cada, limite de −6); status transmitido apenas por cor (−4).

Hierarquia e Tipografia (20) — deduzir por: número/unidade não ~2:1 (−4); tamanhos de fonte fora da Tabela de Tamanhos de Fonte / text-[var(--…)] para tamanho (−5); tudo com o mesmo peso, sem primário claro (−5); altura de linha apertada ou errada no corpo (−3).

Layout e Ritmo (15) — deduzir por: conteúdo em fundo nu, não em cards (−6); px-4/px-8/mx-4 em vez de px-6/mx-6 (−3); mesmo tipo de seção repetido em uma linha (−4); sem ritmo space-y-6 (−3).

Cards e Elevação (15) — deduzir por: bordas de 1px fazendo trabalho de separação que tom+sombra deveriam fazer (−4); sombras com opacidade acima de ~8% / visivelmente pesadas (−4); sem separação de tom de card/fundo (−5).

Estados e Acessibilidade (a11y) (20) — deduzir por: estado vazio/carregando/erro ausente em uma superfície de dados (−5 cada, limite de −10); contraste abaixo de 4.5:1 corpo / 3:1 grande (−6); alvo de toque < 44px (−4); sem foco visível / outline:none (−5); controle apenas com ícone sem aria-label (−3).

Movimento e Interação (8) — deduzir por: fades aleatórios/ad-hoc em vez de uma seed/palavra-chave nomeada (−3); movimento que atrasa o conteúdo ou bloqueia uma ação (−4); sem tratamento prefers-reduced-motion em movimento personalizado (−3); scroll-linked/parallax (proibido, §59) (−5).

Coerência (12) — as leis "uma escolha por eixo" (VISUAL-CRAFT §C0). Deduzir por cada eixo que está misturado em vez de unificado em todo o arquivo: personalidades de raio misturadas, por exemplo, painel afiado + botões pill (−5); duas ou mais cores de destaque competindo usadas para ênfase (−4); linguagens de sombra misturadas / direções de luz (−3); famílias de ícones misturadas, modos de preenchimento ou pesos de traço (−3); mesmo raio em um elemento aninhado em vez de inner = outer − padding (−2); alturas de controle inconsistentes para botões/entradas (−2). Esta é a categoria que mais prevê "parece gerado por IA" — pondere evidências de consistência em todo o sistema, não beleza por componente.

Limitar cada categoria em 0. Somar para um total.

Formato de Saída

## Pontuação de Design: 70 / 100   (src/app/Dashboard.tsx)

████████████████░░░░░░  C-

Disciplina de Cores      13/18   ▓▓▓░  #000 títulos (l.12,40); acentos laranja+azul+verde (l.28-34)
Hierarquia e Tipografia 15/18  ▓▓▓▓  número/unidade 1:1 no herói (l.18)
Layout e Ritmo        11/14  ▓▓▓░  duas linhas de KPI idênticas (l.22-31)
Cards e Elevação       8/12  ▓▓░░  bordas de 1px fazendo separação (l.22)
Estados e Acessibilidade 11/18  ▓▓░░  sem estado vazio/carregando; anel de foco ausente (l.55)
Movimento e Interação    6/8   ▓▓▓░  fade padrão, não uma seed nomeada

…