umairmsm/wp-design

Estágio 2: Design

Objetivo: o proprietário aprovou um visual que foi visto em um telefone e um laptop. Esse visual está escrito como tokens, para que possa se tornar um skin WordPress por meio de cópia e ser substituído posteriormente sem perder funcionalidades.

Etapas

1. Direção. Preencha docs/DESIGN_DIRECTION.md do projeto: estrela-guia, público-alvo, o que não podemos parecer (concorrentes, templates) e os pontos inegociáveis. Ofereça no máximo duas ou três direções, como pequenos mood boards ou maquetes de herói, não sites completos.
2. Protótipo em static/. HTML e CSS puros. css/tokens.css usa os mesmos nomes do skins/default/tokens.css do tema. Os componentes usam apenas tokens. Estrutura real (cabeçalho, herói, cards, formulário, rodapé), texto placeholder, sem preços e sem texto de políticas.
3. Acessibilidade desde o início:
   • contraste ≥ 4.5:1 para texto;
   • foco visível;
   • um H1;
   • um link de pular;
   • caminhos de teclado;
   • prefers-reduced-motion respeitado. Verifique o protótipo com axe (extensão do navegador) antes de mostrá-lo.
4. Revisão do proprietário. Capturas de tela de cada página nas larguras de telefone (375 px) e laptop (1440 px). Registre a data de aprovação em DESIGN_DIRECTION.md e salve as capturas em docs/design/.
5. Fontes: auto-hospede arquivos .woff2, subconjunto para os idiomas necessários, verifique a licença e pré-carregue uma ou duas faces da primeira tela (nomeie-as como *-preload.woff2). Nenhuma requisição ao Google Fonts.
6. Porte para WordPress (references/design-system.md):
   • copie os tokens para o skin;
   • mova o CSS dos componentes para skin.css;
   • organize os templates com as funções de renderização do core;
   • adicione substituições de partes do skin apenas onde a marcação precisar ser diferente. O visual muda; os contratos de dados e marcação do core permanecem.
7. Redesigns futuros são novos skins: copie skins/default para skins/<nome>, altere tokens, visualize com ?skin=<nome> (admins) e alterne com a opção <prefix>_skin após aprovação.

Portão (marque em SITE_STATUS.md)

• DESIGN_DIRECTION.md escrito; aprovação do proprietário registrada com capturas de tela
• Tokens definidos; componentes usam apenas tokens
• Fontes auto-hospedadas; 0 requisições ao Google Fonts

Lições aprendidas

• O design bloqueado mudou quando o sócio enviou seu próprio redesign. Como o visual era um skin, a troca manteve todos os recursos. Construa cada design como um skin, até o primeiro.
• Não copie a paleta, o par de tipografia ou o layout de um concorrente. Os proprietários percebem e os visitantes não se lembram de você.
• Um skin apenas de teste (dev-*) para experimentar ideias nunca aparece em produção.
• Se os skills frontend-design ou design-motion-principles estiverem instalados, use-os para direção e movimento.