Design Quality v2

Um skill de ciclo completo para criar e avaliar design de interface. Para interfaces existentes, ele audita e pontua. Para novas, define uma direção e garante o acabamento. Para as quebradas, aplica correções passe a passe.

Esta versão usa subagentes especializados para o Modo Revisão e Modo Correção — paralelos quando possível, mergulhando automaticamente quando uma dimensão pontua ≤ 5.

Gate 0: Resolver Tipo de Entrada

Antes de qualquer análise ou criação, identifique o que foi compartilhado. Isso muda tudo a jusante.

O que foi compartilhado	O que fazer
Captura de tela / imagem	Analisar visualmente; anotar o CSS que não pode ser confirmado
Código fonte HTML / CSS	Ler os estilos; auditoria completa possível
Pasta do projeto	Primeiro, fazer glob para arquivos CSS/componentes principais; ler antes de pontuar
URL / página ao vivo	Ler o DOM; inspecionar estilos via DevTools, se o navegador estiver disponível
Link de artefato	Ler o artefato; tratar como fonte HTML
Apenas descrição de texto	Pedir pelo menos um dos acima antes de pontuar; descrever o que está faltando

Também detecte o tipo de contexto — isso afeta quais heurísticas se aplicam:

Tela de aplicativo (ferramenta, dashboard, produto SaaS): densidade governa; cabeçalho é pequeno; ação É o conteúdo
Página (landing page, marketing, editorial): mais licença criativa; hero importa; seções e ritmo

Quando estiver em dúvida, declare sua suposição e prossiga.

Seleção de Modo

Detecte a partir da solicitação — quando em dúvida, comece com revisão:

Tipo de solicitação	Modo
"revisar", "criticar", "auditar", "isso parece gerado por IA?"	revisão
"construir", "criar", "projetar esta página"	criação
"corrigir", "melhorar", "des-slopizar", "redesenhar"	correção (revisão → aplicar)
"polir", "levemente estranho", "quase lá"	polimento

Se um arquivo PROJECT_DESIGN.md existir na raiz do projeto, leia-o primeiro. Ele contém a direção, paleta e Assinatura aprovados — não sobrescreva sem perguntar.

Arquitetura de Agentes

Para o Modo Revisão e Modo Correção, despache subagentes especializados em vez de fazer todo o trabalho em série. Isso produz uma análise mais profunda em menos tempo.

Quando usar agentes

Modo Revisão em qualquer entrada de UI real → sempre despachar 3 agentes de revisão em paralelo
Qualquer dimensão com pontuação ≤ 5 → auto-despachar o agente de mergulho profundo correspondente após o scorecard
Modo Correção → despachar um agente de correção dedicado por passe (passes 3 e 4 em paralelo)
Modo Criação Gate 1 → opcionalmente despachar um agente de pesquisa de direção quando a URL do produto ou categoria for conhecida

Fork vs novo

subagent_type: "fork" — para agentes de revisão e correção que precisam do contexto completo da conversa (a entrada de UI, capturas de tela, código)
Padrão (novo) — para agentes de pesquisa de direção que não precisam do histórico da conversa

Arquivos de prompt do agente

Os modelos de prompt completos estão em references/agents/. Consulte-os ao despachar — cada arquivo é autocontido com as instruções e o formato de saída para aquele agente.

Modo Revisão

Auditar, pontuar e priorizar. Nenhuma alteração de código sem perguntar primeiro.

Passo 0: Despachar 3 Agentes de Revisão em Paralelo

Antes de fazer qualquer análise você mesmo, despache todos os três agentes em uma única mensagem usando a ferramenta Agente. Todos os três são forks — eles herdam o contexto completo da conversa, incluindo a entrada de UI.

Agente 1 — Auditor de Slop Modelo de prompt: references/agents/review-slop.md Tarefa: auditoria de slop, verificação de template, acessibilidade, dispositivos móveis/toque, verificações rápidas de desempenho.

Agente 2 — Pontuador de Scorecard Modelo de prompt: references/agents/review-scorecard.md Tarefa: pontuar todas as 8 dimensões de 1 a 10 com justificativa por pontuação.

Agente 3 — Analista de Emoção Modelo de prompt: references/agents/review-emotion.md Tarefa: Verificação de Estado Sentido em todos os estados-chave + Mapeamento da Regra do Pico-Fim.

Aguarde todos os 3 concluírem, então prossiga para o Passo 1.

Passo 1: Sintetizar

Mescle as saídas dos três agentes no formato de saída padrão. Deduplicar descobertas que aparecem em múltiplos agentes. Se os agentes discordarem em uma pontuação, use o valor mais baixo e anote a discordância.

## Auditoria de Slop
[do Agente 1 — cada descoberta com localização e gravidade]

## Verificação de Template
[do Agente 1]

## Scorecard
Adequação do produto:    X/10   [do Agente 2 — nota de uma linha]
Hierarquia:      X/10
Clareza:        X/10
Bom gosto:          X/10
Contenção:      X/10
Densidade:        X/10
Acabamento:          X/10
Responsividade: X/10
Geral:        X/10

## Design Emocional
[do Agente 3 — Estado Sentido + descobertas de Pico-Fim]

## Veredito
Melhor parte:
Pior parte:
Correção necessária (P0): [se houver — senão "nenhuma"]
Vitórias rápidas (P1): [no máximo 3]

Após a saída, pergunte se deve aplicar alguma das correções.

Passo 2: Mergulho Profundo Automático

Após o scorecard ser exibido, verifique cada dimensão. Para qualquer uma que pontuou ≤ 5, auto-despache o agente de mergulho profundo correspondente sem esperar ser solicitado.

Consulte references/agents/deepdive-dispatch.md para a tabela de despacho e modelos de prompt.

Anuncie antes de despachar: "Hierarquia pontuou 4 — despachando uma crítica focada em hierarquia visual."

Mapa de mergulho profundo:

Dimensão / descoberta	Habilidade a despachar
Hierarquia ≤ 5	habilidade `critique-visual-hierarchy`
Clareza ≤ 5 (affordances)	habilidade `critique-affordance`
Clareza ≤ 5 (densidade)	habilidade `critique-information-density`
Acabamento ≤ 5 (tipografia)	habilidade `critique-typography`
Acabamento ≤ 5 (cor)	habilidade `critique-color`
Acabamento ≤ 5 (layout)	habilidade `critique-composition`
Bom gosto ≤ 5 (parece plano)	habilidade `interfaces-that-feel`
Densidade ≤ 5	habilidade `critique-information-density`
Problemas de arco emocional	habilidade `peak-end-rule`

Modo Criação

Antes de escrever qualquer UI, siga esta sequência. Cada passo é um gate — pare e confirme antes de prosseguir.

Gate 0: Tipo de contexto

Declare qual se aplica antes de prosseguir:

Tela de aplicativo — ferramenta, dashboard, produto de dados. Densidade, ações e estados governam.
Página — landing, editorial, marketing. Composição, ritmo e seções governam.

Gate 1: Agente de Pesquisa de Produto (opcional, mas recomendado)

Se o produto tiver uma URL, nome ou pertencer a uma categoria conhecida, despache um agente de pesquisa antes de perguntar ao usuário sobre o entendimento do produto. Isso economiza uma ida e volta e revela convenções específicas do domínio que o usuário pode não pensar em mencionar.

Modelo de prompt: references/agents/direction-research.md

Se nenhuma URL ou categoria for conhecida, pule esta etapa e pergunte diretamente ao usuário.

Verifique se existe um PROJECT_DESIGN.md na raiz do projeto. Se existir, leia-o — a direção já está definida; pule para o Gate 3 (Construir) e aplique a direção registrada.

Se não, leia ou pergunte: o que o produto faz, para quem é, qual é a tarefa principal, qual conteúdo existe, a stack de tecnologia, cores de marca existentes, fontes, componentes.

Pergunte: "Meu entendimento está correto antes de eu definir a direção do design?" Pare. Aguarde.

Gate 2: Direção + Dials de Design

Derive cinco linhas do produto — nunca de tendências, portfólios ou do que parece legal:

Produto: O que faz e para quem, uma frase simples.
Caráter: 2–3 palavras concretas. calmo, exato, um pouco caloroso ou rápido, técnico, brincalhão. "Limpo, moderno, elegante, minimalista, premium" são proibidos — eles descrevem todo template.
Mundo: O material ou lugar ao qual o produto pertence naturalmente. Um app de notas: papel e tinta. Uma ferramenta de monitoramento: instrumentos e turnos noturnos. Um app de viagem: mapas e luz de janela. Isso tinge os neutros, o acento e os momentos visuais.
Momentos: 1–2 lugares na tela onde o design fica rico e específico. Todo o resto permanece quieto para que estes sejam lidos instantaneamente.
Assinatura: Um pequeno detalhe que apenas este produto teria, repetido consistentemente.

Apresente 1–3 direções. Para cada uma, mostre três Dials de Design:

Variância  ░░░░░░░░░░  1–10   (1 = minimalista/centralizado, 10 = ousado/assimétrico)
Movimento    ░░░░░░░░░░  1–10   (1 = estático, 10 = animado)
Densidade   ░░░░░░░░░░  1–10   (1 = espaçoso/editorial, 10 = dashboard/denso)

Pergunte: "Qual direção? E os dials estão certos, ou devo ajustar algum?" Pare. Aguarde.

Após a direção ser confirmada, sugira criar um PROJECT_DESIGN.md na raiz do projeto:

# PROJECT_DESIGN.md

## Direção: [Nome]
Produto: [uma frase]
Caráter: [2–3 palavras]
Mundo: [material / lugar]
Momentos: [1–2 lugares específicos]
Assinatura: [um detalhe]

## Dials
Variância: X/10
Movimento: X/10
Densidade: X/10

## Paleta
Fundo: [token + hex]
Acento: [token + hex]
Texto primário: [token + hex]
Texto secundário: [token + hex]

## Tipografia
Display: [nome da fonte + peso]
Corpo: [nome da fonte + peso]
Mono: [nome da fonte] (se aplicável)

## Raio de borda: [valor]px

Princípios de Design

Com a direção confirmada, aplique nesta ordem (passes anteriores afetam os posteriores):

Espaçamento — estabelecer primeiro

Grade de 8px. Todas as margens, paddings, gaps: múltiplos de 4 ou 8. (mt-[13px] → corrija.)
Mesmo elemento = mesmo tamanho. Todas as linhas de lista compartilham uma altura e um gap.
Espaço mostra agrupamento: interno < externo. Um rótulo de seção fica mais próximo de seus próprios itens do que do acima.
A navegação é a mais densa: linhas de 32–36px, 2–4px entre elas.

Cor

Uma rampa neutra, tingida em direção ao Mundo. Fundos, superfícies, bordas, texto todos dessa rampa.
Um acento, usado raramente: ação primária, seleção ou o único número que importa.
Três funções de texto: primário, secundário, secundário. Nunca dez tons de cinza ligeiramente diferentes.
Proibido: gradientes de matiz em superfícies, texto gradiente, brilhos coloridos, sombras coloridas, borrões radiais, bordas neon.
Acento com texto sobre ele: contraste ≥ 4,5:1.
Prefira OKLCH para novos tokens de cor: oklch(L% C H).

Tipografia

Combine uma fonte de display distinta com uma fonte de corpo limpa. Maximize o contraste de peso.
text-wrap: balance em todos os títulos (h1–h3). text-wrap: pretty em texto de corpo e lista.
-webkit-font-smoothing: antialiased em :root ou html.
Mínimo 14px para texto de corpo (prefira 16px). Um h1 por página.

Componentes

Botões: rótulos com verbo primeiro. Um primário por seção.
Sem emoji como ícones. Uma biblioteca de ícones, um peso de traço, apenas currentColor.
Cards: sombra OU borda, não ambos.
Estados vazios: ilustração + título + CTA. Nunca apenas vazio.
Carregamento: telas esqueleto (não spinners) após atraso de 300ms.
Modais: X, Cancelar e Escape. Trave o foco. Retorne o foco ao fechar.
overscroll-behavior: contain em todos os modais, gavetas e dropdowns.
Todos os botões de ícone precisam de aria-label. Todas as entradas de formulário precisam de um <label> associado.

Regra de Um Elemento Brilhante

Cada tela recebe um elemento polido e rico. Tudo ao redor permanece quieto.

Salvaguarda Anti-Genérico

Se o design parecer impressionante em uma captura de tela de portfólio, mas tornar o produto menos claro, rejeite-o.

Após Construir

Execute o Modo Revisão (com agentes). Concluído quando: nenhuma descoberta P0, geral ≥ 7/10, adequação do produto ≥ 7/10.

Modo Correção

Execute o Modo Revisão primeiro para obter o scorecard. Em seguida, despache agentes de correção na ordem dos passes.

Ordem de execução:

Passes 1, 2 → sequencial (espaçamento primeiro, depois cor)
Passe 3 + Passe 4 → paralelo (ícones e texto são independentes)
Passes 5–10 → sequencial

Consulte references/agents/fix-passes.md para o modelo de prompt do agente de cada passe.

Para cada passe, anuncie o que o agente está fazendo e relate por passe: o que mudou e o que ainda precisa de atenção.

Ordem dos passes:

Espaçamento — alinhamento à grade de 8px, ritmo, agrupamento
Cor — remover slop, construir a partir da rampa neutra
Ícones — um conjunto, um tamanho, um traço, currentColor (paralelo com Texto)
Texto — remover rótulos de emoji, acalmar o grito, tornar específico do produto (paralelo com Ícones)
Tipografia — hierarquia, pesos, text-wrap: balance, text-wrap: pretty, antialiasing, tabular-nums
Layout — alinhamento, densidade
Detalhes — raios concêntricos, sombras, bordas
Acessibilidade e Toque — estados de foco, aria-label, touch-action: manipulation, alvos de 44px, overscroll-behavior
Visuais — ilustrações de estado vazio, consistência de ícones, proporções de imagem. Consulte references/passes-visuals.md
Movimento — último passe, apenas onde adiciona significado. Consulte references/passes-motion.md

Após todos os passes: execute os agentes do Modo Revisão novamente para verificar. Relate o delta em relação ao scorecard original.

Modo Polimento

Para interfaces que são em sua maioria bem projetadas, mas parecem ligeiramente estranhas.

Técnica: desacelere a interface para 10% da velocidade no DevTools do navegador (painel Animações) e percorra cada estado: hover, focus, active, loading, empty. O que parece estranho a 10% é o que está sutilmente errado em velocidade total.

Consulte references/micro-polish.md para valores específicos.

Checklist rápida:

Checklist Pré-Entrega

Antes de marcar qualquer UI como concluída:

Sem emoji como ícones (use SVG: Heroicons/Lucide/Phosphor/Radix)
cursor-pointer em todos os elementos clicáveis
Contraste de texto ≥ 4,5:1 (WCAG AA)
Estados de foco visíveis para navegação por teclado (focus-visible, não outline removido)
aria-label em cada botão de ícone
<label> associado a cada entrada de formulário
Rolagem suave: scroll-behavior: smooth em :root para navegação âncora
Sem @keyframes onde uma transição CSS funciona

RomuloRogerio/design-quality-v2

O que é design-quality-v2?

Perguntar na sua IA favorita

Documentação