Wireframe Anotado de Habilidade

Produza um único wireframe de página de destino plano e de baixa fidelidade com uma especificação de linha vermelha. O objetivo principal é "estrutura + notas de entrega, não pixels" — caixas cinzas carregam o layout, pinos numerados chamam regiões, e um painel de especificação à direita transforma cada pino em uma nota curta de engenharia/UX. Mantenha-o limpo e plano; nunca desenhado à mão ou rabiscado.

Fluxo de Trabalho

1. Pule a UI finalizada. Esta habilidade quer explicitamente um visual de caixa cinza de baixa fidelidade. Honre os tokens de tipo apenas de forma flexível (uma sans limpa como Inter / system-ui para rótulos, uma mono como IBM Plex Mono para as notas de especificação e números de pinos). Use preenchimentos cinza médio com bordas escuras definidas para que a página seja lida como uma miniatura — evite branco quase branco/branco, que renderiza em branco.

2. Defina a estrutura de duas colunas. ESQUERDA é a tela do wireframe: uma página de caixa cinza com moldura de chrome de navegador. DIREITA é um painel estreito de "ANOTAÇÕES / ESPECIFICAÇÃO". Escolha UMA cor de destaque (coral ou azul) e use-a APENAS para os pinos numerados e os números de especificação correspondentes — todo o resto permanece em tons de cinza.

3. Organize a tela, de cima para baixo, cada bloco uma caixa cinza com um pino numerado posicionado absolutamente sobre ela:

   • Navegação superior — caixa cinza de logo + barras de lorem de navegação + um bloco de botão principal. Pino ①.
   • Herói — barras de lorem de título grande + subtítulo + dois blocos de botão CTA à esquerda; um grande espaço reservado para imagem (retângulo com um X diagonal) à direita. Pino ②.
   • Faixa de logos — uma linha de 5 pequenas caixas cinzas de logos de parceiros. Pino ③.
   • Grade de recursos — 3 cartões, cada um um quadrado de ícone + barra de título + 2 barras de texto. Pino ④.
   • Rodapé — colunas de barras de links de lorem. Pino ⑤.

4. Espelhe cada pino no painel de especificação. Cada linha de especificação = o número circulado na cor de destaque + uma nota curta mono/sans, por exemplo, "① Navegação fixa, 64px, condensa ao rolar", "② Título H1 do Herói 48/56, par de CTA primário+fantasma", "③ 5 logos de parceiros, tons de cinza", "④ 3 em largura em ≥960px → 1 em largura no celular", "⑤ Rodapé de 4 colunas, linha legal". Marque o painel e cada linha com data-od-id.

5. Auto-verificação:

   • Cada pino numerado na tela tem exatamente uma linha de especificação correspondente.
   • A cor de destaque aparece APENAS nos pinos + números de especificação; o resto é em tons de cinza.
   • A página deve ser lida claramente em tamanho de miniatura; se os blocos desaparecerem no fundo, escureça os preenchimentos/bordas.
   • NÃO deve parecer perfeito em pixels ou desenhado à mão — apenas caixas cinzas planas.

Contrato de Saída

Emita entre as tags <artifact>:

<artifact identifier="wireframe-slug" type="text/html" title="Annotated Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.