验证
该脚本捕获机械故障。截图则是你捕捉设计缺陷的地方。两者每次都做。
运行
node ~/.config/opencode/lib/design/verify.mjs "design/Foo.html" --full --out design/.verify/foo.png
常用变体：
| 情况 | 参数 |
|---|---|
| 幻灯片组，每页一图 | --each "section" --step --each-out design/.verify/deck |
| 文档，打印宽度 | --width 900 --height 1200 --full |
| 海报或固定画布 | --width 1080 --height 1350 --full |
| 窄面板检查 | --width 900 |
| 慢动画稳定 | --settle 2000 |
它会在一个临时的本地主机端口上提供文件服务，以无头模式加载该文件，并在标准错误输出中输出 JSON 和摘要。退出码为 1 表示出现问题。
读取输出
errors— 控制台错误和未捕获的异常。通常是一个脚本引用了不存在的元素。修复原因，不要压制它。failedRequests— 缺失的字体、图片、同级文件。缺失的字体静默回退，整个字体决策便丢失了，因此这一点比看起来更重要。horizontalScroll— 页面宽度超出视口宽度。在屏幕上表现为没人想要的滚动条；在打印中意味着内容被裁剪到右边缘之外。从overflowing列表中找到该元素。metrics.fontFamilies— 实际渲染的字体。如果显示字体未出现，说明字体未加载，你正在审查的是回退字体。images[].loaded: false— 损坏的资源或错误的相对路径。metrics.nodeCount— 一个合理性检查，而非目标值。
检查令牌纪律
在判断设计之前，先检查它是否实际使用了系统。当 tokens.css 位于产物旁边时，验证器会为你执行此操作（位于 tokens 下）：当页面未链接该文件时会发出警告，并列出页面自身 CSS 及其它本地样式表（如 components.css）中的每一个颜色字面量——hex、oklch()、rgb() 等。
每个命中要么是应该存在的令牌，要么是绕过该文件的值。结构性 CSS（例如幻灯片组的缩放变换、海报的网格）中可能合理包含 px 数值；但颜色字面量几乎不会。中性的查看器界面（如幻灯片组的遮罩框或文档页面周围的桌面）会使用具名颜色，如 black 和 white。
然后查看截图
打开该文件。按以下顺序评判：
- 层级 — 视线是否首先落在标题上，其次才是支持细节？眯眼看一下：如果所有元素权重均等，则没有层级。
- 间距 — 一致的节奏，且足够大。组之间不均匀的间隙是最常见的未经考虑布局的迹象。
- 对齐 — 任何本应共享左边缘但实际未对齐的内容。
- 裁剪和重叠 — 文本接触或越过边界，元素脱离其容器。
- 对比度 — 浅灰上的暗灰是默认的失败。检查实际值，不要信任截图渲染效果。
- 内容 — 无填充文本、无遗留的占位符、无你编造的数字。
修复并重新运行
直接从错误文本修复；无需重新读取整个文件来找到所在行。每次实质性更改后重新运行。最多三轮——之后，附上一张诚实的说明条，指出仍存在的问题，然后交付。
导出
当产物要放在没有该文件夹的地方时：
node ~/.config/opencode/lib/design/inline.mjs "design/Foo.html"
这会写入 Foo.standalone.html 文件，并将本地样式表复制进去。也请对独立副本运行验证器——内联是相对路径和 url() 引用出问题的地方。
永远不要说设计已完成仅仅因为脚本退出了 0。脚本并不知道它看起来好不好。