AIコーディングエージェントが抱えていた「ビジュアルドリフト」問題

Claude CodeやCursor、KiroといったAIコーディングエージェントを日常的に使っている開発者なら、次のような経験をしたことがあるかもしれません。ログイン画面は青みがかったボタン、ダッシュボードはやや濃いめのグレー背景、設定ページはまたちょっと違うカードデザイン——同じプロジェクトのはずなのに、画面ごとにUIのトーンがバラバラになってしまう現象です。

これは「ビジュアルドリフト」と呼ばれる問題で、AIコーディングエージェントが本質的に抱える課題のひとつです。大規模言語モデル（LLM）は各プロンプトを独立したリクエストとして処理するため、前の画面でどんな色やスペーシングを使ったかを正確に記憶しておくことが難しいのです。

デザインシステムをしっかり整備していても、それをエージェントに毎回のプロンプトで伝えるのは現実的ではありません。StyleGuideやFigmaのリンクを貼り付けても、エージェントが一貫して参照し続けてくれるとは限りませんでした。開発者はAIが生成したコードのビジュアルを毎回手修正する作業に時間を取られ、生産性の向上効果が半減するという悩みを抱えていました。この問題に対して、Googleが2026年に提示したのが「DESIGN.md」という新しいアプローチです。

DESIGN.mdとは — Googleが公開したAIエージェント向けデザインシステム定義フォーマット

DESIGN.mdは、プロジェクトのルートディレクトリに置くMarkdownファイルです。AIコーディングエージェントがUI生成を行う前に読み込む「デザインルールブック」として機能します。

Googleは2026年3月、Design Stitch（Google Labs）のアップデートとともにこの形式を導入しました。同年4月21日には仕様をオープンソースとして公開し、特定のツールやプラットフォームに依存しない汎用フォーマットとして開発コミュニティへの普及を推し進めました。

ファイルの構成はシンプルで、次の二層構造をとります。

• YAMLフロントマター（機械可読層）カラーパレット、フォントサイズ、スペーシングなどのデザイントークンを正確な値で定義します
• Markdown本文（人間可読層）設計原則や制約、適用ガイドを文章で記述します

公式仕様では以下の8つのセクションを順番通りに記述することが推奨されています。

1. Overview（ブランドの個性と感情的な反応目標）
2. Colors（primary・secondaryなどのセマンティック色定義）
3. Typography（フォントファミリー・サイズ・ウェイト）
4. Layout（グリッドモデルと間隔の戦略）
5. Elevation & Depth（視覚的な階層の表現方法）
6. Shapes（角丸などの形状言語）
7. Components（ボタンなど主要コンポーネントのトークングループ）
8. Do's and Don'ts（明示的な禁止事項と推奨事項）

Markdownという平文テキスト形式を採用しているため、どのAIエージェントも追加プラグインなしで読み込むことができます。特定のベンダーへのロックインが発生しない点も、このフォーマットが急速に広まった大きな理由のひとつです。

公開後8日でGitHub上の公式リポジトリが10,000スターを突破し、コミュニティが独自に立ち上げた関連リポジトリ「awesome-design-md」は68,000スターを超えるなど、開発者コミュニティでの反響は異例の規模となりました。

Claude Code・Cursor・Kiro・Windsurfへの導入方法

DESIGN.mdの最大のメリットは、一度ファイルを用意すれば複数のAIコーディングエージェントで共通して使えることです。各ツールでの設定方法を確認しましょう。

Claude Codeの場合
プロジェクト内のCLAUDE.mdファイルにDESIGN.mdへの参照を追加します。

## Design System
Refer to DESIGN.md in the project root for all visual design decisions.

これにより、Claude CodeがUI関連のコードを生成する際に自動でDESIGN.mdを参照するようになります。

Cursorの場合
.cursor/rules/ ディレクトリ内に design.mdc ファイルを作成し、DESIGN.mdを参照する記述を追加します。プロジェクトルールとして登録することで、全てのUI生成時に自動注入されます。

Kiroの場合
.kiro/steering/ ディレクトリにDESIGN.mdを配置するか、同ディレクトリ内のステアリングファイルから参照します。Kiroのステアリング機能はAgentが作業の前に読み込むコンテキストを管理するため、デザインシステムとの相性が良好です。

Windsurfの場合
.windsurfrules ファイルにDESIGN.mdへの参照を追記します。グローバルルールとして設定することも可能です。

いずれのツールも、DESIGN.mdをプロジェクトルートに置くだけでエージェントが自動的に読み込む設計になっており、初期設定の手間は最小限です。designmd.appの公式ガイドページでは、各エージェントごとの詳細なセットアップ手順（前提条件・ファイル配置・動作確認・トラブルシューティング）が丁寧に解説されています。

450超のデザインシステムを収録するオープンライブラリ「designmd.app」

DESIGN.mdの形式を活用したオープンライブラリが designmd.app です。2026年5月時点で450件超のデザインシステムを収録しており、AIコーディングエージェントをすぐに使える状態でまとめたレポジトリとして公開されています。

このライブラリの特徴は「ドロップインで使える」点です。ライブラリから好みのデザインシステムを選んでダウンロードし、プロジェクトのルートディレクトリに置くだけで、Claude Code・Cursor・Kiro・Windsurf・Cline・Google Stitchなどが即座に参照できるようになります。追加設定は不要です。

収録されているデザインシステムのカテゴリーは多岐にわたります。「Warm Code Editor」のような開発ツール向けのスタイル、「Enterprise AI」のような業務システム向けのデザイン、ミニマルなスタートアップ風のテーマなど、プロジェクトの性格に合わせたシステムを選択できます。既存のブランドデザインシステムを参考にしたファイルも収録されており、自社のガイドラインをベースにカスタマイズする出発点として活用できます。

designmd.app以外にも、GitHubリポジトリ「VoltAgent/awesome-design-md」や「getdesign.md」など、コミュニティが整備したリソースが複数存在します。DESIGN.md形式のエコシステムは、Googleの仕様公開から短期間でコミュニティ主導の広がりを見せています。

DESIGN.mdの実際のファイル構成と記述例

実際にDESIGN.mdがどのように書かれているのかを見てみましょう。以下はシンプルなWebアプリケーション向けの骨格例です。

（YAMLフロントマター部分）
colors
  primary = #3B82F6
  secondary = #10B981
  neutral-50 = #F9FAFB
  neutral-900 = #111827
  error = #EF4444
typography
  font-family-sans = "Inter, sans-serif"
  font-size-base = 16px
  font-weight-bold = 700
spacing
  base-unit = 4px
  padding-md = 16px

（Markdown本文部分）
Overview
This design system prioritizes clarity for developer-focused products.

Colors
Use primary blue #3B82F6 for CTAs and interactive elements.

Do's and Don'ts
- DO  Use 4px spacing grid consistently
- DON'T  Mix multiple blue shades in a single component

YAMLフロントマターに実際の値（16進数のカラーコードやピクセル値）を定義し、Markdown本文でそれらの使い方を文章で補足します。AIエージェントはYAMLの値を直接参照しながらMarkdown本文の制約も合わせて読み取ることで、意図したデザインに近いUIを生成できるようになります。

このファイルは開発者が手で書くことも、designmd.appからダウンロードしてカスタマイズすることも、既存のFigmaやデザイントークンJSONからスクリプトで生成することも可能です。チームのワークフローに合わせた柔軟な運用が期待できます。

デザインとAI開発の関係が変わるこれからの開発スタイル

DESIGN.mdの普及は、フロントエンド開発における「デザインとコードの距離」を縮める動きの一環として捉えることができます。これまでデザイナーとエンジニアの協業では、FigmaのデザインデータをコードへHandoffするプロセスが常に課題でした。Style Dictionaryなどでデザイントークンをコードベースへ反映させる仕組みは整備されてきましたが、AIエージェントという新たな「コード生成者」が登場したことで、デザインシステムの伝達経路を再設計する必要が出てきています。

DESIGN.mdは、その経路をシンプルなMarkdownファイルに集約しようとする試みです。デザイナーはFigmaで定義したトークンをYAML形式でエクスポートし、開発チームはそれをプロジェクトルートに置くだけで、あとはAIエージェントが一貫したUIを生成してくれます。

Ragateでは、AIを活用した開発加速を支援するプロジェクトに多く関わっていますが、DESIGN.md形式の採用はUI開発のコストを大幅に削減するポテンシャルを持つと感じています。特にPoCや初期フェーズのプロダクト開発では、デザインシステムを一度整備しておくことで、AIエージェントを活用したスピードアップの効果が最大化されます。フォーマットがGoogle発でオープンソース化されているため、今後各ツールがネイティブサポートを強化していく可能性も高いです。

まずはdesignmd.appから自分のプロジェクトに合ったデザインシステムを選んでダウンロードし、Claude CodeやCursorで動作を確認してみることをおすすめします。実際に手を動かしてみると、ビジュアルドリフト問題の解消効果を体感できるはずです。