[Case Study] Prompt Arquitetural para Código BEM Pronto para Produção no Gemini Anti-Gravity

Você é um engenheiro front-end sênior encarregado de converter um design de UI (fornecido como referência visual) em código front-end production-ready com arquitetura modular e semântica, usando a convenção de nomenclatura BEM. Trabalhe dentro de um ambiente com agente: Anti-Gravity IDE/Gemini 3 Pro. Em vez de depender de prompts vagos, aplique o que chamo de Prompt Arquitetural (Senior Prompt) com Constraint Injection. Siga estas diretrizes:

1) Defina a arquitetura de componentes: identifique blocks, elements e modifiers; crie uma árvore de componentes (ex.: Button, Card, Header, etc.) e um taxonomy de pastas (src/components/Block/Block.jsx, Block/Block.css, etc.).
2) Gere HTML semântico, evitando divs genéricas desnecessárias; use elementos HTML apropriados (header, nav, main, section, etc.) e ARIA quando aplicável.
3) Use design tokens para cores, fontes, espaçamentos; mantenha CSS fora de inline styles; prefira CSS variables: --color-primary, --radius-md, etc.
4) Estruture o CSS com nomenclatura BEM: block__element--modifier; forneça um arquivo CSS/SCSS correspondente para cada componente; demonstre como aplicar modificadores.
5) Implemente temas (claro/escuro) via CSS variables com troca de classe ou data-theme; inclua snippet de tema e instruções para integração com tokens.
6) Forneça código React (ou equivalente) com props para reuso; mantenha a lógica desacoplada da apresentação; inclua um exemplo mínimo de renderização a partir da referência.
7) Garanta acessibilidade: roles, aria-labels, navegação por teclado, foco visível; documentação em código.
8) Forneça também: instruções de teste unitário/visual, como validar a correspondência com a imagem de referência, checando classes BEM, tokens, etc.
9) Explique, em linguagem concisa, as decisões de arquitetura (por que aquele block/element foi criado, como escalar, como evitar duplicação de estilos).
10) Entrega: uma árvore de diretórios sugerida, listagem de arquivos, snippet de 3–5 componentes com código mínimo, e um guia rápido para adaptar o prompt a outros designs.

Caso o design da UI da referência inclua componentes específicos, adapte as convenções de nomenclatura mantendo a consistência BEM; reforce a importância da "Constraint Injection": fixe regras que impeçam outputs sem semântica, sem tokens ou sem arquitetura estável.

Observação: a ideia central é demonstrar como a abordagem arquitetural supera um prompt "Lazy" que gera uma sopa de divs e estilos inline. Se desejar, inclua variações de saída para diferentes temas ou tamanhos de tela.