Verificar
El script detecta fallos mecánicos. La captura de pantalla es donde detectas fallos de diseño. Haz ambas cosas, cada vez.
Ejecútalo
node ~/.config/opencode/lib/design/verify.mjs "design/Foo.html" --full --out design/.verify/foo.png
Variantes comunes:
| Caso | Banderas |
|---|---|
| Presentación, una toma por diapositiva | --each "section" --step --each-out design/.verify/deck |
| Documento, ancho de impresión | --width 900 --height 1200 --full |
| Póster o lienzo fijo | --width 1080 --height 1350 --full |
| Verificación de panel estrecho | --width 900 |
| Animación lenta para estabilizar | --settle 2000 |
Sirve el archivo en un puerto localhost temporal, lo carga sin cabeza (headless) e imprime JSON más un resumen en stderr. El código de salida 1 significa que algo está mal.
Lee la salida
errors— errores de consola y excepciones no capturadas. Generalmente un script que referencia un elemento faltante. Corrige la causa, no la silencies.failedRequests— fuentes, imágenes, archivos hermanos faltantes. Una fuente faltante cae silenciosamente en un fallback y toda la decisión tipográfica se pierde, por lo que esto importa más de lo que parece.horizontalScroll— la página es más ancha que el viewport. En pantalla es una barra de desplazamiento que nadie quiere; en impresión significa que el contenido se corta en el borde derecho. Encuentra el elemento de la listaoverflowing.metrics.fontFamilies— lo que realmente se renderizó. Si la tipografía principal no está, la fuente no se cargó y estás revisando el fallback.images[].loaded: false— activo roto o una ruta relativa incorrecta.metrics.nodeCount— una verificación de cordura, no un objetivo.
Verifica la disciplina de tokens
Antes de juzgar el diseño, verifica que realmente esté usando el sistema. Cuando tokens.css está junto al artefacto, el verificador hace esto por ti bajo tokens: advierte cuando la página no enlaza el archivo y lista cada literal de color — hex, oklch(), rgb() y similares — en el CSS de la página y en sus otras hojas de estilo locales, como components.css.
Cada acierto es o un token que debería existir o un valor que omitió el archivo. El CSS estructural (la transformación de escala de una presentación, la cuadrícula de un póster) contiene legítimamente números en px; los literales de color casi nunca lo hacen. El marco neutro del visor, como el letterbox de una presentación o el escritorio alrededor de una página de documento, usa colores con nombre como black y white.
Luego mira la captura de pantalla
Abre el archivo. Juzga, en este orden:
- Jerarquía — ¿el ojo cae primero en el titular, luego en el detalle de apoyo? Entrecerrando los ojos: si todo tiene el mismo peso, no hay jerarquía.
- Espaciado — ritmo consistente y suficiente. Los espacios desiguales entre grupos son la pista más común de un diseño poco pensado.
- Alineación — cualquier cosa que deba compartir un borde izquierdo y no lo haga.
- Recorte y superposición — texto tocando o cruzando un límite, un elemento escapando de su contenedor.
- Contraste — gris apagado sobre gris claro es el fallo por defecto. Verifica los valores reales, no confíes en la representación de la captura de pantalla.
- Contenido — sin relleno, sin texto de marcador de posición olvidado, sin números inventados.
Corrige y vuelve a ejecutar
Corrige directamente desde el texto del error; no releas todo el archivo para encontrar la línea. Vuelve a ejecutar después de cada cambio sustancial. Tres rondas es el límite — después de eso, entrégalo con una nota honesta sobre lo que aún está mal.
Exportar
Cuando el artefacto vaya a algún lugar sin la carpeta:
node ~/.config/opencode/lib/design/inline.mjs "design/Foo.html"
Eso escribe Foo.standalone.html con las hojas de estilo locales copiadas. Ejecuta el verificador también sobre la copia independiente — la inserción en línea es donde las rutas relativas y las referencias url() se rompen.
Nunca digas que un diseño está terminado porque el script salió con 0. El script no sabe si se ve bien.