wireframes

O que wireframes faz?

Visão geral

Uma proposta de UI é uma imagem, não uma página de prosa. Desenhe cada mudança como um wireframe barato: o Agora ao lado do Proposto, barras cinzas para tudo que permanece igual, rótulos reais apenas nos elementos em discussão e uma frase de porquê. Ele não reproduz a aparência real do aplicativo: sem cores da marca, sem fontes reais, sem fidelidade de pixels. O usuário vê a mudança de relance, e desenhá-la custa poucos tokens.

Quando não usar: a mudança é puramente visual (cor, contraste, fontes, tokens de espaçamento) — descreva-a ou mostre CSS real. Ou o usuário já decidiu e pediu para você implementar, então implemente. Ou nada sobre layout, controles ou fluxo muda.

A saída

Um único arquivo HTML auto-contido, construído assim:

1. Caminho: docs/mockups/YYYY-MM-DD-<topico>.html no projeto, para que os mockups fiquem junto com o código e possam ser commitados. Se o projeto já mantiver mockups em outra pasta mockups/, use essa.
2. Head: copie tudo de <!doctype html> até </style></head><body> em kit.html literalmente. Altere apenas <title>. Use apenas classes do kit. style inline é para tamanho e espaçamento (width, height, margin, a posição de um .menu), nunca cor.
3. <h1> e uma linha .lede.
4. Uma seção por mudança: <h2>N · resultado nas palavras do usuário</h2>, depois um layout:

Situação	Layout	Rótulos
Algo existe e deve mudar	.pair: Agora, depois Proposto	.lbl.b "Agora: o que há de errado" · .lbl.g "Proposto: o que muda"
A correção não está decidida	.opts: 2-3 opções, com um pequeno .solo Acima quando a coisa existe	.lbl.o "A · nome (recomendado)"; .why "+ ganho · − custo"
Nada existe ainda	.solo: apenas Proposto	.lbl.g; chamadas .n numeradas explicadas em .why
Um elemento em estados ou larguras	.strip: um quadro por estado	.lbl "Vazio", "Carregando", "Erro", "Telefone"…; no máximo um .why abaixo da faixa

5. Cada lado de um .pair, e cada opção, recebe um rótulo (no máximo 10 palavras), seu quadro ou quadros, e uma frase .why. Use dois quadros em um lado quando a mudança é uma sequência (menu, depois o toast após ele).

Leia kit.html uma vez: abaixo do CSS ele tem um exemplo prático de cada layout e um índice de todas as classes.

Regras de desenho

• Texto real apenas onde a decisão está: o controle alterado, seus vizinhos imediatos e o nome do aplicativo ou breadcrumb para orientação. Todo o resto é .box (linha de texto, defina width), .img (imagem ou gráfico) ou uma .row de barras cinzas.
• Marque o único controle que muda: .bad (tracejado vermelho) no problema no Agora, .good (sólido verde) na mudança no Proposto e no que diferencia cada opção. Não marque nada em uma .strip. Contorne o controle, nunca uma barra de largura total ou um quadro inteiro, pois quadros cortam contornos nas bordas.
• Algo faltando: desenhe um slot tracejado vazio onde ele pertence (<span class="in bad">sem busca aqui</span>), não um contorno em um elemento próximo.
• Caber cerca de 800px: cada coluna de .pair tem cerca de 380px, então mantenha uma .bar em cerca de 5 itens.
• Tipo de aplicativo: web ou desktop → .f; telas estreitas ou mobile nativo → .phone; terminal UI → .f.mono.pad com linhas de texto reais e barras cinzas para saída inalterada.
• Perguntas em aberto vão no .why daquele lado, formuladas como pergunta.
• Orçamento: no máximo cerca de 15 KB por arquivo. Uma seção com mais de cerca de 1,5 KB está desenhando conteúdo sobre o qual ninguém está decidindo — troque esse conteúdo por barras cinzas.

Verifique antes de mostrar

Se uma ferramenta de navegador que possa capturar tela estiver disponível, abra o arquivo e olhe. No aplicativo de desktop Claude, isso significa mcp__Claude_Browser__preview_start com url: file://<caminho absoluto>, depois mcp__Claude_Browser__computer com ação screenshot. Se o navegador recusar o arquivo local, trate a página como não visualizada (veja abaixo). Verifique se cada contorno está no elemento pretendido, se nada está cortado ou quebrado, e se sobreposições não escondem o que explicam. Corrija, depois olhe novamente.

Sem ferramenta de captura de tela (CLI, headless, subagente), releia a marcação contra essas verificações e diga na entrega que a página não foi visualizada.

Entregue

No chat, escreva apenas:

• o arquivo como um link markdown relativo à raiz do projeto;
• uma linha por seção: número, título e estado ("pronto", "escolha A/B/C", ou a pergunta em aberto);
• as decisões que você precisa: uma frase cada, sua escolha e o único motivo principal.

Os desenhos e suas linhas .why carregam os detalhes e as compensações, então não os descreva novamente. Aguarde as escolhas do usuário antes de implementar. Sem um usuário para perguntar (subagente, headless), retorne as mesmas três coisas e pare.

Erros comuns

Erro	Em vez disso
Rotular todo elemento	Rotule apenas o que a decisão toca
Reestilizar para combinar com o aplicativo	CSS do kit literalmente; barras cinzas
Um parágrafo por desenho no chat	Link, uma linha por seção, decisões