design-critiquepor Anthropic

Design Critique Skill.

Uma skill para Claude Code e Codex voltada a revisão de design: feedback estruturado de design sobre usabilidade, hierarquia e consistência.

Design Review & Accessibility
Relatório de revisão

Baixar OpenDesign Ver guia de uso

anthropics/knowledge-work-plugins · design/skills/design-critique/SKILL.mdSKILL.md

--- name: design-critique description: Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish. --- ## Usage ## What I Need From You ## Critique Framework ## How to Give Feedback ## Output ## Design Critique: [Design Name]

Cabeçalhos de seção e metadados lidos do arquivo original em 14/09/2026 · 3.898 caracteres no total

01 O que faz

O que o skill design-critique faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

O design-critique executa uma revisão de design compartilhada para qualquer pessoa com uma URL do Figma, um screenshot ou uma descrição escrita, em qualquer estágio, da exploração ao polimento final. Ele funciona por meio de uma estrutura de cinco partes: primeira impressão, usabilidade, hierarquia visual, consistência e acessibilidade. As regras de feedback levam o agente além de reclamações vagas: nomear o elemento concorrente, explicar o motivo com base em princípios de design ou necessidades do usuário, propor uma alternativa e reconhecer o que funciona.

O resultado é uma crítica em markdown com uma impressão geral, uma tabela de usabilidade classificada por gravidade (Crítico, Moderado, Menor), uma tabela de consistência, notas de acessibilidade, uma lista do que funciona bem e três recomendações prioritárias. Quando há uma ferramenta de design ou um conector de feedback de usuários presente, ele inspeciona componentes e tokens ou faz referência cruzada com tickets de suporte.

O que ele produz

Uma tabela de usabilidade que lista cada descoberta com um nível de gravidade e uma correção recomendada.
Uma tabela de consistência para desvios de tipografia, espaçamento e cor em relação ao design system.
Uma lista final de recomendações prioritárias ranqueadas por impacto.

Veja o exemplo de prompt ↗

Como funciona

01
Coloque o Design em Foco
Uma URL do Figma é obtida a partir do Figma e um arquivo referenciado é lido; se nenhum dos dois existir, o agente pede ao usuário para descrever ou compartilhar o design.
02
Comece com a Impressão de Dois Segundos
Antes de qualquer análise, registra o que chama a atenção primeiro, se isso está correto, a reação emocional e se o propósito é imediatamente claro.
03
Percorra as Cinco Dimensões em Ordem
Usabilidade, hierarquia visual, consistência e acessibilidade recebem cada uma seu próprio conjunto de perguntas, desde ordem de leitura e espaços em branco até taxas de contraste e áreas de toque.
04
Escreva o Feedback de Acordo com as Regras de Estilo Declaradas
As observações devem ser específicas, explicadas, acompanhadas de uma alternativa proposta e equilibradas com o que já funciona.
05
Preencha o Modelo de Saída em Markdown
A estrutura fixa é: impressão geral, tabela de usabilidade com gravidades, notas de hierarquia, tabela de consistência, acessibilidade, o que funciona bem e recomendações prioritárias ranqueadas.

02 Encontre o ideal para você

Quando Usar a Skill design-critique

Use a skill design-critique no Claude Code ou Codex quando o trabalho for design review deste tipo. Adequação e limites abaixo são tirados do próprio arquivo da skill.

Boa Combinação

Colar um link do Figma ou uma captura de tela para feedback antes de o design estar finalizado, desde a exploração até o polimento final.
Um fluxo nomeado e contextual, como um fluxo de checkout para um SaaS B2B, em que o público e o propósito refinam o feedback.
Uma revisão delimitada, por exemplo, pedindo que ele analise apenas a navegação para obter mais profundidade em uma área.
Frases de acionamento casuais durante o trabalho, como pedir que ele critique um mockup ou diga o que pensa sobre uma tela.

Conheça os Limites

Ele não consegue acessar um arquivo do Figma em tempo real, a menos que um conector de ferramenta de design esteja configurado no ambiente.
Cruzar decisões com reclamações reais de usuários requer uma fonte de feedback de usuários conectada.

O Que Fornecer

O design em siUma URL do Figma, uma captura de tela ou uma descrição escrita detalhada é o mínimo exigido.
ContextoO que é a coisa, para quem é e em que estágio está, escolhido entre exploração, refinamento ou final.
Um foco opcionalVocê pode restringir a revisão, por exemplo, para mobile ou para o fluxo de onboarding, para obter profundidade em vez de amplitude.
Um argumento de slash-commandO comando aceita um argumento, seja qual for a forma do seu material de design.

03 Dentro da skill

Regras que o Skill design-critique Dá ao Claude Code e ao Codex

7 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Nunca Deixe uma Observação Vaga
O feedback precisa nomear o elemento concreto em conflito, por exemplo dizendo que o CTA compete com a navegação em vez de chamar o layout de confuso.
Sempre Proponha uma Correção
Identificar um problema não é a entrega; a crítica deve sugerir alternativas junto com cada questão.
Reconheça o que Funciona
Observações positivas são parte obrigatória de um bom feedback, não uma cortesia opcional, e o modelo de saída tem uma seção O que Funciona Bem para elas.
Ajuste a Profundidade à Etapa
A exploração inicial recebe um feedback diferente do polimento final, então o agente deve calibrar em vez de aplicar um único padrão em tudo.
Classifique Cada Descoberta de Usabilidade por Severidade
A tabela de usabilidade usa três níveis fixos: Crítico, Moderado, Menor, cada um acompanhado de uma recomendação.
Cubra Acessibilidade como uma Passagem Própria
O framework inclui uma dimensão dedicada de acessibilidade em vez de incorporar contraste e tamanhos de alvo em notas gerais de usabilidade.
Pergunte Quando o Design Estiver Ausente
Se nenhuma URL ou arquivo for fornecido, o agente deve solicitar uma descrição ou captura de tela em vez de inventar uma crítica.

04 Coloque em prática

Instale design-critique no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione design-critique ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

Formato genérico da CLI skills para design/skills/design-critique/SKILL.md; o repositório pode documentar seu próprio caminho.

Dar à Skill uma Primeira Tarefa de Revisão de Design

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Review this design: [Figma URL]. It's the onboarding flow for [product], aimed at [audience], and we're at final polish rather than exploration. Focus on the mobile screens.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

A acessibilidade deve reportar aprovação ou reprovação em contraste especificamente para o texto principal.

No OpenDesign importe o design-critique a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branch main
Arquivo da skill: design/skills/design-critique/SKILL.md Checksum de conteúdo registrado na verificação; commit 8f877b6
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 24.012 Snapshot do GitHub capturado em 2026-09-14 para todo o repositório anthropics/knowledge-work-plugins, que contém 7 skills neste catálogo. Não é uma avaliação ou contagem de uso para design-critique.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

UsoComo o comando de barra recebe seu argumento e resolve a fonte do design.
O que Preciso de VocêO design, o contexto e uma área de foco opcional.
Framework de CríticaCinco dimensões ordenadas: primeira impressão, usabilidade, hierarquia, consistência, acessibilidade.
Como Dar FeedbackCinco regras de estilo para formular observações, da especificidade ao ajuste por etapa.
SaídaO modelo em markdown que a crítica deve seguir, incluindo tabelas.
Se Houver Conectores DisponíveisTrabalho preparatório extra quando uma ferramenta de design ou fonte de feedback de usuário está conectada.
DicasCompartilhe contexto, especifique a etapa e peça um foco mais restrito.

A Descrição da Própria Skill

"Obtenha feedback estruturado de design sobre usabilidade, hierarquia e consistência. Acione com "revise este design", "critique este mockup", "o que você acha desta tela?" ou ao compartilhar um link do Figma ou screenshot para feedback em qualquer etapa, da exploração ao polimento final."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 3.898 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill design-critique

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Preciso de um conector do Figma para isso funcionar?

Não. Com uma ferramenta de design conectada, ele pode extrair o design diretamente do Figma e inspecionar componentes, tokens e camadas. Sem isso, você ainda pode colar uma captura de tela ou descrever o design em detalhes e obter a mesma estrutura aplicada.

Crítica de Design

Execute design-critique em uma Tarefa Real de Revisão de Design.

Baixe o OpenDesign, importe design-critique do link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills