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:

$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.