デザインハーネスとは？
デザインハーネス（Design Harness）は、AIにWebサイトや画面を作らせるとき、デザインの原則、参考資料、作業手順、確認方法をひとまとめにして渡す制作環境です。ここでの「ハーネス」は、AIが力を出す方向を整え、結果を検証するための枠組みを意味します。
広く統一された製品名や規格ではなく、AIを使ったデザイン制作を安定させるための実践的な呼び方です。
何を含める？
- サイトが大切にする雰囲気やデザイン原則
- 色、文字、余白、写真などの基本ルール
- 参考にする既存ページや画像
- 画面サイズごとの確認手順
- スクリーンショットを使った完成後の検証
単発のプロンプトだけでデザインさせるのではなく、「何を読み、どう作り、どこまで確認したら完成か」をAIが繰り返し参照できる形で残します。
なぜ必要？
AIは短時間で整った画面を作れますが、指示が少ないと、どのサイトも似た構成や雰囲気になりやすい傾向があります。また、ページごとに別の会話で作ると、色や余白、部品の使い方が少しずつずれていきます。
デザインハーネスがあれば、AIはプロジェクト固有の判断基準を毎回読み直せます。モデルが変わっても同じ手順を引き継げるため、一度の良い出力ではなく、再現できる制作方法を残せます。
デザインシステムとの違い
デザインシステムは、ボタン、色、文字、部品など、完成物で再利用するルールや素材が中心です。デザインハーネスはそれに加えて、AIへ渡す文脈、制作の順番、スクリーンショット確認、修正の進め方まで含みます。
仕様駆動開発のデザイン版に近い考え方で、仕様を読み、実装し、実際の画面を見て検証する一連の流れを整えるものです。