Claude Design Principles
Núcleo: Bom design não é adivinhado do zero — ele cresce a partir do contexto existente. Esta skill comprime o julgamento do Claude Design em um checklist executável.
🚦 Quando acionar (leitura obrigatória)
Se a tarefa se enquadrar em qualquer uma das categorias abaixo, carregue as três regras rígidas desta skill antes de começar:
- Páginas web, landing pages, bibliotecas de componentes
- Slides, apresentações, relatórios
- Protótipos de App / site, demos interativas
- Pôsteres, layouts visuais, infográficos
- Materiais de marca, cartões, logotipos
- Qualquer saída HTML/SVG que precise "não parecer gerada por IA"
Palavras-chave: design, UI, mockup, protótipo, slide, deck, poster, landing, wireframe, mock, interface, página, apresentação
⛔ Três regras rígidas (violação = falha)
Regra 1: Coletar contexto antes de projetar
Não existe "eu tenho uma boa ideia na cabeça e vou sair fazendo". Antes de começar, obtenha pelo menos um dos seguintes:
- Arquivo de UI kit / design system existente
- Tokens de marca (paleta de cores, font stack, espaçamento, cantos arredondados)
- Capturas de tela de sites/produtos de referência
- Componentes existentes na base de código
- Documento de descrição de marca (ex.: manual da marca Equation)
Sem nenhum dos itens acima → pergunte para Jane primeiro, ou determine juntos uma "âncora de DNA visual" (ex.: "como a Aesop, com off-white + serifa + espaçamento generoso").
Mock do zero é último recurso; se acontecer, produzirá AI slop genérico.
Regra 2: Fornecer ao menos 3 soluções, do básico ao vanguardista
Não é permitido fornecer apenas uma solução. A cada saída, entregue:
- Opção A (padrão) — Siga rigorosamente o design system existente, sem riscos
- Opção B (avançada) — Adicione pequenas variações ao sistema (cor, layout, ritmo tipográfico)
- Opção C (vanguardista) — Permita sair do sistema, experimente novas metáforas, layouts inovadores, tipografia ousada
Apresente-as como slides / abas / cartões lado a lado para que Jane possa misturar e combinar.
Regra 3: Lista negra completa de AI Slop
Estes padrões são reconhecíveis como gerados por IA e são proibidos (lista completa em ai-slop-avoid.md):
- ❌ Gradientes grandes no fundo (roxo-azul, rosa-laranja, etc.)
- ❌ Container com cantos arredondados + bloco de cor de 4px à esquerda
- ❌ Ilustrações desenhadas em SVG
- ❌ Inter / Roboto / Arial / Fraunces / fontes do sistema
- ❌ Acúmulo de emojis (a menos que a marca use explicitamente)
- ❌ Dados, ícones, estatísticas para preencher espaço
- ❌ Depoimentos de "usuários" fictícios, retratos placeholder
- ❌ "Marcas de confiança" / logotipos de clientes em cada seção
📐 Processo de execução (7 etapas)
1. Ler requisito → Identificar se aciona esta skill
2. Coletar contexto → Obter UI kit / ativos de marca / referências; se não houver, pergunte para Jane
3. Lista de perguntas → Usar `question-templates.md` para fazer pelo menos 10 perguntas
4. Definir sistema visual → Explicar oralmente/por escrito: "Usarei fonte X + paleta Y + ritmo de layout Z"
5. Construir múltiplas soluções → Pelo menos 3 variações, expostas como abas/ajustes/slides
6. Auto-verificação → Passar pela lista de `ai-slop-avoid.md`
7. Entrega → Abrir o arquivo para Jane + `open -R` para abrir o Finder
🎛️ Modo de ajustes em tempo real (Tweaks) — opcional, mas recomendado
Na saída HTML, deixe um bloco de configuração JSON marcado:
<script>
const TWEAKS = /*EDITMODE-BEGIN*/{
"primaryColor": "#D97757",
"fontSize": 16,
"radius": 8,
"dark": false
}/*EDITMODE-END*/;
</script>
Propósito: Para mudanças futuras de cor/tamanho, posso substituir precisamente este JSON sem vasculhar todo o HTML. Jane também pode editar manualmente e atualizar a pré-visualização. Template completo em starter-components/tweaks-block.html.
📊 Métricas rígidas (não negociáveis)
| Meio | Tamanho mínimo da fonte | Alvo de toque mínimo |
|---|---|---|
| Slide 1920×1080 | 24px | — |
| Documento impresso | 12pt | — |
| Mockup mobile | 14px | 44px |
| Corpo de texto web desktop | 16px | — |
🔧 Skills complementares do ecossistema PAI (para execução)
Esta skill resolve apenas o "julgamento de design". Para a execução prática, combine com:
| Necessidade | O que usar |
|---|---|
| Referência de direção visual (50 estilos / 21 paletas) | ui-ux-pro-max |
| Qualidade de código de estrutura/componente frontend | frontend-design:frontend-design |
| Iniciar servidor de desenvolvimento + verificar no navegador | webapp-testing / Browser MCP |
| HTML → PPTX | pptx / nano-ppt-generator |
| Ilustração / ícone placeholder real | nano-image-generator-skill / Art |
| Estrutura de slide em HTML | ppt / html-ppt-designer |
📎 Anexos (expansão v1.1.0)
📚 Documentos de regras (carregue conforme o cenário)
| Arquivo | Quando ler |
|---|---|
ai-slop-avoid.md | Antes de cada design — 25 anti-padrões + alternativas |
question-templates.md | No início da tarefa, quando precisar listar perguntas para Jane |
typography-system.md | Ao decidir tamanho de fonte, peso, altura de linha, combinação de fontes |
color-system.md | Ao escolher paleta, verificar contraste WCAG, ajustar oklch |
spacing-rhythm.md | Ao decidir espaçamento, cantos arredondados, sombras, alinhamento |
design-heuristics.md | Quando o layout não parece certo e você não sabe por quê — referência a Gestalt/Fitts/Hick |
🧩 Componentes iniciais (scaffold para copiar e colar)
| Arquivo | Propósito |
|---|---|
starter-components/deck-stage.html | Palco de slides (1920×1080 + navegação por teclado + escala adaptativa) |
starter-components/design-canvas.html | Canvas lado a lado para múltiplas soluções (padrão/avançada/vanguardista) |
starter-components/tweaks-block.html | Template de ajustes em tempo real + protocolo postMessage |
starter-components/ios-frame.html | Moldura de iPhone 16 Pro + barra de status + Home Indicator |
starter-components/browser-window.html | Janela de navegador (estilo Safari/macOS + barra de abas) |
starter-components/animations.html | Motor de animação de linha do tempo (Stage + Sprite + 50 linhas de código) |
🧭 Árvore de decisão: o que ler primeiro ao receber uma tarefa?
Recebeu uma tarefa de design
↓
Leitura obrigatória: SKILL.md (este arquivo) — três regras rígidas
↓
┌───────────────────────────────────────────┐
│ Tipo de tarefa → Leia o subarquivo │
├───────────────────────────────────────────┤
│ Antes de escrever código → ai-slop-avoid │
│ Precisa perguntar para Jane → question-templates │
│ Definir fonte → typography-system │
│ Escolher paleta de cores → color-system │
│ Definir espaçamento/cantos arredondados → spacing-rhythm │
│ Fazer página web desktop → browser-window │
│ Fazer App/mobile → ios-frame │
│ Fazer PPT/Deck → deck-stage │
│ Mostrar múltiplas soluções → design-canvas │
│ Precisa de animação interativa → animations │
│ Precisa de ajustes em tempo real → tweaks-block │
│ Algo parece errado mas não sabe o quê → design-heuristics │
└───────────────────────────────────────────┘
💬 Mensagem para meu eu futuro
90% das falhas de design não vêm de falta de estética, mas de não ter perguntado o suficiente + contexto insuficiente + ter fornecido apenas uma solução.
Trate esta skill como um checklist. Passe por cada etapa. Não confunda "entregar rápido" com "bom design".