leonxlnx/taste-skill

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

Visão Geral

Este skill gera arquivos DESIGN.md otimizados para a geração de telas do Google Stitch. Ele traduz as diretrizes de engenharia frontend testadas em batalha contra design "slop" 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 fonte única de verdade para instruir o Stitch a gerar novas telas alinhadas a uma linguagem de design curada e de alta agência. O Stitch interpreta o design por meio de "Descrições Visuais" apoiadas por valores de cores específicos, especificações tipográficas e comportamentos de componentes.

Pré-requisitos

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

O Objetivo

Gerar um arquivo DESIGN.md que codifique:

1. Atmosfera visual — o clima, a densidade e a filosofia de design
2. Calibragem de cores — neutros, acentos e padrões banidos com códigos hexadecimais
3. Arquitetura tipográfica — stacks de fontes, hierarquia de escala e antipadrões
4. Comportamentos de componentes — botões, cartões, inputs 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 spring, microinterações perpétuas
7. Antipadrões — lista explícita de clichês de design de IA banidos

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

1. Defina a Atmosfera

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

• Densidade: "Aéreo como Galeria de Arte" (1–3) → "Equilibrado como App Diário" (4–7) → "Denso como Cabine de Controle" (8–10)
• Variação: "Simétrico Previsível" (1–3) → "Assimétrico Deslocado" (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: Variação 8, Movimento 6, Densidade 4. Adapte dinamicamente com base na descrição do clima do usuário.

2. Mapeie a Paleta de Cores

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

Restrições obrigatórias:

• Máximo 1 cor de acento. Saturação abaixo de 80%
• A estética "Roxo/Azul Neon de IA" é ESTRITAMENTE BANIDA — sem brilhos roxos em botões, sem gradientes neon
• Use bases neutras absolutas (Zinc/Slate) com acentos únicos de alto contraste
• Mantenha uma única paleta para toda a saída — sem flutuação entre cinzas quentes e frios
• Nunca use preto puro (#000000) — use Preto Suave, Zinc-950 ou Carvão

3. Estabeleça Regras Tipográficas

• Títulos/Manchetes: Track apertado, escala controlada. Sem gritaria. Hierarquia através de peso e cor, não apenas tamanho enorme
• Corpo: Entrelinha relaxada, máximo 65 caracteres por linha
• Seleção de Fonte: Inter é BANIDA para contextos premium/criativos. Force caracteres únicos: Geist, Outfit, Cabinet Grotesk ou Satoshi
• Proibição de Serifa: Fontes serifadas genéricas (Times New Roman, Georgia, Garamond, Palatino) são BANIDAS. Se for necessária serifa para contextos editoriais/criativos, use apenas serifas modernas distintas: Fraunces, Gambarino, Editorial New ou Instrument Serif. Serifa é sempre BANIDA em dashboards ou UIs de software
• Restrição para Dashboards: 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 Monoespaçada

4. Defina a Seção Hero

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

• Tipografia com Imagem Inline: Incorpore fotos ou visuais pequenos e contextuais diretamente entre palavras ou letras no título. As imagens ficam inline na altura do tipo, arredondadas, agindo 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 BANIDOS. O conteúdo deve atrair os usuários naturalmente
• Estrutura Assimétrica: Layouts de Hero centralizados são BANIDOS quando a variação excede 4
• Restrição de CTA: No máximo um CTA primário. Sem links secundários "Saiba mais"

5. Descreva Estilos de Componentes

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

• Botões: Feedback tátil de pressionamento no estado ativo. Sem brilhos externos neon. Sem cursores de mouse personalizados
• Cartões: Use SOMENTE quando a elevação comunica hierarquia. Tingir sombras com o tom do fundo. Para layouts de alta densidade, substitua cartões por divisores de borda superior ou espaço negativo
• Inputs/Formulários: Rótulo acima do input, texto de ajuda opcional, texto de erro abaixo. Espaçamento padrão
• Estados de Carregamento: Esqueletos de carregamento correspondendo às dimensões do layout — sem spinners circulares genéricos
• Estados Vazios: Composições elaboradas indicando como popular os dados
• Estados de Erro: Relatório de erro inline claro

6. Defina Princípios de Layout

• Sem elementos sobrepostos — cada elemento ocupa sua própria zona espacial clara. Sem empilhamento de conteúdo com posicionamento absoluto
• Seções Hero centralizadas são BANIDAS quando a variação excede 4 — force Tela Dividida, Alinhado à Esquerda ou Espaço em Branco Assimétrico
• A fileira genérica de "3 cartões iguais horizontalmente" é BANIDA — use grade 2 colunas em Zigue-Zague, grade assimétrica ou rolagem horizontal
• CSS Grid em vez de matemática Flexbox — nunca use truques de porcentagem com calc()
• Contenha layouts usando restrições de largura máxima (ex.: 1400px centralizado)
• Seções de altura total devem usar min-h-[100dvh] — nunca h-screen (salto catastrófico no iOS Safari)

7. Defina Regras Responsivas

Todo design deve funcionar em todas as viewports:

• Colapso Mobile-First (< 768px): Todos os layouts com várias colunas colapsam para uma única coluna. Sem exceções
• Sem Rolagem Horizontal: Rolagem horizontal no mobile é uma falha crítica
• Escalonamento Tipográfico: Títulos escalam via clamp(). Texto do corpo mínimo 1rem/14px
• Alvos de Toque: Todos os elementos interativos com alvo de toque mínimo de 44px
• Comportamento de Imagem: Imagens tipográficas inline (fotos entre palavras) empilham abaixo do título no mobile
• Navegação: Navegação horizontal no desktop colapsa para um menu mobile limpo
• Espaçamento: Lacunas de seções verticais reduzem proporcionalmente (clamp(3rem, 8vw, 6rem))

8. Codifique a Filosofia de Movimento

• Padrão de Física Spring: stiffness: 100, damping: 20 — sensação premium e com peso. Sem easing linear
• Microinterações Perpétuas: Cada componente ativo deve ter um estado de loop infinito (Pulse, Typewriter, Float, Shimmer)
• Orquestração Escalonada: Nunca monte listas instantaneamente — use atrasos em cascata para revelações em cascata
• Desempenho: Anime exclusivamente via transform e opacity. Nunca anime top, left, width, height. Filtros de granulado/ruído apenas em pseudo-elementos fixos

9. Liste Antipadrões (Marcas de IA)

Codifique estes como regras explícitas "NUNCA FAÇA" no DESIGN.md:

• Sem emojis em lugar nenhum
• Sem fonte Inter
• Sem fontes serifadas genéricas (Times New Roman, Georgia, Garamond) — apenas serifas modernas distintas, se necessário
• Sem preto puro (#000000)
• Sem sombras neon/brilho externo
• Sem acentos supersaturados
• Sem texto gradiente excessivo em cabeçalhos grandes
• Sem cursores de mouse personalizados
• Sem elementos sobrepostos — separação espacial limpa sempre
• Sem layouts de 3 colunas iguais em cartões
• Sem nomes genéricos ("João Ninguém", "Acme", "Nexus")
• Sem números redondos falsos (99,99%, 50%)
• Sem clichês de copywriting de IA ("Eleve", "Perfeito", "Desperte", "Próxima Geração")
• Sem texto de UI de preenchimento: "Role para explorar", "Deslize para baixo", setas de rolagem, chevrons saltitantes
• Sem links quebrados do Unsplash — use picsum.photos ou avatares SVG
• Sem seções Hero centralizadas (para projetos de alta variação)

Formato de Saída (Estrutura do DESIGN.md)

# Sistema de Design: [Título do Projeto]

## 1. Tema Visual e Atmosfera
(Descrição evocativa do clima, densidade, variação e intensidade de movimento.
Exemplo: "Uma interface contida e aérea como galeria de arte com layouts assimétricos
confiantes e movimento fluido com física spring. A atmosfera é clínica porém
acolhedora — como um estúdio de arquitetura bem iluminado.")

## 2. Paleta de Cores e Funções
- **Branco Tela** (#F9FAFB) — Superfície de fundo primária
- **Superfície Pura** (#FFFFFF) — Preenchimento de cartões e containers
- **Tinta Carvão** (#18181B) — Texto primário, profundidade Zinc-950
- **Aço Suave** (#71717A) — Texto secundário, descrições, metadados
- **Borda Sussurro** (rgba(226,232,240,0.5)) — Bordas de cartões, linhas estruturais de 1px
- **[Nome do Acento]** (#XXXXXX) — Único acento para CTAs, estados ativos, anéis de foco
(Máximo 1 acento. Saturação < 80%. Sem roxo/neon.)

## 3. Regras Tipográficas
- **Títulos:** [Nome da Fonte] — Track apertado, escala controlada, hierarquia conduzida por peso
- **Corpo:** [Nome da Fonte] — Entrelinha relaxada, 65ch de largura máxima, cor secundária neutra
- **Mono:** [Nome da Fonte] — Para código, metadados, timestamps, números em alta densidade
- **Banidos:** Inter, fontes de sistema genéricas para contextos premium. Fontes serifadas banidas em dashboards.

## 4. Estilos de Componentes
* **Botões:** Planos, sem brilho externo. Translação tátil de -1px no ativo. Preenchimento com acento para primário, ghost/outline para secundário.
* **Cartões:** Cantos generosamente arredondados (2,5rem). Sombra sussurro difusa. Usados apenas quando a elevação serve à hierarquia. Alta densidade: substituir por divisores de borda superior.
* **Inputs:** Rótulo acima, erro abaixo. Anel de foco na cor de acento. Sem rótulos flutuantes.
* **Carregadores:** Brilho esquelético correspondendo às dimensões exatas do layout. Sem spinners circulares.
* **Estados Vazios:** Composições elaboradas e ilustradas — não apenas texto "Sem dados".

## 5. Princípios de Layout
(Arquitetura responsiva baseada em grade. Divisões assimétricas para seções Hero.
Colapso estrito para coluna única abaixo de 768px. Contenção de largura máxima.
Sem matemática de porcentagem com flexbox. Preenchimento interno generoso.)

## 6. Movimento e Interação
(Física spring para todos os elementos interativos. Revelações em cascata escalonadas.
Micro-loops perpétuos em componentes ativos de dashboard. Apenas transformações
aceleradas por hardware. Componentes de Cliente Isolados para animações pesadas de CPU.)

## 7. Antipadrões (Banidos)
(Lista explícita de padrões proibidos: sem emojis, sem Inter, sem preto puro,
sem brilhos neon, sem grades de 3 colunas iguais, sem clichês de copywriting de IA,
sem nomes de placeholder genéricos, sem links de imagem quebrados.)

Melhores Práticas

• Seja Descritivo: "Tinta Carvão Profunda (#18181B)" — não apenas "texto escuro"
• Seja Funcional: Explique para que cada elemento é usado
• Seja Consistente: Mesma terminologia em todo o documento
• Seja Preciso: Inclua códigos hex exatos, valores rem, valores de pixel entre parênteses
• Seja Opinativo: Este não é um modelo neutro — ele impõe uma estética premium específica

Dicas para o Sucesso

1. Comece pela atmosfera — entenda o clima antes de detalhar os tokens
2. Procure padrões — identifique espaçamento, tamanhos e estilos consistentes
3. Pense semanticamente — nomeie cores pela função, não apenas pela aparência
4. Considere a hierarquia — documente como o peso visual comunica importância
5. Codifique as proibições — antipadrões são tão importantes quanto as próprias regras

Armadilhas Comuns a Evitar

• Usar jargão técnico sem tradução ("rounded-xl" em vez de "cantos generosamente arredondados")
• Omitir códigos hex ou usar apenas nomes descritivos
• Esquecer as funções funcionais dos elementos de design
• Ser muito vago nas descrições da atmosfera
• Ignorar a lista de antipadrões — são eles que tornam a saída premium
• Padronizar para designs genéricos "seguros" em vez de impor a estética curada