Zenn、UI 構築管理ツール DESIGN.md の実測検証記事を公開──74件の事例と3層の判定で分かった限界
Google Labs 発祥の DESIGN.md 形式について 74 件のリポジトリを測定し、書式 lint と実装結果の乖離や、CSS 検査・画像判定を組み合わせた検証手法を解説している。
リリース: 2026-08-01 · 読了 5 分記事の要約
1. 核心（What）
- awesome-design-md から 74 件の DESIGN.md ファイルを収集し、その記述傾向や分布を測定した
- @google/design.md v0.4.0 のエクスポートおよび lint 処理において、数値指定が無視されるなどの不具合を確認した
- 美術館の図録をモチーフにした DESIGN.md と 3 通りのカード UI 実装を用意し、CSS 解析と LLM 画像判定による検証実験を行った
- デザイン定義から画面描画に至る経路において、途中の変換や参照が途切れていても CI が緑になる構造的課題を指摘した
2. 影響（Why）
- 自動テスト過信の回避: DESIGN.md の lint や CI が通過しても画面が意図どおりかは保証されないため、見えない部分の乖離を検知するテスト設計の重要性が浮き彫りになる。
- 実用的な運用指針の獲得: 公式サンプルの模倣を避け、実物の中央値に合わせた記述や Known Gaps の明記を行うことで、AI エージェントのハルシネーションを防ぐ具体的な運用知見が得られる。
3. 根拠・詳細（How）
- @google/design.md v0.4.0 の検証: npm パッケージ @google/design.md@0.4.0 を用いて export および lint コマンドを実行し、lineHeight や spacing の数値指定が YAML の型仕様によってサイレントに消える挙動を検証した。
- 3 層判定モデルの実験: Playwright による computed style の CSS 走査と、判定不能（undetermined）の選択肢を明示した LLM による画像判定、既存 lint の 3 つを組み合わせて違反検出の精度を検証した。
4. 展望・課題（Next）
- 検証自動化の標準化: デザイン定義から画面出力までの経路全体をカバーする検証スクリプトや、テーマ参照率を測るメトリクスの社内リポジトリへの導入が進む見込み。