Skill Wireframe Greybox

Produza uma única página de wireframe greybox nítida. O objetivo principal é estrutura, não aparência — comunique hierarquia e layout com blocos cinzas neutros, nunca com cores reais, texto ou imagens. Tudo é um placeholder: texto são "barras de lorem" cinzas, imagens são retângulos com uma cruz diagonal, números são grandes blocos sólidos. A única cor na página é o único toque de vermelho reservado para anotações em monoespaçado.

Fluxo de Trabalho

1. Mantenha a estrutura. Ignore qualquer DESIGN.md que apresente UI finalizada — isto é deliberadamente de baixa fidelidade. Use uma fonte sans limpa (Inter / system-ui) para formas e uma mono (IBM Plex Mono / JetBrains Mono) apenas para as anotações em vermelho. Sem fontes desenhadas à mão, sem cores de marca.
2. Defina a paleta greybox. A página é um neutro pálido (#f7f7f8), blocos são cinza médio (#e3e3e6), bordas são nítidas e definidas (#c9c9cf para bordas suaves, #1c1b1a para ênfase), e exatamente um toque (uma linha vermelha azul ou coral) carrega todas as anotações em monoespaçado. Mantenha o contraste alto o suficiente para ser lido como uma miniatura pequena — nunca quase branco sobre branco.
3. Organize o dashboard, em ordem, cada um em seu próprio data-od-id:
   • Barra de aplicativo — um greybox de logo, uma linha de barras de lorem de navegação e um círculo de avatar à direita.
   • Navegação lateral — quadrados de ícones + rótulos de barras de lorem; marque um item ativo com um bloco preenchido/invertido.
   • Linha de KPIs — quatro greyboxes, cada um com uma pequena barra de rótulo acima de uma grande barra sólida de "número".
   • Painel de gráfico — um greybox SVG inline: eixos mais algumas barras hachuradas/cinzas ou uma linha esquemática. Sem dados reais.
   • Painel de lista / tabela — uma linha de cabeçalho mais ~5 linhas de barras de lorem, com uma coluna de placeholders de imagem desenhados como uma caixa com um X diagonal.
   • Anotações — uma ou duas pequenas linhas vermelhas em monoespaçado fixadas na tela (por exemplo, 01 · 12-col grid, max-width 1280).
4. Escreva um único documento HTML autônomo — <!doctype html> até </html>, CSS inline, sem JS ou imagens externas. SVG e CSS desenham todos os placeholders. Um contêiner max-width mais uma media query colapsa as colunas abaixo de ~1000px.
5. Auto-verificação. Deve ser lido como um projeto em tamanho miniatura: cinza blocos, caixas de imagem com X, barras de lorem e exatamente uma cor de toque nas linhas vermelhas em monoespaçado. Se algum greybox estiver faltando, a página parecer colorida, ou desaparecer como uma miniatura em branco, corrija.

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.