THE SCHOOL OF KAMOS
現場の開発から学ぶ、世界一やさしい日刊AIスクール新聞
AIの暴走を防ぐデザインハーネスの設計思想
自由奔放な生成コードを規格へ収める安全帯と治具の技術
新機能の画面作成をAIエージェントに任せたところ、一見すると動くものの、画面ごとにフォントサイズやボタンの余白、ブランドカラーのコード値が微妙に異なるチグハグなUIが次々と生成される事件が起きました。プロンプトで「統一感を保って」と何度指示しても、ページを行き来するたびにCSSの競合やスタイルの不整合が噴出。AIが文脈ごとに都合よく解釈を変えてしまい、全体の統一性が崩壊寸前に追い込まれたのです。
この問題が起きた根本的な理由は、AIに完全な白紙の自由を与えてしまった点にあります。これは木工細工で、職人に寸法線も引かずに「いい感じの椅子を作って」と頼むようなものです。熟練の大工でも目測だけで削れば数ミリのズレが生じ、脚を組んだときにガタつきが出ます。現場で必要なのは、職人の感覚に頼ることではなく、誰がノコギリを当てても正確な寸法でしか切れない「治具（ジグ）」という型枠です。AIにも同様に、自由な創作の前に厳密な規格の型枠を嵌めなければ、出力ごとに微細なズレが積み重なってしまいます。
そこで現場に導入されたのが『Design Harness（デザインハーネス）』です。高所作業で職人の身を守る安全帯のように、AIの生成プロセスをブランドトークンやタイポグラフィ規約の枠内に物理的に拘束するパイプラインを構築しました。AIが勝手なカラーコードや独自のCSSクラスを出力しようとしても、ハーネス層が中間で検知し、許可されたデザイントークンへと強制的に写像します。自由な発想を活かしつつも、出力されるコードはミリ単位で統一規格に収まる堅牢な仕組みを実現しました。
"自由を与えるのではなく、美しい制約の型枠を嵌める。"本日の重要ポイント
📖 今日の1分AI単語辞典
AIが生成するコードやデザインを、あらかじめ決めた規格や色・余白のルールから外れないよう制御する安全枠の仕組み。
色、文字の大きさ、余白などの数値を、名前をつけて一元管理するデザインの最小単位。
Design HarnessによるUI生成の制御構造
直近のAI世界観測：現場とつながる最新トレンド
NEC、多様なサプライチェーン業務を自律実行する「NEC SCM AIエージェント」を販売開始
NECが需給計画や在庫管理など複雑なサプライチェーン業務を自律的に判断・実行する企業向けAIエージェントの提供を開始しました。現場の制約条件を厳密に組み込み、業務の自動化を実現します。
世界の最新研究とどう繋がってる？
マルチモーダルAIが複雑な視覚情報や表構造を解釈・出力する際、自由な推論に任せると位置や値のズレを起こしやすいという課題があります。この研究では、モデルの知覚と思考を「構造化された基盤（Structured Grounding）」に結びつける強化学習手法を提案しています。現場で構築したDesign Harnessもまったく同じ思想であり、AIの生成コードを抽象的な指示文ではなく、構造化されたデザイントークンという明確な接地基盤に拘束することで、視覚的・構造的な破綻を防ぎ、極めて精度の高いUI生成を可能にしています。
AIに統一感のあるWebデザイン画面を作らせる際、最も効果的なアプローチはどれでしょうか？
過去のスクール新聞バックナンバー
メガファクトリーから職人のアトリエへ：AIデザインが辿り着いた「手筋」の逆説
過去ログを記憶に変えるメモリ直読技術
試作を「作って捨てる」から「生きた標本にする」へ：51の実験を繋ぎ止める軽量ショーケースの進化論
AIにデザインを頼むとなぜ「どこか惜しい見た目」になるのか？
暗黒の深海で光を正しく届ける技術：WebGPU計算シェーダーが実現した水中光学のてこ比
12万個の建材をAIに下から積ませたらどうなる？ WebGPUで挑んだ安土城の思考実験
型を繋いで技を編む：AIグラフィックを迷わせない3層ハーネスの知恵
捨てたい勇気と守りたい秩序：出荷前ガードが解いたコード整理のジレンマ
AIが突然止まらないための「迂回路」のつくり方
滑らかさを求めて回し続けたループを止めたら、画面がもっと軽やかに動き出した
波の切れ目をなくす数学：1ピクセルのズレも許さない背景タイルの同期術
「世界最高峰の分析」を削ったらAIが賢くなった話：プロンプトの肩書デトックス
毎回AIに考えさせない贅沢：159ページを線で結ぶ「有向読書グラフ」の知恵
