# Skill Aula Design > Lê copy e wireframe, propõe exatamente três direções visuais distintas e, somente após escolha explícita, aplica a direção selecionada ao React + Vite. Use somente quando o usuário invocar $skill-aula-design. Não gera imagens raster nem reescreve fatos da oferta. - Skill: `nitroxinteligence/skill-aula-design` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add nitroxinteligence/skill-aula-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/nitroxinteligence/skill-aula-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: nitroxinteligence (https://skillmd.com/u/nitroxinteligence) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/nitroxinteligence/skill-aula-design --- # Skill Aula Design Conduza a decisão visual antes de tocar no código. O resultado deve parecer específico ao produto, não um template genérico feito por IA. ## Modos - **Propor**: padrão quando não há direção aprovada. Pesquisa o contexto, faz uma entrevista curta, cria três opções e para para escolha. - **Aplicar**: somente quando o usuário disser explicitamente qual direção escolheu ou pedir a aplicação de uma direção já registrada. - **Revisar direção**: ajusta `DESIGN.md` sem alterar o código quando o usuário ainda está decidindo. Nunca misture propor e aplicar na mesma passagem sem escolha explícita. ## Preparação 1. Leia `references/contrato-projeto.md`. 2. Leia `.aula-site/briefing.md`, `.aula-site/copy.md`, `.aula-site/wireframe.md`, `.aula-site/status.json`, o código atual e qualquer `DESIGN.md` existente. 3. Confirme que o wireframe está funcional. Se não estiver, não esconda o problema com decoração: encaminhe para `$skill-aula-wireframe`. 4. Inventarie logo, cores, fontes, screenshots, referências e ativos existentes. Ativos fornecidos são restrições, não sugestões descartáveis. 5. Marque `design_direction` como `in_progress` no modo Propor ou `design_application` como `in_progress` no modo Aplicar. ## Modo Propor Leia `references/direcoes-visuais.md`. Se o usuário ainda não informou referências nem preferência, faça uma única rodada com no máximo cinco perguntas curtas: 1. você quer enviar referências, descrever com adjetivos ou deixar a skill decidir? 2. quais 3 a 5 atributos a página deve transmitir? 3. o que ela não pode parecer? Use 2 ou 3 anti-referências. 4. há logo, cor ou fonte obrigatória? 5. a experiência deve ser clara e contida, expressiva, ou algo entre as duas? Não pergunte sobre CSS, framework ou detalhes técnicos ao iniciante. Crie **exatamente três direções** de igual profundidade. Nenhuma pode ser rotulada como “segura”, “melhor” ou “recomendada” por padrão. Elas devem diferir em pelo menos três destes eixos: - tipografia; - estratégia de cor; - composição e ritmo; - forma, borda e profundidade; - imagem e movimento. Para cada direção, registre: - nome memorável e tese em uma frase; - cena física de uso: quem vê, onde, em qual luz e humor; - adequação ao público e ao produto; - paleta semântica com pares de contraste; - tipografia com fallback e justificativa; - grid, largura, espaçamento e ritmo; - linguagem de componentes e estados; - tratamento de imagens; - movimento leve e um gesto assinatura; - mudanças previstas em cada seção; - riscos ou limites honestos. Salve as três opções em `.aula-site/design.md`, marque `design_direction` como `awaiting_user` e pare. Não altere `src/`, `public/`, `index.html` nem dependências. ## Modo Aplicar 1. Confirme que a direção existe em `.aula-site/design.md` e que a escolha é inequívoca. 2. Leia `references/design-md-e-aplicacao.md` e `references/anti-ai-generico.md`. 3. Crie ou atualize `DESIGN.md` na raiz como fonte de verdade do sistema visual. Preserve decisões anteriores que continuem válidas e registre a substituição de qualquer decisão existente. 4. Aplique tokens semânticos em CSS custom properties, incluindo fundo, superfície, texto, texto secundário, destaque, texto sobre destaque, borda, foco e erro. 5. Aplique tipografia, layout, forma, estados, imagem, movimento e responsividade sem mudar o significado da copy. 6. Não introduza Tailwind, Next.js, GSAP, UI kit ou biblioteca de animação se o projeto não precisa. Prefira CSS nativo e a estrutura React já existente. 7. Use imagens existentes e placeholders reservados. Não gere imagens nesta skill. 8. Mantenha conteúdo visível por padrão; animações apenas enriquecem. Respeite `prefers-reduced-motion`. 9. Garanta foco visível, controles legíveis, contraste e alvos adequados. 10. Preserve âncoras, CTA principal, navegação e botão de WhatsApp. ## Gate de qualidade Antes de concluir: - compare o resultado com a direção escolhida, não apenas com “um site bonito”; - revise aproximadamente em 390 px, 768 px e 1440 px; - garanta que o hero caiba de forma útil na primeira viewport e o CTA apareça; - elimine overflow horizontal e texto que invade containers; - verifique contraste mínimo de 4.5:1 para texto comum e 3:1 para texto grande e elementos de interface; - verifique o botão de WhatsApp no teclado e em telas com safe area; - conte padrões repetidos: a página não pode ser uma sequência de seções idênticas; - remova clichês de IA que não vieram do briefing; - execute `npm run build` e `npm run lint` quando disponível. Se o resultado visual não puder ser inspecionado com browser ou screenshot, declare essa limitação em vez de fingir validação visual. ## Entrega Atualize `.aula-site/design.md` com a escolha, arquivos alterados, decisões e pendências de imagem. Marque `design_direction` e `design_application` como `complete`, `current_stage` como `images` ou `integration`, e use como próximo comando: ```text $skill-aula-imagens Crie a imagem necessária para a seção [nome], seguindo o DESIGN.md. ``` Se nenhuma imagem for necessária, encaminhe diretamente para `$skill-aula-site-completo continuar e integrar`.