クラシル株式会社のCPOである坪田 朋氏による、「デザインハーネス」イベントでの登壇内容をnote化したもの。チャレンジしたのは「Claude CodeでUIデザインを作りきれるか」という実験。
「ハーネス」という仕組みを作ることで、デザイナーではないPdMやエンジニアがClaude Codeでデザインシステム（DS）に沿ったUIを作れるようになり、すでに現場運用に回っている。4ヶ月で20万行のコードを書き上げてたどり着いた知見をシェアしています。
🔥 目標：「自然言語でUIデザインワークが完結する環境構築」 — デザインの正解をFigmaの中ではなく、コードの中に置くという実験。
同じ「レシピ一覧画面を作って」の一言だけでも、ハーネスの有無で出力が劇的に変わります：
出力は技術スタックに合わせられ、WebならHTML、アプリならSwiftのコードでそのまま動くプロトタイプが完成。すでにデザイナーやPdM、エンジニアがClaude Codeでモックアップを作成し、坪田氏にプルリクエストを投げてレビューを受けるワークフローが回っています。
品質の差に大きく影響したのは、AIの性能ではなく、AIに渡している環境。この「AIに渡す環境」を「ハーネス」と呼び、AIが決まったレールの外に出られないようにする構造的な制約を指します。
どちらもAIに読ませる指示書ですが、指示書だけでは2つの問題があります：
ハーネスはここに2つの仕組みを足します：
人間が読む「正本」とAIが読む「翻訳メモ」を分離。正本をそのままAIに読ませると量が多すぎて精度が落ちるため、AIのためだけの1枚の翻訳メモを作成。正本から自動生成するため二重管理なし。矛盾したら正本が勝つ。
「ダメ」と言うだけでなく「代わりにこうする」までセットで書く。例：「カードの左端に装飾のカラーバーを付けない → 代わりに背景色のトークンで面を作る」。1ヶ月PDCAを回して30項目を超えた。
「ドキュメントは嘘をつく」 — 例：Chips(viewData:)と書いてあるのに実物はChips(text:)。この1文字ズレがAIには致命傷。lint的な自動ズレ検出を作り、見つかった8件を直したら一発で動く率が20%→100%に向上。
AIは同じミスを繰り返すため、人間が修正した差分をAIが認識し「ルール化しますか？」と提案。承認したらルールに追加され、次から同じミスをしなくなる。人間の承認ゲートを必ず挟むのがポイント。
| 役割 | 担当 |
|---|---|
| What/Why | 人間が決める（作るもの、品質基準、Go/NoGo） |
| 実行（プロトタイプ構築・修正） | AIが担う |
| PdMの領域 | 課題仮説、情報設計、画面遷移、文言、ラフUI・動くプロトタイプ |
| デザイナーの領域 | 正本の決定、禁止事項の策定、例外の判断、最終的な視覚品質 |
| エンジニアの領域 | 設計方針の整合、パフォーマンス、コード品質 |
AIが変えたのは「作れる人の範囲」だけで、判断の分業は変わっていないのがポイント。
この1行を10個並べたものが、AI向けDSの最初の1枚になる。
「AIの性能ではなく、AIに渡す環境」が品質を決めるという洞察が秀逸。4層構造（文脈・制約・検証・フィードバック）によるハーネス設計は、デザインだけでなくあらゆるAI活用場面に応用可能な汎用的なフレームワーク。特に「検証」層で一発動作率が20%→100%になったという数字は、ドキュメントの正確さがAIの精度に直結することを示す強力なエビデンスです。はてブ412usersで大バズりしているのも納得の超良記事 🔥