Quando Usar

Use sempre que estiver construindo ou estilizando interfaces web — componentes, páginas, dashboards, landing pages, layouts React/Vue/HTML-CSS — ou sempre que o usuário pedir para deixar algo "mais bonito/legal", corrigir espaçamento/layout, ou mencionar estilo, cor, tipografia, fontes, design responsivo, polimento ou estética, mesmo sem a palavra "design".

Fonte: connerkward/ckw-design-skill (MIT).

Design (entrada)

Use esta habilidade quando o usuário pedir para construir ou estilizar interfaces web: componentes, páginas, dashboards, landing pages, layouts React/Vue/HTML-CSS, ou qualquer interface frontend. Objetivo: um resultado distinto, pronto para produção, que evite estéticas genéricas de IA.

Antes de declarar qualquer design como "pronto": renderize-o e peça a um juiz separado para criticar a imagem (não o código, não autoavaliação) — veja design-spatial §1. A geração cega não consegue ver suas próprias colisões; isso se aplica a todo resultado de design, não apenas ao trabalho espacial.

PORTÃO OBRIGATÓRIO DE HORIZONTAL-OVERFLOW — executa antes de QUALQUER interface web ser "concluída". Meça document.documentElement.scrollWidth - document.documentElement.clientWidth em uma largura estreita (~390px e ~1024px), nesta vez, e confirme que está 0. Este bug é invisível em largura de desktop e reaparece toda vez que uma linha (cabeçalho, navegação, barra de ferramentas) ganha um item, então ele é entregue repetidamente. Use como padrão flex-wrap:wrap em linhas de cabeçalho/barra de ferramentas + body{overflow-x:clip}, e re-meça após adicionar qualquer elemento a uma linha horizontal. Procedimento completo + casos de recorrência: design-spatial §4. Se você não mediu em largura estreita, você não terminou — não reivindique isso.

Sub-habilidades (carregar quando relevante)

• design-thinking — Carregue para toda tarefa de design. Define propósito, tom, domínio, paleta de cores, barra de revisão e lente interdomínio (cinema, arquitetura, marketing, UX, automotivo, design industrial). Veja design-thinking/SKILL.md.
• design-system — Carregue ao implementar: tokens, tipografia, movimento, semântica de cores, fundos. Use ao construir componentes, páginas ou sistemas de design. Veja design-system/SKILL.md.
• design-spatial — Carregue ao compor layout: grade explícita + restrições de espaçamento de 8 pontos, peso visual/equilíbrio/alinhamento, e um loop de visão de renderizar-depois-criticar. A correção para "entendimento espacial está errado" — layout gerado que é um borrão centralizado, desalinhado ou quebra em algumas larguras. Veja design-spatial/SKILL.md.
• design-ux — Carregue ao auditar USABILIDADE (não apenas aparência): uma UI que "parece errada"/"é um saco de usar", é difícil de aprender, precisa de uma parede de instruções, ou qualquer ferramenta/editor/aplicativo interativo antes de ser entregue. Pontua a UI renderizada contra as 10 heurísticas de Nielsen + interações através de um juiz SEPARADO com olhos frescos → lista de correções priorizadas. Usabilidade ≠ estética. Veja design-ux/SKILL.md.
• design-philosophy — Carregue para trabalhos de alto conceito, campanhas, ou quando o usuário pedir uma filosofia visual, manifesto, ou estética inconfundível de arte. Veja design-philosophy/SKILL.md.

Ativos visuais — gerar ou obter

Quando design-thinking identificar a necessidade de ativos visuais (logos, ícones, imagens de destaque, texturas, fundos):

1. Gerar → use um modelo ou API de geração de imagem para ativos sintéticos/de marca.
2. Obter um real/de arquivo → busca de imagens gratuitas de estoque ou de arquivo, muitas vezes mais barato e autêntico do que gerar.
3. Use a saída de design-thinking (tom, domínio, paleta de cores) para criar prompts/consultas.
4. Avalie contra a filosofia de design, refine, integre na construção.

Trabalho assistido por LLM — sempre anote modelo + custo

Quando o trabalho de design envolver a execução de um LLM (ativos generativos, análise VLM, crítica de layout, geração de prompt, etc.):

• Antes de executar: declare qual modelo será usado e o custo estimado (ex: "gpt-4o-mini · ~$0.005/imagem" ou "FLUX v1 · ~$0.006 por geração").

…