Wireframe

Produza wireframes de UI de baixa fidelidade, em preto e branco, como arquivos SVG independentes. O objetivo é comunicar a estrutura — o que vai onde, em que ordem, em que tamanho aproximado — sem se comprometer com cores, marca ou polimento.

Quando usar

Acione com frases como:

• "crie um wireframe de [tela / página / fluxo] para X"
• "mockup de baixa fidelidade / lo-fi de X"
• "rascunhe um layout para X"
• "esboço rápido da página [dashboard / configurações / login / ...]"
• "mostre como X ficaria antes de eu construir"

Pule e adie para frontend-design (ou similar) quando a solicitação mencionar: marca, polimento, componentes reais, "pronto para produção", paletas de cores, alta fidelidade, exportação do Figma, ou entregas de código/HTML/React reais.

Estilo da casa — inegociável

Wireframes são diagnósticos, não decorativos. Trave estes tokens em cada saída:

Se precisar destacar uma região específica para uma chamada, use a camada de anotação (vermelho tracejado). Nunca colorize o próprio wireframe.

Fluxo de trabalho

1. Confirme o escopo. Quais telas? Qual viewport (desktop / tablet / mobile)? Tela única ou fluxo de várias telas? Se não estiver claro, faça uma pergunta e prossiga com o padrão mais provável.
2. Escolha um canvas da tabela acima. Declare o viewport na sua resposta.
3. Componha a partir de primitivas. Leia references/components.md e monte a tela a partir dos trechos primitivos. Alinhe cada coordenada a 8px.
4. Escreva o SVG em um arquivo. Caminho padrão: wireframes/<slug>.svg no diretório de trabalho. O nome do arquivo em slug descreve a tela (login.svg, dashboard.svg, settings-account.svg).
5. Emita uma lista de anotações textuais na sua resposta, mapeando cada região numerada no SVG a uma descrição de uma linha ("1 — navegação principal, 2 — campo de busca, 3 — lista de itens recentes"). Isso torna o wireframe acessível, consultável e revisável em canais apenas de texto.
6. Para fluxos de várias telas, produza um SVG por tela e um resumo flow.svg que organiza miniaturas da esquerda para a direita com setas entre elas.

Início rápido — SVG mínimo

<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
  <!-- canvas border -->
  <rect x="0" y="0" width="1280" height="800" />

  <!-- example: a button -->
  <g transform="translate(48, 48)">
    <rect width="120" height="40" rx="4" />
    <text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Continue</text>
  </g>
</svg>

Dois pontos de atenção do estilo da casa que valem a pena memorizar:

• Sempre defina stroke="none" em elementos <text> (o texto herda o traço do pai e ganha um halo caso contrário).
• Sempre envolva o preenchimento do texto explicitamente (fill="#000") já que o preenchimento do grupo pai é #fff para caixas.

Biblioteca de primitivas

O conjunto completo de primitivas reutilizáveis está em references/components.md. Carregue-o sempre que precisar de uma primitiva cuja marcação exata você não tenha na memória de trabalho. Não derive primitivas do zero — copie o trecho e ajuste as coordenadas.

Primitivas fornecidas:

• Entradas: botão (preenchido, contornado, ícone), campo de texto, área de texto, dropdown, caixa de seleção, rádio, toggle, campo de busca

…