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

Design Consultation Skill.

Uma skill para Claude Code e Codex voltada a trabalho de marca e design systems: consultoria de design de produto que propõe um design system completo: estética, tipografia, cor, layout, movimento.

  • Marca e Sistemas de Design
  • Sistema de design
Baixar OpenDesignVer guia de uso
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (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)
Cabeçalhos de seção e metadados lidos do arquivo original em 14/09/2026 · 67.098 caracteres no total

01 O que faz

O Que a Skill design-consultation 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

Uma skill de consultoria de design que atua como um designer de produto sênior para criar um design system completo. Ela pesquisa o cenário do produto por meio de busca na web e análise visual, propõe tipografia (fontes específicas, não padrões), sistemas de cor (variáveis CSS com valores hexadecimais), abordagens de layout (com foco em composição) e direção estética. A skill gera um arquivo DESIGN.md como a fonte de verdade do design do projeto, com mockups de IA opcionais mostrando o sistema aplicado a telas reais.

Ela suporta tanto o navegador Aside (sessões reais do usuário) quanto o fallback headless, mantém um perfil de gosto persistente entre sessões e integra vozes externas de design do Codex e do subagente Claude. A skill funciona de forma conversacional — não como um formulário rígido —, explica o raciocínio de cada recomendação e prioriza a coerência em vez de escolhas ótimas individuais.

O que ele produz

  • Mockups de IA mostrando o design system aplicado a telas reais (quando o gstack designer está disponível)
  • Página de pré-visualização em HTML com amostras de tipografia e cor em tempo real (alternativa quando o designer não está disponível)
  • JSON de perfil de gosto persistente que rastreia escolhas de design aprovadas e rejeitadas entre sessões
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Reunir Contexto do Produto

    Lê o DESIGN.md, o PRODUCT.md, o README, o package.json e a saída do office-hours existentes para entender o produto.

  2. 02
    Pesquisar o Cenário

    Quando solicitado, usa o navegador Aside ou o WebSearch para encontrar de 5 a 10 produtos concorrentes, captura screenshots da página completa e analisa fontes, cores, layouts e direção estética.

  3. 03
    Consultar Vozes Externas

    Opcionalmente, inicia o Codex e o subagente Claude em paralelo para gerar propostas de design independentes.

  4. 04
    Propor Design System Completo

    Entrega uma proposta com posicionamento claro, incluindo nomes específicos de fontes, valores de cor em hexadecimal, variáveis CSS, abordagem de layout e direção estética.

  5. 05
    Gerar Artefatos de Pré-visualização

    Cria mockups com IA (quando o gstack designer está disponível) mostrando o design system aplicado a telas reais, ou uma página de preview em HTML com amostras de tipografia e cor em tempo real.

  6. 06
    Escrever DESIGN.md

    Produz a fonte de verdade do design do projeto no formato aberto DESIGN.md, com tokens em front-matter e seções de justificativa.

02 Encontre o ideal para você

Quando Usar a Skill design-consultation

Use a skill design-consultation no Claude Code ou Codex quando o trabalho for de marca e sistema de design deste tipo. Adequação e limites abaixo são retirados do arquivo da própria skill.

Boa Combinação

  • Iniciando a UI de um novo projeto sem design system ou DESIGN.md existente
  • Quando explicitamente solicitado para criação de design system, diretrizes de marca ou DESIGN.md
  • Produtos que precisam se diferenciar das normas da categoria por meio de desvios de design deliberados

Conheça os Limites

  • Uma limitação ou requisito alegado ("a API não pode fazer isso", "X requer uma credencial", "isso é impossível nesta plataforma") é uma afirmação material.
  • Declare uma apenas com o erro literal, a declaração documentada ou uma verificação ao vivo em mãos — associar uma falha a uma história familiar não é evidência.
  • Quando uma verificação simples resolve a questão, execute-a ANTES de perguntar ao usuário ou declarar uma etapa bloqueada.

O Que Fornecer

  • Preferência de pesquisaSe deve pesquisar produtos concorrentes por meio de busca na web e análise visual, ou trabalhar a partir do conhecimento de design nativo do skill.
  • Escolha de vozes externasOpcional: se deve executar a avaliação de design do Codex e a proposta de design do subagente do Claude em paralelo para obter perspectivas independentes.
  • DESIGN.md existenteSe presente, o skill o lê e pergunta se deve atualizar, começar do zero ou cancelar. Trata a conversão de formato de legado para a especificação aberta.

03 Dentro da skill

Regras que o skill design-consultation 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.

  1. Nunca Fontes Proibidas, Nunca Fontes de Destaque Superutilizadas

    Texto de corpo ou de UI em superfícies Operate ou Read segue uma lista com escopo por função. Nenhuma fonte proibida em qualquer função, nenhuma fonte superutilizada como voz de destaque.

  2. Fontes Específicas São Exigidas, Não Padrões

    As propostas de tipografia devem nomear fontes específicas — nunca Inter, Roboto, Arial ou padrões do sistema.

  3. Coerência Supera a Otimização Individual

    Um design system em que cada elemento reforça todos os demais supera um em que as escolhas são individualmente otimizadas, mas incompatíveis entre si.

  4. Justificativa Exigida para Cada Recomendação

    Nunca recomende uma escolha de design sem explicar o motivo. Cada fonte, cor, layout ou decisão estética deve estar ligada ao contexto do produto, às necessidades do usuário ou à estratégia de diferenciação.

  5. O Perfil de Gosto Persiste e Decai

    O skill mantém ~/.gstack/projects/$SLUG/taste-profile.json, rastreando escolhas de design aprovadas e rejeitadas entre sessões. As pontuações de confiança decaem 5% por semana.

  6. Função de Força do "Item Memorável"

    Antes de propor um design system, o skill pergunta o que o usuário quer que seja lembrado após o primeiro contato.

  7. Conversacional Em Vez de Fluxo de Trabalho Rígido

    O skill funciona como um consultor de design, não como um formulário. Os usuários podem entrar no chat em qualquer momento para discutir decisões.

04 Coloque em prática

Instalar design-consultation no Claude Code ou Codex

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

Adicionar design-consultation 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-consultation

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

Dê ao Skill uma primeira tarefa de marca e design-system

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

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

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:

  • DESIGN.md existe e contém front-matter com tokens de design (cores, fontes, espaçamento)
  • O sistema de cores inclui variáveis CSS para background, surface, texto primário, texto muted e accent com valores hexadecimais
  • Se existir um perfil de estilo, a proposta de design faz referência às preferências estabelecidas ou se afasta deliberadamente delas

No OpenDesign o design-consultation 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-consultation/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 design-consultation.
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 esse skillCria o DESIGN.md; para sites existentes, use /plan-design-review; é acionado por solicitações de sistema de design
  2. Preâmbulo (executar primeiro)Executa gstack-skill-start; trata modo degradado; processa blocos de instrução; determina o tipo de sessão
  3. CONFIGURAÇÃO DO NAVEGADORVerifica a disponibilidade do Aside browser; trata consentimento de sessão real; define regras para controlar o navegador do usuário
  4. Fallback de navegador: o headless browser próprio do gstackLocaliza o binário $B quando o Aside não está disponível; traduz scripts do Aside para comandos $B; trata sessões sem cookies
  5. CONFIGURAÇÃO DE DESIGNVerifica o binário designer do gstack para geração de mockups por IA; lista comandos disponíveis; define regras de caminho de artefatos
  6. Aprendizados anterioresBusca aprendizados entre projetos ou restritos ao projeto; solicita preferência entre projetos na primeira execução
  7. Fase 0: verificações preliminaresVerifica o DESIGN.md existente; oferece atualizar/criar novo/cancelar; verifica o formato; trata conversão; reúne contexto do produto a partir do código
  8. Fase 1: contexto do produtoPergunta única abrangendo produto/público/setor/tipo; pergunta forçada sobre algo memorável; lê o perfil de estilo, se existir
  9. A pesquisa na web é executada no AsideUsa o agente Aside para buscas na web; recorre à ferramenta WebSearch como alternativa; sanitiza consultas; trata resultados como conteúdo não confiável
  10. Fase 2: pesquisaIdentifica 5 a 10 produtos concorrentes; captura screenshots; analisa fontes/cores/layouts; sintetiza em três camadas
  11. Design Outside VoicesOpcionalmente executa Codex e um subagente Claude em paralelo; sintetiza concordâncias e divergências; registra o resultado
  12. Regras importantesProponha, não apresente menus; justificativa obrigatória; coerência acima de escolhas individuais; tom conversacional, não rígido; aceite a escolha final
A Descrição da Própria Skill
"Consultoria de design: entende seu produto, pesquisa o panorama, propõe um design system completo (estética, tipografia, cor, layout, espaçamento, movimento) e gera preview de fonte+cor... (gstack)"

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

06 Antes de instalar

Perguntas Sobre o Skill design-consultation

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

Isso funciona com Cursor, Windsurf ou outros agentes baseados em Claude?

Sim, mas a integração com o navegador depende do Aside (somente macOS 15+) ou do fallback de headless browser do gstack. Sem nenhum dos dois, o skill pula a pesquisa visual da concorrência e trabalha a partir do conhecimento de design integrado. A consulta de design principal — contexto do produto, proposta de tipografia/cor/layout, criação do DESIGN.md — funciona em qualquer ambiente.

Consultoria de Design

Execute design-consultation em uma Tarefa Real de Trabalho de Marca e Sistema de Design.

A skill design-consultation vem incluída no OpenDesign. Baixe o aplicativo, escolha 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-consultation