Verificar
O script detecta falhas mecânicas. A captura de tela é onde você detecta falhas de design. Faça ambos, sempre.
Executar
node ~/.config/opencode/lib/design/verify.mjs "design/Foo.html" --full --out design/.verify/foo.png
Variantes comuns:
| Caso | Flags |
|---|---|
| Deck, um tiro por slide | --each "section" --step --each-out design/.verify/deck |
| Documento, largura de impressão | --width 900 --height 1200 --full |
| Pôster ou tela fixa | --width 1080 --height 1350 --full |
| Verificação de painel estreito | --width 900 |
| Animação lenta para estabilizar | --settle 2000 |
Ele serve o arquivo em uma porta localhost descartável, carrega-o sem cabeçalho e imprime JSON mais um resumo no stderr. Código de saída 1 significa que algo está errado.
Ler a saída
errors— erros de console e exceções não capturadas. Geralmente um script referenciando um elemento ausente. Corrija a causa, não a silencie.failedRequests— fontes, imagens, arquivos irmãos ausentes. Uma fonte ausente silenciosamente cai para fallback e toda a decisão tipográfica é perdida, então isso importa mais do que parece.horizontalScroll— a página é mais larga que a viewport. Na tela, isso é uma barra de rolagem que ninguém quer; na impressão, significa que o conteúdo é cortado na borda direita. Encontre o elemento na listaoverflowing.metrics.fontFamilies— o que realmente foi renderizado. Se a face de exibição não estiver lá, a fonte não carregou e você está revisando o fallback.images[].loaded: false— recurso quebrado ou caminho relativo errado.metrics.nodeCount— uma verificação de sanidade, não um alvo.
Verificar disciplina de tokens
Antes de julgar o design, verifique se ele está realmente usando o sistema. Quando tokens.css está ao lado do artefato, o verificador faz isso por você sob tokens: ele avisa quando a página não vincula o arquivo e lista cada literal de cor — hex, oklch(), rgb() e afins — no CSS da página e em suas outras folhas de estilo locais, como components.css.
Cada ocorrência é um token que deveria existir ou um valor que contornou o arquivo. CSS estrutural (a transformação de escala de um deck, a grade de um pôster) contém legitimamente números em px; literais de cor quase nunca. O chrome neutro do visualizador (como o letterbox de um deck ou a mesa ao redor de uma página de documento) usa cores nomeadas como black e white.
Em seguida, olhe a captura de tela
Abra o arquivo. Julgue, nesta ordem:
- Hierarquia — o olho pousa primeiro no título, depois no detalhe de suporte? Aperte os olhos: se tudo tem peso igual, não há hierarquia.
- Espaçamento — ritmo consistente e suficiente. Lacunas desiguais entre grupos são o sinal mais comum de um layout não pensado.
- Alinhamento — qualquer coisa que deveria compartilhar uma borda esquerda e não compartilha.
- Corte e sobreposição — texto tocando ou cruzando um limite, um elemento escapando de seu contêiner.
- Contraste — cinza opaco sobre cinza claro é a falha padrão. Verifique os valores reais, não confie na renderização da captura de tela.
- Conteúdo — sem preenchimento, sem texto de espaço reservado deixado para trás, sem números que você inventou.
Corrigir e reexecutar
Corrija diretamente a partir do texto do erro; não releia o arquivo inteiro para encontrar a linha. Reexecute após cada alteração substancial. Três rodadas é o limite — depois disso, entregue com uma nota honesta sobre o que ainda está errado.
Exportar
Quando o artefato vai para algum lugar sem a pasta:
node ~/.config/opencode/lib/design/inline.mjs "design/Foo.html"
Isso escreve Foo.standalone.html com as folhas de estilo locais copiadas. Execute o verificador na cópia independente também — a incorporação é onde caminhos relativos e referências url() quebram.
Nunca diga que um design está pronto porque o script saiu com 0. O script não sabe se parece bom.