Habilidade de Crítica · Avaliação de Especialista em 5 Dimensões
Produza um relatório de revisão de design em um único arquivo HTML que avalie qualquer artefato em 5 dimensões e proponha correções acionáveis. Inspirado no fluxo de crítica especializada huashu-design.
Quando usar
- Depois que o agente (ou usuário) gerar um artefato (deck / protótipo / página de destino) e o usuário perguntar "o que há de errado com isso?" ou "revise isso"
- Como um ciclo de autoavaliação que o agente pode executar em sua própria saída antes de enviá-la
- Para comparar duas variantes do mesmo design
O que você produz
Um relatório de revisão único e autocontido <artifact type="text/html"> incluindo:
- Cabeçalho — qual artefato foi revisado, data, revisor ("OD · Habilidade de Crítica"), veredito em uma linha
- Gráfico radar (SVG inline, sem bibliotecas) mostrando as 5 pontuações
- Cinco cartões de dimensão, cada um com:
- Pontuação 0–10 (com faixa: 0–4 Quebrado · 5–6 Funcional · 7–8 Forte · 9–10 Excepcional)
- Parágrafo de evidência (citando elementos/arquivos/linhas específicos)
- Um marcador de Manter / Corrigir / Vitória rápida
- Listas de ação combinadas no final:
- Manter — o que está funcionando, não mexer
- Corrigir — problemas P0 / P1 que são visualmente caros
- Vitórias rápidas — ajustes de 5 a 15 minutos com impacto desproporcional
As 5 dimensões
Cada dimensão é independente — um deck pode ter 9/10 em Inovação mas 4/10 em Hierarquia e o relatório deve dizer isso claramente. Não faça média para esconder falhas interessantes.
1. Consistência de filosofia · 哲学一致性
O artefato escolhe uma direção clara e a mantém em cada microdecisão (cromo / chamada / espaçamento / destaque)?
Evidências a procurar:
- Existe uma direção de design declarada (ex: Monocle / WIRED / Kinfolk) ou são três estilos em um sobretudo?
- O vocabulário de cromo / chamada permanece em um registro, ou a página 3 diz "Vol.04 · Primavera" e a página 7 diz "MAS ESPERA 🔥"?
- O destaque / serifa / mono são usados pela mesma regra em todo o artefato?
0–4 Três estilos brigando entre si. 5–6 Uma direção, mas metade dos elementos se desviam. 7–8 Coerente, com desvios ocasionais em páginas marginais. 9–10 Cada elemento argumenta pela mesma tese.
2. Hierarquia visual · 视觉层级
Um estranho consegue descobrir o que ler primeiro, segundo, terceiro — sem ser informado?
Evidências a procurar:
- O tipo maior é claramente a coisa mais importante em cada página?
- Os papéis de mono / serifa / sem serifa correspondem ao papel da informação (metadados / corpo / exibição)?
- Muitos elementos "altos" competindo? Ou uma camada clara de primário + secundário + terciário?
0–4 Tudo grita. 5–6 Hierarquia funciona em páginas heróicas, mas quebra no corpo. 7–8 Camadas claras, colisões ocasionais. 9–10 O olho se move sem atrito.
3. Execução de detalhes · 细节执行
As coisas de 90/10 — alinhamento, entrelinha, kerning em tamanhos grandes, enquadramento de imagem, polimento de rodapé/cromo, espaçamento em casos extremos.
Evidências a procurar:
- Páginas com grandes estatísticas: o número está na linha de base, ou flutuando?
- Topos das colunas esquerda/direita alinhadas em
grid-2-7-5? - Proporções de
frame-img+ legenda consistentes entre páginas? - Rótulos mono: mesmo espaçamento entre letras? mesma regra de maiúsculas?
- Algum
<br>órfão causando linhas de 1 caractere?
0–4 Fita adesiva e barbante visíveis. 5–6 A maioria das páginas limpas, 1–2 desalinhadas. 7–8 Polido, olho especializado encontra 2–3 falhas. 9–10 Nível de revista — o tipo de detalhe que faz tipógrafos artesanais balançarem a cabeça.
4. Funcionalidade · 功能性
O artefato funciona para o uso pretendido? Alvos de clique, navegação, legibilidade à distância de apresentação, capacidade de copiar-e-colar para blocos de código, fallback móvel se relevante.
Evidências a procurar:
- Deck: navegação por teclado / roda / toque funcionando? Fallback de scroll em iframe?
- Página de destino: CTA acima da dobra? Número de telefone clicável no celular?
- Runbook: blocos de código copiáveis, fonte mono, sem aspas inteligentes?
- Informações críticas legíveis a 4m de distância (apresentação em tela grande)?
0–4 Visualmente bom, mas não cumpre seu propósito. 5–6 Fluxo principal funciona, casos extremos quebrados. 7–8 Robusto no uso normal. 9–10 Projetado defensivamente — lida com iframe / tela cheia / colar / imprimir sem hesitar.
5. Inovação · 创新性
Isso supera a mediana? Há um elemento que faz as pessoas se inclinarem?
Evidências a procurar:
- Um movimento inesperado de layout / movimento / tipográfico que não era necessário?
- Ou 100% seguro — poderia ser qualquer deck/página de destino de qualquer agência?
- A inovação é merecida (combina com a direção) ou enxertada (WebGL aleatório em um deck de vida lenta Kinfolk)?
0–4 Mediana genérica de IA. 5–6 Competente e esquecível. 7–8 Um momento memorável, o resto sólido. 9–10 Múltiplos movimentos que você roubaria — mas cada um serve claramente à tese.
Disciplina de pontuação (leia antes de pontuar)
- Sempre cite evidências — "pontuou 4 porque a página heróica mistura exibição Playfair com sans Inter na mesma linha" é melhor que "parece inconsistente". Números sem evidências são rejeitados.
- Não faça média para cima — se Hierarquia é 5 porque a página 3 está quebrada, não aumente para 7 porque as páginas 1 e 2 estão boas. A pontuação é a pior faixa sustentada.
- Não infle notas — 7 significa forte, não aceitável. Se toda pontuação é 7+, você não está revisando criticamente.
- Inovação pode ser baixa — 5/10 é bom para entregas de produção. Não puna o conservadorismo apropriado.
Fluxo de trabalho
Etapa 1 — Adquira o artefato
Três modos:
- Arquivo do projeto — usuário disse "revise o index.html que acabei de fazer": abra-o da pasta do projeto.
- HTML colado — usuário colou código no chat: leia-o da mensagem.
- Gerado por você neste turno — você acabou de emitir um artefato acima e quer fazer autocrítica: releia seu próprio
<artifact>.
Se houver vários arquivos HTML, pergunte qual (não revise todos).
Etapa 2 — Leia o suficiente para pontuar
Folheie todo o <style>, então leia 6–8 blocos de conteúdo representativos. Não pontue apenas pelo frontmatter. A pontuação depende do design executado, não da intenção declarada.
Etapa 3 — Pontue com evidências
Para cada uma das 5 dimensões, escreva a pontuação e um parágrafo de evidência de 30–80 palavras que nomeie elementos específicos. Use números de linha, nomes de classe, números de página.
Exemplo:
Dimensão: Execução de detalhes
Pontuação: 6 / 10
Evidência: Cartões de estatística na página 3 alinham-se limpidamente (grid-6, 3×2), mas na página 8 o rodapé da coluna direita fica 2vh mais alto que o esquerdo porque .callout tem 3vh de margem superior enquanto a figura não tem. Legendas de imagem usam mono na página 5, mas sans na página 7 — escolha um.
Etapa 4 — Construa as listas de ação
Agregue os 5 parágrafos de evidência em:
- Manter (3–5 marcadores) — coisas concretas que funcionam e que o usuário não deve quebrar na próxima iteração. Cite por classe / página / elemento.
- Corrigir (3–6 marcadores) — itens obrigatórios, ordenados por custo visual economizado por minuto gasto. Cada marcador ≤ 1 frase.
- Vitórias rápidas (3–5 marcadores) — 5–15 minutos cada, alto sinal-ruído (ex: "troque
display:flexporgridna página 4 para corrigir o desvio de coluna").
Etapa 5 — Emita o relatório HTML
Construa um único arquivo:
- Cabeçalho: nome do artefato + crédito do revisor + data
- Gráfico radar grande (SVG)
- 5 cartões de dimensão em uma grade de 1 coluna ou 2 colunas
- Três listas de ação no final com affordance de caixa de seleção
Use os tokens ativos de DESIGN.md se existirem; caso contrário, use um tema claro neutro (fundo off-white, texto quase preto, um destaque para preenchimento do radar).
Contrato de saída
<artifact identifier="critique-<slug-do-artefato>" type="text/html" title="Crítica · <Título do Artefato>">
<!doctype html>
<html>...</html>
</artifact>
Uma frase antes do artefato ("Revisou X em 5 dimensões, veja o relatório abaixo.") e pare após </artifact> — não parafraseie o relatório no chat; o usuário lerá o artefato.
Regras rígidas
- 5 pontuações, sempre — relatórios parciais (ex: apenas 3 dimensões) não são permitidos.
- Evidência por pontuação — sem "parece estranho" / "precisa de trabalho". Se você não pode citar um elemento, a pontuação não é justificada.
- Não infle notas — média geral acima de 8 é suspeita; verifique-se.
- Não revise seu próprio artefato no mesmo turno — o usuário precisa vê-lo primeiro. A autocrítica só é permitida em solicitação explícita ("agora critique o que você acabou de fazer").
- Apenas HTML em único arquivo — sem CSS/JS externos. Inline tudo.
- Gráfico radar é obrigatório — dá ao relatório uma silhueta reconhecível e permite que o usuário identifique os eixos fracos rapidamente.