Design Tally
Um passe de contagem, não um guia de gosto. Outras skills anti-slop enunciam princípios; princípios são contornados uma justificativa de cada vez. Esta skill torna o contorno visível ao forçar uma contagem.
Por que isso existe
Uma falha real da qual esta skill foi construída: oito variantes de design foram produzidas em uma única sessão, cada uma usando um pequeno rótulo em caixa alta com tracking para títulos de seção. Cada instância tinha uma justificativa local que parecia razoável no momento. Ninguém as somou. O total foi 37, em cinco variantes que haviam sido apresentadas como visualmente distintas. O princípio orientador ("use hierarquia antes de rótulos") estava carregado e disponível o tempo todo.
Uma contagem não é contornável como um julgamento é. Faça a contagem.
A regra
Antes de apresentar qualquer trabalho de UI — toda vez, sem exceções — produza a tabela abaixo e inclua-a na mensagem. Não um resumo dela. A tabela, com números.
Se uma contagem estiver acima de zero, corrija-a ou escreva a justificativa específica para cada instância. "Parecia certo aqui" não é uma justificativa. Se o mesmo padrão aparecer em várias telas ou variantes, essa é a descoberta, independentemente de como cada instância se lê isoladamente.
Nunca relate a tabela como limpa sem ter realmente inspecionado a saída. Leia a marcação ou os estilos; não infira da memória do que foi escrito.
Padrões banidos
Proibições rígidas. Estes não estão disponíveis a menos que o usuário os solicite explicitamente pelo nome na solicitação atual. Uma declaração de design que os mencione não é suficiente.
| # | Padrão | Detecção |
|---|---|---|
| 1 | Sobrancelhas em caixa alta com tracking ou monoespaçadas | text-transform: uppercase E (família monoespaçada OU letter-spacing >= 0.05em) |
| 2 | Monoespaço em prosa | família mono em qualquer string que não seja código, valor literal, identificador ou número |
| 3 | Peso de título 700 ou mais pesado | qualquer texto de título ou exibição com font-weight >= 700 |
| 4 | Tipo de exibição itálico | font-style: italic em tamanhos de título ou exibição |
| 5 | Borda e sombra em um elemento | tanto border quanto box-shadow no mesmo nó |
| 6 | Ponto inicial em uma pílula | círculo, ponto ou forma preenchida pequena como primeiro filho de uma pílula, chip, emblema ou tag |
| 7 | Ícones Lucide | o conjunto Lucide, ou SVG desenhado à mão que reproduz suas formas (traço de 1.5px, pontas arredondadas, glifos geométricos 24x24). Desenho à mão converge para Lucide por padrão — assuma que qualquer ícone desenhado à mão é uma violação até ser verificado em relação ao conjunto aprovado |
Contados e justificados por instância, não banidos completamente:
| # | Padrão | Detecção |
|---|---|---|
| 8 | Divisores | conte cada régua, linha fina e borda-como-separador por tela. Cada um precisa de uma razão pela qual espaçamento em branco ou proximidade não poderiam servir |
| 9 | Cartões contêiner | conte cada caixa com borda ou preenchida por tela. Sinalize qualquer uma aninhada diretamente dentro de outra |
| 10 | Texto excessivo | prosa que reitera o que um valor, rótulo ou estado adjacente já comunica |
| 11 | Mesmo espaço entre variantes | ao produzir N variantes apresentadas como distintas, qualquer espaço — rótulo de seção, rodapé, cabeçalho, formato de botão, ritmo de espaçamento — renderizado identicamente em todas as N |
A regra 11 é a verificação cross-variante. Compare o mesmo espaço em todas as variantes antes de apresentar um conjunto. Humores distintos com um tratamento de rótulo idêntico não são variantes distintas.
Ícones
Conjunto aprovado: Phosphor. Use-o em vez de desenhar glifos à mão.
Antes de adicionar qualquer ícone, pergunte se ele carrega informação que uma palavra não poderia. Se um rótulo de texto funciona, use o rótulo de texto.
Executando o linter
Para UI que existe como código, execute o script antes da contagem manual:
python3 ~/.claude/skills/design-tally/scripts/tally.py <caminho> [--json] [--quiet]
Ele cobre as regras 1-6 e imprime a tabela de contagem. O código de saída é 1 apenas quando uma regra comprovável (1, 5, 6) tem um acerto, para que possa controlar um hook ou etapa de CI sem falhar em candidatos.
As regras 2, 3 e 4 são reportadas como candidatos, não violações — o script pode ver uma família mono ou um peso 700, mas não pode distinguir prosa de código, ou um título de um rótulo. Classifique cada candidato você mesmo e diga qual foi sua decisão.
O script não consegue ver as regras 7-11 e não consegue ler artboards do Paper ou Figma. Para trabalho em ferramentas de design, conte manualmente usando get_jsx ou equivalente — nunca a partir de uma captura de tela e nunca da memória do que você escreveu.
Uma execução limpa do script não é uma tabela limpa. Ele cobre 6 de 11 regras apenas em código.
Formato de saída
Reporte cada regra, incluindo aquelas com zero — um zero é informação, e listar apenas os acertos esconde se o passe realmente foi executado.
Design tally
| Regra | Contagem | Onde |
|-------|----------|------|
| 1 sobrancelhas | 0 | — |
| 2 mono em prosa | 2 | legenda sob o herói; linha de estado vazio |
| ... | |
Em seguida, para cada contagem diferente de zero: corrija-a ou declare a justificativa por instância.
Adicionando a esta lista
Quando o usuário identificar um novo padrão, adicione-o à tabela com uma regra de detecção específica o suficiente para contar. Se não puder ser declarado como uma condição detectável, ele pertence a uma skill de princípios, não a esta.