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

Plan Design Review Skill.

Um skill de Claude Code e Codex para revisão de design: revisa um plano de design quanto à completude e riscos de experiência antes da implementação.

  • Design Review & Accessibility
  • Relatório de revisão
Baixar OpenDesignVer guia de uso
garrytan/gstack · plan-design-review/SKILL.mdSKILL.md
--- name: plan-design-review description: Designer's eye plan review — interactive, like CEO and Eng review. (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)
Metadados iniciais e títulos de seção lidos do arquivo original em 14/09/2026 · 72.139 caracteres no total

01 O que faz

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

Revisa um plano de design quanto à completude e ao risco para a experiência antes da implementação. Executa sete passes de design (Information Architecture, Interaction States, User Journey, Empty States, Visual Hierarchy, AI Slop Risk, Accessibility), avaliando cada um de 0 a 10, explica o que tornaria cada um deles um 10 e então ajusta o plano para chegar lá. Gera mockups visuais com o designer gstack por padrão quando a UI está no escopo.

Inclui uma etapa opcional de vozes externas: o Codex avalia o plano em relação às regras rígidas de design da OpenAI e a checagens de teste de sanidade; um subagente do Claude executa uma revisão independente de completude. Opera em modo de plano. Para auditorias visuais de sites em produção, use /design-review em vez disso. O resultado é um plano melhor, com um relatório de revisão estruturado, e não um documento sobre o plano.

O que ele produz

  • Um arquivo de plano aprimorado com lacunas de design resolvidas, dimensões avaliadas e uma seção GSTACK REVIEW REPORT estruturada anexada
  • Um arquivo HTML de painel comparativo e um approved.json registrando a variante escolhida pelo usuário, avaliações, comentários e feedback
  • Um placar de teste de sanidade sintetizando as descobertas do Codex e do subagente do Claude, caso as vozes externas tenham sido executadas
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Portão de Escopo Confirma o Alvo da Revisão

    Antes de tudo, pede que o usuário confirme o que revisar (diff de branch, documento de plano ou página específica), a menos que o modo de plano selecione automaticamente o plano ativo ou o usuário tenha indicado explicitamente um alvo.

  2. 02
    Gera Mockups Visuais por Padrão

    Quando o designer gstack está disponível e o plano tem escopo de UI, gera mockups imediatamente, sem pedir permissão.

  3. 03
    Vozes de Design Externas Opcionais Rodam em Paralelo

    Se o usuário optar por isso, inicia simultaneamente o Codex (regras rígidas de design + checagens de teste de sanidade) e um subagente do Claude (revisão independente de completude).

  4. 04
    Sete Passes de Design Avaliam de 0 a 10 e Corrigem Lacunas

    Para cada dimensão (Information Architecture, Interaction States, User Journey, Empty States, Visual Hierarchy, AI Slop Risk, Accessibility), avalia o plano, explica como seria um 10/10, edita o plano para fechar as lacunas, reavalia e repete até chegar a 10 ou o usuário dizer para seguir adiante.

  5. 05
    Grava um Relatório de Revisão Estruturado no Arquivo do Plano

    Anexa uma seção GSTACK REVIEW REPORT com uma tabela de execuções/status/descobertas, uma linha VERDICT e um status de decisões não resolvidas como a última linha não vazia do arquivo.

02 Encontre o ideal para você

Quando Usar a Skill plan-design-review

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

Boa Combinação

  • O usuário elaborou um plano com componentes de UI/UX que devem ser revisados antes do início da implementação
  • Um plano de design precisa de mockups visuais para tornar descrições abstratas concretas antes de começar a codificação
  • Um plano descreve o que o backend faz, mas nunca especifica o que o usuário vê, os estados vazios, os estados de erro ou o comportamento responsivo

Conheça os Limites

  • Alterações puramente de backend, somente de API ou de infraestrutura, sem escopo de UI
  • Auditorias visuais de sites em produção (use /design-review em vez disso)

O Que Fornecer

  • Um plano de design ou diff de branch com escopo de UIO arquivo do plano, um doc colado pelo usuário, uma página/caminho específico ou o diff da branch atual.
  • Feedback de mockup via painel de comparaçãoO gstack designer serve um painel de comparação via HTTP onde o usuário avalia variantes, deixa comentários, clica em Regenerate/Remix ou envia uma escolha final.

03 Dentro da skill

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

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

  1. Todos os artefatos de design são salvos em ~/.gstack/projects/$SLUG/designs/

    Mockups, painéis de comparação e approved.json devem ser salvos no diretório de designs do projeto gstack do usuário, nunca em .context/, docs/designs/, /tmp/ ou qualquer diretório local do projeto.

  2. Hierarquia de prioridade: Step 0 > Mockups > Estados de interação > AI Slop > IA > Jornada do usuário

    Nunca pule a avaliação de escopo do Step 0 nem a geração de mockups quando o designer estiver disponível. Mockups antes das rodadas de revisão são inegociáveis.

  3. Revisões de design são calibradas em relação ao DESIGN.md quando presente

    Se DESIGN.md existir, todas as decisões de design devem estar alinhadas com o design system declarado.

  4. Vozes externas pré-carregam issues nas rodadas

    Rejeições definitivas do Codex são levantadas como os primeiros itens na Rodada 1, marcadas [HARD REJECTION]. Itens DISAGREE do Litmus apresentam as duas perspectivas na rodada relevante.

  5. Princípio da completude: a IA torna a completude barata

    Recomende cobertura completa (testes, casos extremos, caminhos de erro) — feita em partes, mas sem deixar nada de fora.

04 Coloque em prática

Instalar plan-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.

Adicionar plan-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 plan-design-review

Forma genérica da CLI skills para plan-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
Review the design plan in [plan-file-path] before we start building. The plan describes a new onboarding flow with three screens, email capture, and a welcome modal. I want to make sure we're not missing interaction states, empty states, or accessibility requirements. Generate mockups if 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:

  • Confirme que o último título do arquivo do plano é ## GSTACK REVIEW REPORT antes de sair do modo plano
  • Confirme que o relatório de revisão tem uma tabela de runs/status/findings, uma linha VERDICT e um status de decisões pendentes como a última linha não vazia do arquivo
  • Verifique se gstack-review-log foi chamado e se gstack-review-read foi executado pelo menos uma vez, caso haja um arquivo de plano no contexto

No OpenDesign o plan-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
plan-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 avaliação ou contagem de uso para plan-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. Quando invocar este skillUse para revisões de planos de design; sugira proativamente quando um plano de UI/UX precisar de revisão antes da implementação
  2. Preâmbulo (execute primeiro)Executa gstack-skill-start, trata o modo degradado, lê blocos de instrução, define SESSION_KIND e marcadores de telemetria
  3. Filosofia de designGarante que o design pareça intencional, não gerado; encontre todas as lacunas, explique por que elas importam, corrija as óbvias
  4. O gstack designer — SUA FERRAMENTA PRINCIPALGerador de mockups por IA que cria visuais reais a partir de briefings de design; use por padrão quando houver UI
  5. Princípios de designNove princípios: estados vazios são recursos, hierarquia importa, especificidade em vez de vibe, casos extremos são UX, AI slop é o inimigo, responsividade é intencional, acessibilidade é obrigatória, subtração como padrão, confiança conquistada no nível do pixel
  6. Padrões cognitivos — como grandes designers veemDoze instintos perceptivos: ver sistemas, não telas; empatia como simulação; hierarquia como serviço; culto à restrição; reflexo de questionar; paranoia com casos extremos; teste "eu notaria isso?"; gosto orientado por princípios; subtração como padrão; design orientado pelo horizonte de tempo; design para confiança; jornadas em forma de storyboard
  7. Princípios de UX: como os usuários realmente se comportamTrês leis (não me faça pensar, cliques não importam, pensar importa, omita e depois omita), comportamento do usuário (escanear em vez de ler, satisfazer-se, se orientar aos trancos), design de outdoor, navegação como orientação espacial, reserva de boa vontade, mobile com riscos maiores
  8. Hierarquia de prioridade sob pressão de contextoStep 0 > mockups > Interaction States > AI Slop > IA > User Journey; nunca pule o Step 0 ou os mockups
  9. AUDITORIA DE SISTEMA PRÉ-REVISÃO (antes do Step 0)Reúne contexto do git log, diff stat, plan, CLAUDE.md, DESIGN.md, TODOS.md, mapeia o escopo de UI e os padrões existentes
  10. CONFIGURAÇÃO DE DESIGN (execute esta verificação ANTES de qualquer comando de mockup de design)Verifica se o binário do designer gstack está disponível; imprime DESIGN_READY ou DESIGN_NOT_AVAILABLE
  11. Contexto do Brain (preflight)Carrega o contexto estruturado do projeto (produto, marca, objetivos, decisões recentes) do gstack-brain-cache antes de fazer perguntas de esclarecimento
  12. Step 0: avaliação do escopo de designClassificação inicial de design de 0 a 10, verificação do status do DESIGN.md, aproveitamento do design existente, pergunta sobre áreas de foco (PARAR até o usuário responder)
A Descrição da Própria Skill
"Revisão de plano com olhar de designer — interativa, como revisão de CEO e Eng. (gstack)"

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

Plan Design Review

Execute plan-design-review em uma tarefa real de revisão de design.

O skill plan-design-review vem dentro do OpenDesign. Baixe o app, escolha o 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 plan-design-review