FReptar0/design-guard

Gere um DESIGN.md completo para um projeto web usando o Google Stitch.

Instruções

0. Verificação de descoberta (DEVE ser executada antes de qualquer outra coisa):
   • Verifique se o diretório .dg-research/ existe e contém arquivos JSON.
   • SE .dg-research/ NÃO existir E o usuário tiver mencionado um nome de negócio, empresa, marca, cafeteria, restaurante, loja ou entidade do mundo real específica:
     • PARE. Diga ao usuário: "Recomendo executar /dg-discover primeiro para pesquisar [nome do negócio]. Isso produz um DESIGN.md fundamentado em dados reais de mercado e concorrentes, em vez de padrões de IA. Deseja que eu execute /dg-discover em vez disso?"
     • Só prossiga com /dg-design se o usuário disser explicitamente para pular a pesquisa.
   • SE .dg-research/ existir com arquivos JSON: Leia .dg-research/latest.json para obter o briefing do negócio, análise de concorrentes e cores da marca. Esses dados de pesquisa são sua fonte PRIMÁRIA para o contexto de negócio — use-os em vez de qualquer contexto de nível de projeto do CLAUDE.md. Prossiga para o passo 1.
   • SE a solicitação do usuário for genérica (nenhum negócio específico mencionado, ex.: "faça um site de portfólio" ou "crie um painel SaaS"): prossiga diretamente para o passo 1. A pesquisa é para negócios reais, não projetos genéricos.

Isolamento de Contexto (CRÍTICO — leia antes de gerar)

Ao gerar um DESIGN.md, distinga entre dois contextos:

1. Projeto anfitrião — a base de código em que você está executando (Design Guard). O CLAUDE.md descreve ESTE projeto. Seu modelo de negócio, funcionalidades, comandos CLI, contagens de testes e arquitetura técnica são sobre o Design Guard, NÃO sobre o negócio alvo do usuário.

2. Negócio alvo — o negócio para o qual o usuário deseja um DESIGN.md. Isso vem de:

   • O briefing de marca que o usuário fornece (Passo 1)
   • Dados de pesquisa em .dg-research/latest.json (se disponível a partir de /dg-discover — esta é sua fonte PRIMÁRIA)
   • Resultados de WebSearch/WebFetch sobre o negócio alvo

Regras:

• SE o negócio alvo for DIFERENTE do Design Guard:

  • NÃO use descrições de negócio, listas de funcionalidades, estatísticas ou detalhes técnicos do CLAUDE.md
  • NÃO faça referência a comandos CLI, contagens de testes, TypeScript, Node.js, MCP ou Stitch como funcionalidades do negócio alvo
  • NÃO descreva o alvo como "código aberto", "inteligência de design" ou qualquer frase da Visão Geral do Projeto do CLAUDE.md
  • Todo fato de negócio no DESIGN.md deve vir do briefing do usuário ou dos dados de pesquisa
  • Se um DESIGN.md existente estiver presente na raiz do projeto, NÃO copie suas cores, fontes ou contexto de negócio para o novo — gere tudo novo a partir do briefing e da pesquisa

• SE o negócio alvo FOR o próprio Design Guard:

  • O CLAUDE.md é uma fonte válida de contexto de negócio — use-o junto com o briefing do usuário

• SEMPRE siga a especificação de 8 seções e as regras de validação do DESIGN.md do CLAUDE.md, independentemente do negócio alvo. As regras de FORMATO sempre se aplicam; o contexto de NEGÓCIO é o que deve ser isolado.

1. Se o usuário forneceu um briefing de marca como argumento, use-o. Caso contrário, pergunte:

   • Nome da empresa/produto
   • Setor ou domínio
   • Público-alvo
   • Direção estética (ex.: "corporativo premium", "startup divertida", "SaaS minimalista")

2. Gere um DESIGN.md com exatamente estas 8 seções:

   1. Tema Visual e Atmosfera — 2 a 3 frases evocativas descrevendo a estética geral. Use adjetivos e referências específicas, não termos genéricos.
   2. Paleta de Cores e Papéis — Tabela Markdown com colunas: Papel, Nome, Hex, Uso. Mínimo de 5 papéis (Primário, Secundário, Superfície, Sobre-Superfície, Erro). Todas as cores como valores hexadecimais, nunca descrições como "azul confiável". Dê a cada cor um nome descritivo (ex.: "Azul Marinho Profundo", não apenas "Primário").
   3. Tipografia — Famílias de fontes do Google Fonts (evite Inter, Poppins como primária — elas sinalizam design gerado por IA). Tamanhos em rem/px, pesos como números (400/600/700), alturas de linha. Inclua heading, body e mono. Use um par serifa/sans-serif para contraste.
   4. Espaçamento e Layout — Unidade base (ex.: 4px), escala, largura máxima de conteúdo, sistema de grade, breakpoints.
   5. Padrões de Componentes — Pelo menos 3 componentes (botões, cartões, inputs, etc.) com estrutura e regras de estilo. Varie estilos de border-radius e sombra.
   6. Iconografia — Estilo (contorno/sólido/duotone), tamanho padrão, biblioteca de origem.
   7. Diretrizes de Imagens — Estilo de foto, estilo de ilustração, proporções. Seja específico sobre o que as imagens comunicam.
   8. Faça e Não Faça — Pelo menos 3 de cada. DEVE incluir estes padrões anti-slops:

   Faça

   • Faça uso de layouts assimétricos ou não padrão em pelo menos uma seção de destaque
   • Faça variação de tamanhos de cartão e espaçamento para criar ritmo visual
   • Faça uso exclusivo da paleta de cores especificada (sem cores escolhidas por IA)
   • Faça manutenção de alto contraste (mínimo 4.5:1) para todo texto
   • Faça variação de fundos de seção (alterne entre superfícies claras/escuras)

   Não Faça

   • Não use Inter, Poppins ou sans-serif do sistema como fonte primária
   • Não use gradientes roxo-para-azul em lugar nenhum
   • Não use border-radius uniforme (>12px) em todos os elementos
   • Não use grades de ícones padrão de três colunas como segunda seção da página
   • Não centralize texto de corpo com mais de 2 linhas
   • Não use ilustrações genéricas de banco de imagens (blobs 3D, formas abstratas)

3. Regras de validação:

   • Todas as cores devem ser valores hexadecimais (#RRGGBB)
   • Tamanhos de fonte apenas em rem ou px
   • Pelo menos 5 papéis de cor, 3 padrões de componente, 3 Faça e 3 Não Faça
   • Mantenha o total abaixo de ~3000 tokens (o Stitch lê como contexto a cada geração)

4. Se o DESIGN.md já existir, pergunte antes de sobrescrever.

5. Escreva o arquivo em DESIGN.md na raiz do projeto.

6. Após escrever, verifique se existe um sistema de design do Stitch usando mcp__stitch__list_design_systems. Se o usuário tiver um projeto Stitch:

   • Ofereça-se para criar um sistema de design com mcp__stitch__create_design_system
   • Ou atualize um existente com mcp__stitch__update_design_system
   • Aplique-o ao projeto com mcp__stitch__apply_design_system para que todas as gerações futuras o respeitem

7. Próximo passo: Sugira executar /dg-generate para criar a primeira tela usando o novo sistema de design.

Consulte docs/design-md-guide.md para a especificação completa.