Habilidade de Esboço de Wireframe

Produza uma única página de wireframe desenhada à mão. O objetivo é "isto é um esboço" — a informalidade é a marca. Use tons de lápis/marcador, preenchimentos hachurados, bordas tracejadas, leves rotações.

Fluxo de Trabalho

1. Pule o DESIGN.md se ele exigir uma UI finalizada. Esta habilidade explicitamente quer um visual de baixa fidelidade. Honre os tokens de tipo apenas vagamente (serifado do sistema para títulos, mono para anotações, fonte de marcador como fallback).
2. Escolha as variantes de tela do briefing — tipicamente 3–4 rótulos de aba como "01 · A · ORGANIZADO", "02 · B · PAINEL", etc. Uma está "ativa", as outras são esboços de abas inativas.
3. Layout, em ordem:
   • Cabeçalho da página — título serifado em negrito com uma tag falsa "WIREFRAME v0.1" fixada ao lado (borda tracejada, leve rotação). Abaixo: subtítulo de uma linha em itálico de marcador + uma linha de data/dispositivo/fidelidade à direita em mono.
   • Faixa de abas — 4–5 rótulos com glifos de marcador de caixa de seleção. A ativa tem um risco de marca-texto atrás dela (tom amarelo/laranja + leve inclinação).
   • Tela de esboço — um cartão de papel quadriculado (fundo: grade de 24px × 24px desenhada com linhas linear-gradient), com uma borda grossa e arredondada desenhada para parecer uma linha de marcador permanente.
   • Linha de "chrome" do navegador — três círculos esboçados + uma barra de URL falsa com uma URL em estilo manuscrito.
   • Navegação lateral — caixa de seleção esboçada + rótulo para cada item de navegação, itálico de marcador. Um tem uma linha de marca-texto sobre ele (ativo).
   • Blocos de KPI — 3–4 caixas, cada uma com um número rabiscado e grosso em um traço estilo marcador, um pequeno carimbo de acento e um rótulo de uma linha.
   • Placeholder de gráfico — um cartão com um eixo desenhado à mão e uma polilinha trêmula. Adicione 3–4 marcadores de ponto.
   • Placeholder de gráfico de barras — um cartão com retângulos de preenchimento hachurado de alturas variadas.
   • Notas adesivas — 1–2 notas amarelas/rosas com texto de marcador, presas com uma faixa levemente rotacionada, fixadas sobre regiões chave para chamar a atenção para "próximo passo", "página-1" ou "precisa de revisão".
4. Escreva um único documento HTML:
   • <!doctype html> a </html>, CSS inline.
   • Use as fontes "Caveat", "Patrick Hand" ou "Architects Daughter" disponíveis no sistema via Google Fonts; caso contrário, use serifado itálico como fallback.
   • Leves rotações em todos os lugares (transform: rotate(-0.6deg)) para quebrar a grade e dar uma sensação de desenho à mão.
   • data-od-id no cabeçalho, abas, barra lateral, KPIs, gráfico, gráfico de barras, notas adesivas.
5. Auto-verificação:
   • A página não deve parecer perfeita em pixels. Se parecer, você exagerou no render.
   • Marcador/lápis + papel quadriculado + preenchimentos hachurados + notas adesivas estão todos presentes; se algum estiver faltando, adicione-o.
   • A aba ativa tem o risco de marca-texto; as outras não.

Contrato de Saída

Emita entre as tags <artifact>:

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

Uma frase antes do artefato, nada depois.