83.3K+Baixar
Ir para o guia de uso
design-reviewpor Garry Tan

Design Review Skill.

Uma skill para Claude Code e Codex voltada para revisão de design: QA com olhar de designer de uma página construída: inconsistência, espaçamento, hierarquia, padrões de desleixo; depois os corrige.

  • Design Review & Accessibility
  • Relatório de revisão
Baixar OpenDesignVer guia de uso
garrytan/gstack · design-review/SKILL.mdSKILL.md
--- name: design-review description: Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Front matter e títulos de seção lidos do arquivo original em 14/09/2026 · 126.647 caracteres no total

01 O que faz

O que o Skill design-review 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

QA com olhar de designer em um site em produção. Ele abre páginas no próprio navegador do usuário, captura screenshots em 375, 768 e 1440, avalia dez categorias, da hierarquia visual aos estados de interação, depois edita o código-fonte para corrigir o que encontrou, um commit por correção, reverificando com screenshots antes e depois.

A profundidade padrão é de 5 a 8 páginas; sem uma URL em uma branch de feature, ele passa a considerar apenas o diff. O leitor recebe duas notas principais, um Design Score ponderado e um AI Slop Score independente, além de 30 regras de detecção nomeadas, como [kicker-above-heading] e [gradient-text], por trás das decisões de julgamento.

O que ele produz

  • Um relatório de auditoria estruturado em markdown no diretório da execução.
  • Um arquivo design-baseline.json gravado para comparação de regressão em execuções futuras.
  • Pares de screenshots antes e depois para cada correção aplicada.
  • Um DESIGN.md opcional, escrito a partir das observações extraídas, caso o usuário aceite a proposta da Fase 2.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Analise Antes de React

    A Fase 1 abre o destino e captura um screenshot de página completa em desktop, depois registra uma primeira impressão estruturada indicando para onde o olhar vai primeiro.

  2. 02
    Extraia o Sistema Renderizado

    A Fase 2 investiga fontes, cores, escala de títulos e áreas de toque dentro da página, depois propõe salvar os achados como um DESIGN.md.

  3. 03
    Audite Página por Página

    A Fase 3 executa um hook de console, um snapshot interativo e um screenshot anotado por página, repetindo o processo em três larguras de viewport.

  4. 04
    Sinta os Fluxos

    A Fase 4 percorre 2 a 3 fluxos de usuário, comparando o snapshot após cada ação e acompanhando uma pontuação de boa vontade para atrito e recuperação.

  5. 05
    Corrija um Achado por Vez

    A Fase 8 faz a mudança mínima, faz o commit sozinho e testa novamente antes de passar ao próximo achado.

  6. 06
    Pontue Duas Notas Principais

    O design score é uma média ponderada entre dez categorias, enquanto a nota de AI slop é independente.

02 Encontre o ideal para você

Quando Usar a Skill design-review

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

Boa Combinação

  • Uma auditoria pré-lançamento ou pós-redesign em que todo o site precisa de uma passagem sistemática, não apenas uma verificação pontual.
  • Trabalhando em uma branch de feature que altera a UI, em que apenas as rotas modificadas devem ser auditadas.
  • Quando você menciona inconsistências visuais ou quer aprimorar um site em produção, o skill deve se sugerir por conta própria.
  • Julgar se uma página em produção parece gerada por IA, algo que a maioria dos desenvolvedores não consegue avaliar por conta própria.
  • Uma verificação rápida quando não há tempo para a varredura completa: página inicial mais duas páginas-chave e uma checklist resumida.

Conheça os Limites

  • Revisar um design antes de ele ser construído: isso é um skill separado, em modo de planejamento.
  • Problemas que estão fora do código-fonte, como widgets de terceiros ou textos que precisam vir da equipe, são marcados como postergados em vez de corrigidos.
  • Ele não vai tocar na sua configuração de CI, e os testes existentes estão fora de alcance; apenas novos arquivos de teste de regressão podem ser criados.

O Que Fornecer

  • A URL de destinoUm endereço ativo, incluindo localhost. Sem um, o skill detecta automaticamente ou, na branch main, pergunta para você.
  • Uma restrição de escopoLimite a varredura a uma única página ou área quando você não quiser o tour completo.
  • Uma flag de profundidadeO padrão é standard; --quick reduz para três páginas e --deep expande para uma varredura completa de pré-lançamento.
  • Seu DESIGN.md, se existirOs documentos de design na raiz do repositório são lidos primeiro, para que cada decisão seja calibrada em relação ao sistema declarado, e desvios sejam avaliados com mais rigor.
  • Uma sessão de navegador já autenticadaA auditoria funciona dentro da sessão que o usuário já possui, então páginas autenticadas não precisam de um fluxo de login.

03 Dentro da skill

Regras que a skill design-review dá ao Claude Code e ao Codex

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

  1. Julgue o Render, Não o Repositório

    A auditoria nunca lê arquivos de implementação: as descobertas devem vir da página renderizada. A única exceção é a escrita do DESIGN.md a partir de observações extraídas.

  2. Um Commit por Correção

    Cada correção é registrada isoladamente, com a mensagem no formato style(design): FINDING-NNN mais uma breve descrição.

  3. Árvore Limpa Antes de Começar

    Uma árvore de trabalho suja interrompe a execução: o agente deve perguntar se deve commitar, guardar (stash) ou abortar antes que exista qualquer commit de correção.

  4. Pergunte Antes de Agir em uma Conta Real

    Em um destino não local, ações que alteram dados exigem uma pergunta de consentimento por execução, listando exatamente o que será feito; caminhos de logout e exclusão nunca são seguidos.

  5. As Credenciais Ficam Fora do Agente

    A sessão pré-autenticada é usada como está. Senhas, códigos de uso único, dados de pagamento, cookies, tokens e localStorage estão todos fora de alcance.

  6. Capturas de Tela Sustentam Cada Descoberta

    Uma descoberta sem pelo menos uma captura de tela não conta, e as imagens são copiadas e lidas para que o usuário as veja embutidas.

  7. Revertido no Momento em que Piora

    Qualquer regressão dispara um git revert HEAD imediato e a constatação é marcada como postergada em vez de corrigida às pressas.

  8. Parar em 30 Correções

    O loop escala a cada cinco correções e para completamente quando o risco de correção de design passa de 20% ou a contagem de correções chega a 30.

04 Coloque em prática

Instale design-review 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-review 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/garrytan/gstack --skill design-review

Forma genérica de CLI skills para design-review/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
Audit the design of [https://myapp.com/dashboard] at standard depth. Focus on the settings page. I'm signed in as [[email protected]] in Aside. Flag the AI slop patterns and anything that breaks the spacing scale, then fix what you can.

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:

  • Reteste a página afetada após cada correção e confirme que a lista de erros do console está vazia ou não pior que a linha de base.
  • Quando um mockup-alvo foi gerado, compare o screenshot corrigido com ele e registre aprovação ou reprovação.
  • Cada correção é classificada: verificada quando o reteste a confirma sem novos erros.
  • A Fase 9 reauditar as páginas afetadas e alerta claramente se as notas finais ficaram abaixo da linha de base.
  • O relatório informa a contagem do detector como um delta do início ao fim, ou informa que o detector não foi instalado ou estava desativado.

No OpenDesign o design-review vem incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer 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
Garry Tan
Repository
github.com/garrytan/gstack Branch main
Arquivo da skill
design-review/SKILL.md Checksum de conteúdo registrado na verificação; commit 71f6048
License
MIT De LICENSE.
Estrelas do repositório
132.921 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório garrytan/gstack, que contém 7 skills neste catálogo. Não é uma classificação ou contagem de uso para design-review.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. ConfiguraçãoAnalisa URL, escopo, profundidade e autenticação; verifica DESIGN.md, árvore limpa, navegador, testes.
  2. ModosOs escopos completo, rápido, profundo, com reconhecimento de diff e de regressão decidem quais páginas são visitadas.
  3. Fase 1: Primeira ImpressãoCaptura de tela da página completa em desktop, seguida de uma reação instintiva estruturada e teste de área da página.
  4. Fase 2: Extração do Design SystemInvestiga fontes, cores, escala de títulos e áreas de toque, depois oferece salvar um DESIGN.md.
  5. Fase 3: Auditoria Visual Página por PáginaCapturas, imagens anotadas e responsivas, teste de tronco e depois um checklist de 10 categorias.
  6. Fase 4: Revisão do Fluxo de InteraçãoPercorre 2-3 fluxos, compara cada etapa e pontua um medidor de boa vontade a partir de 70.
  7. Fase 5: Consistência entre PáginasCompara navegação, rodapé, componentes, tom e ritmo de espaçamento entre páginas.
  8. Fase 6: Compilar RelatórioAtribui notas de A a F para cada categoria e escreve o relatório mais o design-baseline.json.
  9. Fase 7: TriagemOrdena as constatações por impacto e posterga o que edições de código-fonte não conseguem corrigir.
  10. Fase 8: Loop de CorreçãoLocaliza a fonte, faz a correção mínima, faz commit, reteste, classifica e se autorregula.
  11. Fase 9: Auditoria Final de DesignReauditar páginas afetadas, recalcula notas e contagens de detectores, alerta sobre regressões.
  12. Fase 10: RelatórioEscreve o relatório completo, o resumo do índice do projeto, a linha de PR e o delta do detector.
A Descrição da Própria Skill
"QA com olho de designer: encontra inconsistências visuais, problemas de espaçamento, problemas de hierarquia, padrões de slop de IA e interações lentas — depois os corrige. (gstack)"

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

Design Review

Execute design-review em uma tarefa real de Design Review.

A skill design-review vem dentro do OpenDesign. Baixe o aplicativo, selecione a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/garrytan/gstack --skill design-review