検証
このスクリプトは機械的な障害をキャッチします。スクリーンショットはデザイン上の障害をキャッチするためのものです。毎回、両方を実行してください。
実行方法
node ~/.config/opencode/lib/design/verify.mjs "design/Foo.html" --full --out design/.verify/foo.png
よく使うバリエーション:
| ケース | フラグ |
|---|---|
| デッキ、スライドごとに1ショット | --each "section" --step --each-out design/.verify/deck |
| ドキュメント、印刷幅 | --width 900 --height 1200 --full |
| ポスターまたは固定キャンバス | --width 1080 --height 1350 --full |
| 狭いパネルのチェック | --width 900 |
| アニメーションが落ち着くまで待機 | --settle 2000 |
このスクリプトはファイルを一時的なlocalhostポートで提供し、ヘッドレスで読み込み、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 などの名前付きカラーを使用します。
スクリーンショットを確認する
ファイルを開いて、次の順序で判断してください:
- 階層 — 最初に目が止まるのは見出しですか？次に補足の詳細ですか？目を細めて見てください: すべてに同じ重みがある場合、階層はありません。
- スペーシング — 一貫したリズムと十分な余白。グループ間の不均等な間隔は、考慮されていないレイアウトの最も一般的な兆候です。
- 配置 — 左端を共有すべき要素が共有していないもの。
- クリッピングと重なり — テキストが境界に触れたり超えたり、要素がコンテナからはみ出している。
- コントラスト — 薄いグレーに薄いグレーはデフォルトの失敗です。実際の値を確認し、スクリーンショットのレンダリングを信頼しないでください。
- コンテンツ — フィラーや残されたプレースホルダーテキスト、でっち上げた数字がないこと。
修正して再実行
エラーテキストから直接修正し、行を見つけるためにファイル全体を再度読み込まないでください。実質的な変更のたびに再実行してください。3ラウンドが上限です — それを超えた場合は、まだ何が間違っているかを正直に記載して引き継いでください。
エクスポート
成果物をフォルダなしでどこかに送る場合:
node ~/.config/opencode/lib/design/inline.mjs "design/Foo.html"
これにより、ローカルスタイルシートがコピーされた Foo.standalone.html が書き込まれます。スタンドアロンコピーでも検証ツールを実行してください — インライン化は相対パスや url() 参照が壊れる箇所です。
スクリプトが終了コード0を返したからといって、デザインが完了したとは決して言わないでください。スクリプトは見た目が良いかどうかを認識しません。