Como pedir ao Claude uma crítica da interface que você já tem?

Fala aí, beleza? Quase todo mundo usa o Claude pra CRIAR tela, e pouca gente usa ele pra julgar a tela que já está lá

A inversão é simples: em vez de gerar layout novo, você coloca a interface que já existe no banco dos réus e pede crítica

Esse cenário é bem comum: a tela funciona, o time aprovou, e mesmo assim fica aquela pulga atrás da orelha de que alguma coisa ali não está clara pra quem chega de fora

Neste post a gente vê três coisas: como entregar a imagem da tela pro Claude, qual contexto transforma devolutiva genérica em crítica que serve, e como instalar a skill design-critique, que a própria Anthropic mantém em repositório aberto

O que você precisa ter antes de pedir a crítica

A lista é curta, e cada item aqui tem uma razão de ser

• A tela em arquivo de imagem: a skill design-critique aceita três entradas, um link do Figma, um screenshot ou uma descrição detalhada
• Um plano B pra quando não dá pra exportar a tela: a descrição detalhada é entrada válida, então dá pra descrever o layout no texto quando o print não é possível
• Espaço pras telas do fluxo: no claude.ai o limite é de até 20 imagens por requisição, o que já cobre um fluxo inteiro de cadastro, por exemplo
• Três linhas escritas de contexto: pra que serve o design, pra quem ele é e em que estágio está

Pré-inscrição Formação Claude Code

Domine o Claude Code do básico ao avançado

Você vai aprender a criar sistemas completos com Claude Code, sem precisar ser programador. Inscreva-se para ter acesso a um desconto de lançamento e bônus especiais!

Quero minha vaga

Essas três linhas não são burocracia, é o que a skill pede junto com a imagem

"Estágio?" É o quanto aquilo está fechado: rascunho de exploração, tela quase pronta pra desenvolvimento ou algo que já está no ar recebendo usuário de verdade

A crítica muda MUITO conforme a resposta, porque em rascunho o papo é estrutura e em tela publicada o papo é risco

Como enviar sua tela ao Claude e pedir a crítica passo a passo

Bora ver na prática?

1. Capture a tela

Salve o print em arquivo de imagem, no estado real em que o usuário vê

O erro comum deste passo é recortar só o pedacinho que te incomoda: aí você joga fora justamente a hierarquia (o que compete com o quê dentro da tela inteira)

2. Entregue a imagem no Claude Code

São três caminhos documentados: arrastar e soltar o arquivo na janela do Claude Code, copiar a imagem e colar no CLI com Ctrl+V (no macOS o Cmd+V também funciona no iTerm2) ou passar o caminho do arquivo dentro do próprio prompt

Analyze this image: /path/to/your/image.png

O erro comum deste passo é insistir no atalho de colar do sistema no terminal e achar que a imagem "não subiu": se o colar não pegar, vai no caminho do arquivo, que é o jeito mais à prova de bala

3. Ou entregue pela web do Claude

Na interface web a imagem entra como um arquivo qualquer, por upload, ou arrastada direto pra janela da conversa

4. Escreva o contexto junto da imagem

Mesma mensagem, imagem mais texto

Segue o screenshot da tela.
Propósito: tela de checkout do plano anual, o objetivo é concluir o pagamento.
Público: usuário novo, primeira compra, boa parte no celular.
Estágio: já está no ar em produção.

O erro comum deste passo é mandar a imagem sozinha: sem objetivo declarado, a IA não tem como saber se aquele botão gigante é acerto ou atropelo

5. Peça os eixos, não a opinião

Em vez de "o que você acha?", nomeie o recorte: o que puxa o olho primeiro, como o olho percorre o layout e se o que está enfatizado é o certo

Esse trio é exatamente o recorte de hierarquia visual previsto na skill, e ele funciona igual quando você digita na mão

O erro comum deste passo é a pergunta aberta, que puxa resposta simpática e inútil

6. Peça acessibilidade quando ela importa

A seção de acessibilidade da skill checa contraste de cor (passa ou não passa nos textos principais), tamanho das áreas de toque e legibilidade do texto (tamanho de fonte e altura de linha)

Se a sua tela é mobile, esse é o pedido que mais rende, porque área de toque some da conversa quando ninguém pergunta

Como instalar a skill design-critique da Anthropic

A skill não é um prompt mágico que alguém postou no X: ela mora em arquivo, num repositório aberto, e você pode ler o texto dela inteiro

O caminho é design/skills/design-critique/SKILL.md, dentro do plugin design, no repositório anthropics/knowledge-work-plugins

1. Adicione o marketplace

claude plugin marketplace add anthropics/knowledge-work-plugins

2. Instale o plugin design

O padrão de instalação é nome-do-plugin@knowledge-work-plugins, então pra skill deste post o comando fica assim:

claude plugin install design@knowledge-work-plugins

O erro comum deste passo é chutar a string do plugin: confira o nome na listagem do marketplace que você acabou de adicionar e troque só a primeira parte do padrão

3. Ou instale pela página de plugins

Os plugins também podem ser instalados pela página de plugins do Claude, em claude.com/plugins, se você prefere clicar a digitar

4. Deixe a skill trabalhar sozinha

Depois de instalado, o plugin ativa por conta própria: as skills disparam quando são relevantes e os comandos ficam disponíveis como slash commands da sessão

O erro comum deste passo é ficar procurando um botão pra "ligar" a skill: ela é conhecimento acionado por relevância, então o que faz ela entrar em campo é o seu pedido parecer com o assunto dela

Crítica genérica: por que acontece e como filtrar

Sintoma: a devolutiva serve pra qualquer tela do planeta

"Melhore o espaçamento", "deixe mais limpo", "considere uma hierarquia mais clara"

Você lê, concorda e não muda nada, porque não dá pra agir

Causa: pedido sem propósito, público e estágio, ou pergunta aberta demais

Sem objetivo declarado, não existe régua: qualquer elemento pode ser o mais importante da tela, então a resposta fica no terreno seguro do conselho universal

Solução: nomear os eixos e exigir formato

A skill design-critique classifica os problemas de usabilidade por severidade em três níveis, 🔴 Critical, 🟡 Moderate e 🟢 Minor, e abre com uma seção de impressão geral de uma a duas frases dizendo o que funciona e qual é a maior oportunidade

Esse formato é ótimo justamente porque obriga a escolher: se tudo é 🟡, ninguém decidiu nada

E aí vai a régua pra você filtrar na leitura:

<table> <thead> <tr><th>Sinal</th><th>Apontamento útil</th><th>Opinião genérica</th></tr> </thead> <tbody> <tr><td>Alvo</td><td>nomeia o elemento específico</td><td>fala da tela "como um todo"</td></tr> <tr><td>Consequência</td><td>liga o problema ao objetivo da tela</td><td>fala em estética solta</td></tr> <tr><td>Prioridade</td><td>vem com nível de severidade</td><td>tudo no mesmo peso</td></tr> <tr><td>Teste</td><td>sobrevive à pergunta "em qual elemento?"</td><td>derrete na hora</td></tr> </tbody> </table>

Essa última linha é o filtro mais barato que existe: pergunte "em qual elemento?" e veja o que resta

Como prevenir: monte um prompt padrão com o contexto fixo do seu produto (público, plataforma, o que o time chama de cada coisa) e reaproveite em toda tela

Você troca só a imagem e as duas linhas de propósito e estágio, e para de começar do zero toda vez

Quando esse tipo de crítica compensa

Nem todo caso pede tela nova gerada do zero, e é aí que a avaliação ganha

• Antes de entregar pra desenvolvimento: é o momento mais barato de mexer, porque ainda não virou componente, teste e migração. Se o seu combinado com a IA já cobre o caminho do projeto até o deploy, a crítica de tela encaixa como um passo antes da implementação
• Layout que já está no ar: aqui o foco muda pra acessibilidade, com contraste, área de toque e legibilidade, que são exatamente as checagens que a skill faz
• Print de erro como contexto: a documentação do Claude Code lista esse uso, mandar a captura do erro e perguntar a causa, o que é primo direto da crítica de interface (imagem entra como evidência, não como enfeite)
• Crítica no vocabulário do seu time: todo plugin do repositório segue a mesma estrutura interna, com plugin.json de manifesto, .mcp.json pras conexões de ferramentas, commands pros slash commands e skills pro conhecimento acionado automaticamente. O README orienta acrescentar a terminologia e os processos da sua empresa nos arquivos de skill, então dá pra fazer a crítica falar a sua língua em vez de falar "design em geral"

Esse último ponto é o que separa brinquedo de ferramenta: no dia em que a devolutiva usa o nome que o seu time dá pros componentes, ela vira pauta de reunião ✍️

Conclusão

A qualidade da crítica não é função do tamanho do prompt, é função do contexto que você entrega

Imagem sozinha gera elogio educado; imagem com propósito, público e estágio gera apontamento com endereço

O próximo passo é bem concreto: pega uma tela real do seu produto, escreve as três linhas de contexto, manda a imagem pelo caminho que for mais confortável (arrastar, colar ou passar o caminho do arquivo) e guarda a resposta

Depois instala o plugin, roda o mesmo pedido e compara as duas devolutivas lado a lado

Se a segunda vier com severidade e elemento nomeado, você achou seu novo revisor de tela…

até o próximo post! =)