Revisão de Design StyleSeed

Visão Geral

Uma interface de usuário é lida como "gerada por IA" não porque os componentes são feios, mas porque as partes não concordam entre si — raios de canto misturados, três cores de destaque, texto preto puro, sem hierarquia, estados ausentes, cópia robótica. Esta habilidade revisa um arquivo de design (ou um diretório inteiro) contra uma rubrica de design concreta, pontua de 0 a 100 e retorna uma lista de correções priorizadas. Ela revisa e recomenda; nunca edita ou exclui sem que você peça.

Conjunto completo de regras (74 regras) e componentes: https://github.com/bitjaru/styleseed

Quando usar

• Uma UI React / Tailwind / HTML "parece estranha", genérica ou inacabada e você não consegue dizer por quê.
• Você quer uma pontuação de design / verificação pré-envio.
• O usuário pede para tornar a UI "profissional / polida / bem desenhada, não gerada por IA".
• Após gerar a UI, para verificá-la antes de enviar.

Como revisar

Leia o(s) arquivo(s). Pontue estas sete categorias (total 100); comece cada uma com a pontuação máxima e subtraia por violações que você possa citar por linha. Seja específico e baseado em evidências.

1. Coerência — 20 (o principal indicador de "gerado por IA")

Uma escolha por eixo, aplicada em todos os lugares. Deduzir por cada eixo misturado:

• raios de canto misturados — por exemplo, um card com cantos retos e botões arredondados (−6)
• duas ou mais cores de destaque usadas para ênfase (−5)
• emojis usados como ícones de UI (🚗🧺⭐ como marcadores de lista/navegação/status/categoria) — injeta muitas tonalidades descontroladas; use um conjunto de ícones de linha em currentColor (−6)
• linguagens de sombra misturadas / direções de luz misturadas (−3)
• famílias de ícones misturadas, modos de preenchimento ou pesos de traço (−3)
• alturas de controle inconsistentes (botões/inputs diferentes) (−3)

2. Disciplina de cores — 16

• texto preto puro (#000 / text-black) — o preto refinado é ~`#2A2A2A` (−4 cada, limite de −8)
• hex codificado diretamente onde um token semântico existe (−2 cada, limite de −6)
• um estado normal / OK / padrão ("보통") mostrado em uma cor de status em vez de cinza neutro (−4)
• cor de status na maioria/todas as linhas (sem hierarquia de gravidade — a cor deve marcar a minoria que precisa de atenção) (−4)
• tons decorativos — estrelas douradas, pontos de categoria arco-íris, uma cor diferente por card — em vez de destaque/cinza (−3)
• status transmitido apenas por cor, sem ícone/texto (−4)
• contraste abaixo do WCAG AA (4.5:1 para corpo, 3:1 para texto grande/UI) (−6)

3. Hierarquia e tipografia — 16

• número e sua unidade não estão em ~2:1 (número de 48px / unidade de 24px) (−4)
• tudo do mesmo tamanho e peso, sem primário claro (−5)
• tamanhos de fonte arbitrários; sem escala (−4)
• altura de linha incorreta (muito espaçada para títulos, apertada para corpo) (−3)

4. Layout e espaçamento — 12

• conteúdo em um fundo de página simples, não em cards (−6)
• espaçamento fora da grade (7/13/19px em vez de uma escala de 8px) (−3)
• o espaço ao redor de um grupo não é maior que o espaço dentro dele (−3)
• o mesmo tipo de seção repetido em uma linha (−4)

5. Estados — 12

• estado vazio / carregando / erro ausente em uma superfície de dados (−5 cada, limite de −10)
• estado vazio sem próxima ação; erro que culpa em vez de ajudar (−4)

6. Redação UX — 12

• botões que não nomeiam a ação ("Enviar" / "OK" em vez de "Enviar R$ 2.400") (−4)
• cópia de erro que culpa ou usa linguagem de sistema ("Entrada inválida", "Ocorreu um erro") (−4)
• dois termos para um conceito (excluir vs remover); palavras de preenchimento ("por favor", "com sucesso") (−2)

7. Movimento e polimento — 12

• fades ad-hoc em vez de um sentimento consistente e nomeado (−3)
• movimento que atrasa o conteúdo ou bloqueia uma ação (−4)
• sem tratamento prefers-reduced-motion em movimento personalizado (−3)
• uma única sombra preta dura em vez de uma sombreada em camadas, de baixa opacidade e tingida (−2)

Limite cada categoria em 0; some para um total. Faixas: 90+ A · 80–89 B · 70–79 C · 60–69 D · <60 F.

Formato de saída

## Design Score: 72 / 100   (src/Dashboard.tsx)   C

Coherence            13/20   sharp cards (l.22) + pill buttons (l.48); 3 accent hues
Color discipline     12/16   #000 headings (l.12, 40)
Hierarchy & type     15/16   number/unit 1:1 on hero (l.18)
Layout & spacing     10/12   two identical KPI rows (l.22-31)
States                7/12   no empty/loading state on the orders list
UX writing            8/12   "Submit" button (l.55); "Invalid input" (l.61)
Motion & polish      10/12   one hard black shadow (l.22)

### Fix first (highest score gain)
1. Unify radius (pick soft 8–12px) + collapse to one accent   → +11 coherence/color
2. Add empty + loading states to the orders list              → +7  states
3. Rename "Submit" → "Send $2,400"; "Invalid input" → "Check the card number" → +6 copy

Re-score after: ~90 / 100.

Regras

…