Stitch Design Taste — Habilidade de Sistema de Design Semântico

Quando Usar

• Use quando o usuário desejar um arquivo DESIGN.md compatível com Google Stitch ou um sistema de design semântico para geração de telas por IA.
• Use ao traduzir regras de "frontend taste" premium em descrições visuais amigáveis ao Stitch, papéis de cor, especificações de tipografia e comportamento de componentes.
• Use quando o sistema de design precisar prevenir padrões genéricos de UI de IA antes que as telas sejam geradas.

Limitações

• Esta habilidade produz orientação de sistema de design semântico para o Stitch; não garante que o Stitch renderizará todas as restrições exatamente.
• Arquivos DESIGN.md gerados ainda requerem revisão em relação ao briefing real do produto, restrições de marca, necessidades de acessibilidade e conteúdo da tela.
• Seções de movimento documentam a intenção de implementação para agentes de codificação posteriores, pois o próprio Stitch pode gerar telas estáticas.

Visão Geral

Esta habilidade gera arquivos DESIGN.md otimizados para a geração de telas do Google Stitch. Ela traduz as diretivas de engenharia de frontend "anti-slop" testadas em batalha para a linguagem de design semântico nativa do Stitch — regras descritivas em linguagem natural combinadas com valores precisos que o agente de IA do Stitch pode interpretar para produzir interfaces premium e não genéricas.

O DESIGN.md gerado serve como a única fonte de verdade para instruir o Stitch a gerar novas telas que se alinhem a uma linguagem de design curada e de alta agência. O Stitch interpreta o design através de "Descrições Visuais" apoiadas por valores de cor específicos, especificações de tipografia e comportamentos de componentes.

Pré-requisitos

• Acesso ao Google Stitch via labs.google.com/stitch
• Opcionalmente: Stitch MCP Server para integração programática com Cursor, Antigravity ou Gemini CLI

O Objetivo

Gerar um arquivo DESIGN.md que codifique:

1. Atmosfera visual — o humor, a densidade e a filosofia de design
2. Calibração de cores — neutros, acentos e padrões proibidos com códigos hexadecimais
3. Arquitetura tipográfica — pilhas de fontes, hierarquia de escala e anti-padrões
4. Comportamentos de componentes — botões, cartões, campos de entrada com estados de interação
5. Princípios de layout — sistemas de grade, filosofia de espaçamento, estratégia responsiva
6. Filosofia de movimento — especificações do motor de animação, física de mola, micro-interações perpétuas
7. Anti-padrões — lista explícita de clichês de design de IA proibidos

Instruções de Análise e Síntese

1. Definir a Atmosfera

Avalie a intenção do projeto alvo. Use adjetivos evocativos do espectro de gosto:

• Densidade: "Leve de Galeria de Arte" (1–3) → "Equilibrado de App Diário" (4–7) → "Denso de Cockpit" (8–10)
• Variância: "Previsível Simétrico" (1–3) → "Deslocado Assimétrico" (4–7) → "Caótico Artístico" (8–10)
• Movimento: "Estático Restrito" (1–3) → "CSS Fluido" (4–7) → "Coreografia Cinematográfica" (8–10)

Linha de base padrão: Variância 8, Movimento 6, Densidade 4. Adapte dinamicamente com base na descrição do "vibe" do usuário.

2. Mapear a Paleta de Cores

Para cada cor forneça: Nome Descritivo + Código Hex + Papel Funcional.

Restrições obrigatórias:

• Máximo de 1 cor de acento. Saturação abaixo de 80%
• A estética "Roxo/Azul Neon de IA" é estritamente PROIBIDA — sem brilhos de botão roxos, sem gradientes neon
• Use bases neutras absolutas (Zinco/Ardósia) com acentos singulares de alto contraste
• Mantenha uma única paleta para toda a saída — sem flutuação de cinza quente/frio
• Nunca use preto puro (#000000) — use Preto Off, Zinco-950 ou Carvão

3. Estabelecer Regras de Tipografia

• Display/Títulos: Espaçamento apertado (track-tight), escala controlada. Não gritando. Hierarquia através de peso e cor, não apenas tamanho massivo.
• Corpo: Entrelinhamento relaxado, máximo de 65 caracteres por linha.
• Seleção de Fontes: Inter é PROIBIDO para contextos premium/criativos. Forçar caráter único: Geist, Outfit, Cabinet Grotesk ou Satoshi.
• Proibição de Serif: Fontes serifadas genéricas (Times New Roman, Georgia, Garamond, Palatino) são PROIBIDAS. Se serif for necessário para contextos editoriais/criativos, use apenas serifs modernas distintas: Fraunces, Gambarino, Editorial New ou Instrument Serif. Serif é sempre PROIBIDO em dashboards ou UIs de software.
• Restrição de Dashboard: Use pares Sans-Serif exclusivamente (Geist + Geist Mono ou Satoshi + JetBrains Mono).
• Sobrescrita de Alta Densidade: Quando a densidade exceder 7, todos os números devem usar Monospace.

4. Definir a Seção Hero

O Hero é a primeira impressão e deve ser criativo, marcante e nunca genérico:

…