デザインハーネスは「AIに綺麗なUIを作らせる技術」ではなく、半年後も壊れないUIを育てる技術だ

• URL: https://zenn.dev/taketsuyo/articles/4448a21e89a260
• 日付: 2026-06-21
• Tier: Tier 3
• 要旨: デザインハーネスは「AI に綺麗な UI を作らせる」のではなく「半年後も壊れない UI を育てる」仕組み。制約・文脈・検証・フィードバックの 4 層で AI の出力を安定化。個人開発者こそ最小ハーネスから始めるべき。DESIGN.md で 5 原則・rules.json で 5 ルール・検証自動化で十分。

詳細

AI 駆動 UI 開発の課題：最初の 1〜2 画面は良好だが、10〜20 画面に増えるとズレ増加（ボタン角丸差分・影強度差異・ステータス色バラバラ・余白不統一）。AI は「それっぽいもの」得意だが、プロダクトらしさを長期維持は苦手。デザインハーネス = AI の力を「使える形」にする装具。馬具・安全装具イメージ：力を弱めず方向付け。melta のモデル：4 層構造。層 1 制約：「この色禁止」「この影はモーダルのみ」「余白はこの単位」。層 2 文脈：DESIGN.md・contracts で「何を大事にするか」「いつどのコンポーネント使う」。層 3 検証：ルール違反・スキーマ不整合・デザインドリフト自動検知（人間目視ではなく）。層 4 フィードバック：「ダメ」だけでなく「なぜ」「代わりに何」を返す。デザインシステム進化：人間向け（Figma・ドキュメント・確認）→ AI 読取可能（粒度分解・誤り検知・修正しやすいフィードバック）。テストの進化に並行（昔手動確認→今 unit・型・CI 自動化）。個人開発者向け最小ハーネス：DESIGN.md に 5 原則「色は用途・影は弱く・ボタン種類限定・色投入抑制・既存優先」。rules.json に 5 ルール「text-black 禁止・shadow-xl 禁止・px 直指定禁止・新規色禁止・Button 直書き禁止」。制約強化で無難になりすぎ防止：「縛る」ではなく「意図伝える」ハーネス設計。3 年後は CI と同等標準化予想。