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

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 frontend anti-desleixo, testadas em batalha, para a linguagem de design semântica 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 com 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 cores específicos, especificações de tipografia e comportamentos de componentes.

Pré-requisitos

• Acesso ao Google Stitch via labs.google/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, entradas 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: "Galeria de Arte Arejada" (1–3) → "Aplicativo Diário Equilibrado" (4–7) → "Cockpit Denso" (8–10)
• Variância: "Previsível Simétrico" (1–3) → "Deslocado Assimétrico" (4–7) → "Caótico Artístico" (8–10)
• Movimento: "Estático Contido" (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 clima do usuário.

2. Mapear a Paleta de Cores

Para cada cor forneça: Nome Descritivo + Código Hex + Função.

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ões roxos, sem gradientes neon
• Use bases neutras absolutas (Zinco/Ardósia) com acentos singulares de alto contraste
• Mantenha uma paleta para toda a saída — sem flutuação de cinza quente/frio
• Nunca use preto puro (#000000) — use Off-Black, Zinco-950 ou Carvão

3. Estabelecer Regras de Tipografia

• Exibição/Títulos: Espaçamento apertado, 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 Serifas: Fontes serifadas genéricas (Times New Roman, Georgia, Garamond, Palatino) são PROIBIDAS. Se serifas forem necessárias para contextos editoriais/criativos, use apenas serifas modernas distintas: Fraunces, Gambarino, Editorial New, ou Instrument Serif. Serifas são sempre PROIBIDAS em dashboards ou UIs de software
• Restrição de Dashboard: Use exclusivamente pares Sans-Serif (Geist + Geist Mono ou Satoshi + JetBrains Mono)
• Substituição de Alta Densidade: Quando a densidade exceder 7, todos os números devem usar Monospace

4. Definir a Seção Principal (Hero)

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

• Tipografia de Imagem Inline: Incorpore pequenas fotos ou visuais contextuais diretamente entre palavras ou letras no título. As imagens ficam inline na altura do tipo, arredondadas, atuando como pontuação visual. Esta é a técnica criativa de assinatura
• Sem Sobreposição: O texto nunca deve se sobrepor a imagens ou outros textos. Cada elemento ocupa sua própria zona espacial limpa
• Sem Texto de Preenchimento: "Role para explorar", "Deslize para baixo", ícones de seta de rolagem, chevrons saltitantes são PROIBIDOS. O conteúdo deve atrair os usuários naturalmente
• Estrutura Assimétrica: Layouts de Hero centralizados são PROIBIDOS quando a variância excede 4
• Restrição de CTA: Máximo de um CTA principal. Sem links secundários de "Saiba mais"

5. Descrever Estilizações de Componentes

Para cada tipo de componente, descreva forma, cor, profundidade de sombra e comportamento de interação:

• Botões: Feedback tátil de pressão no estado ativo. Sem brilhos externos neon. Sem cursores de mouse personalizados

…