Skill Aula Wireframe

Skill Aula Wireframe

Converta a copy aprovada em uma página funcional de baixa fidelidade. O wireframe deve permitir avaliar ordem, hierarquia, largura, ritmo, colunas, componentes e navegação sem distrair com identidade visual.

Preparação obrigatória

1. Leia references/contrato-projeto.md.
2. Leia .aula-site/briefing.md, .aula-site/copy.md e .aula-site/status.json.
3. Se copy.md não existir ou não explicar produto, público, ação primária e seções, pare sem inventar conteúdo e encaminhe para $skill-aula-copy.
4. Leia references/ambiente-react-vite.md e verifique a pasta antes de criar o projeto.
5. Marque wireframe como in_progress.

Ambiente e scaffold

Se ainda não houver projeto React + Vite:

1. verifique Node.js e npm;
2. trate ausência ou versão incompatível conforme a referência;
3. confirme que a pasta está segura para scaffold;
4. execute, sem pedir que o aluno digite comandos:

npm create vite@latest . -- --template react --no-interactive
npm install

Não execute scaffold por cima de um projeto existente. Em projeto já criado, preserve o package manager, os scripts e os arquivos funcionais.

Planejamento do wireframe

Leia references/estrutura-wireframe.md e crie .aula-site/wireframe.md antes de alterar o visual. Registre:

• ordem e id de cada seção;
• função da seção na decisão do visitante;
• conteúdo vindo de copy.md;
• estrutura de desktop e colapso mobile;
• componente ou padrão escolhido;
• CTA e âncora;
• slot de imagem com proporção e descrição, quando necessário;
• pontos ainda pendentes.

Faça perguntas somente quando duas estruturas plausíveis mudarem materialmente a leitura. Para um iniciante, apresente no máximo duas opções concretas e uma recomendação curta.

Implementação

Crie uma página realmente executável em React com CSS nativo e poucas dependências.

Estrutura recomendada

src/
  components/
    Header.jsx
    WhatsAppButton.jsx
  sections/
    Hero.jsx
    ...uma seção por responsabilidade...
  data/
    pageContent.js
  styles/
    tokens.css
    global.css
  App.jsx
  main.jsx

Adapte a quantidade de arquivos ao tamanho real da página. Não crie abstrações vazias.

Regras de baixa fidelidade

• Paleta exclusiva de branco, preto e cinzas neutros.
• Uma fonte de sistema neutra; não escolha tipografia de marca.
• Sem gradientes, texturas, sombras decorativas, glassmorphism ou animações cenográficas.
• Imagens ainda não geradas viram blocos cinza identificados, com proporção reservada e texto [GERAR IMAGEM: ...].
• Diferencie hierarquia por tamanho, peso, alinhamento, largura e espaço, não por cor de marca.
• Use componentes semanticamente adequados: header, nav, main, section, footer, botões e links reais.
• Use um único h1 e uma ordem de headings coerente.
• Todos os links de navegação apontam para ids existentes.
• O CTA principal usa o rótulo e o destino definidos na copy.
• Crie o botão fixo de WhatsApp somente com número real aprovado. Se faltar, renderize um placeholder visual não clicável e registre a pendência crítica.
• Todo layout de várias colunas tem comportamento mobile explícito abaixo de 768 px.
• Não use texto lorem ipsum nem reduza a copy para caber.

Verificação

1. Execute npm run build.
2. Execute npm run lint quando o script existir; corrija erros, não force supressões.
3. Inicie o servidor local e informe a URL.
4. Inspecione, quando as ferramentas permitirem, aproximadamente em 390 px, 768 px e 1440 px.
5. Corrija overflow horizontal, headings quebrados, CTA escondido, navegação sem destino e blocos que se sobrepõem.
6. Não aplique o design final mesmo que o wireframe pareça “simples demais”. Essa separação é intencional.

Entrega

Atualize .aula-site/wireframe.md com arquivos implementados e decisões finais. Marque wireframe como complete, current_stage como design_direction e next_action como:

$skill-aula-design Proponha três direções visuais distintas para este wireframe.

Encerre com a URL local, os arquivos alterados e qualquer pendência factual. Não explique código ao aluno salvo se ele perguntar.