DESIGN.mdとは？AIコーディングエージェントが読み込むデザインファイル（無料のモバイルアプリ例付き）

DESIGN.mdは、プロダクトのビジュアルアイデンティティをAIコーディングエージェントに対して定義するMarkdownファイルです。Google Labsのフォーマットでは、オプションのYAMLデザイントークンと、その使用方法に関する文章によるガイドラインを組み合わせて記述します。これにより、エージェントはインターフェースを生成する前に、カラー、タイポグラフィ、スペーシング、コンポーネントの具体的なルールを読み取ることができます。

モバイルアプリの開発者にとって特に便利なのは、そうしたデザインの選択を次の画面へと引き継げる点です。まずは当サイトの無料モバイルDESIGN.mdライブラリからファイルを1つ選び、並べて表示される画面を確認しながら、ご自身のアプリに合わせてルールを調整してみてください。

DESIGN.mdを開発したのは誰ですか？

Google Labsは、Stitchで採用されているDESIGN.mdフォーマットを公開しています。Googleは2026年3月のStitch発表でDESIGN.mdのインポートおよびエクスポート機能を導入し、4月にはドラフト仕様をオープンソース化しました。公式リポジトリでは現在もこのフォーマットをアルファ版と位置付けているため、連携機能を構築する際は最新の仕様を確認してください。

DESIGN.mdという名前のファイルは、一般的なプロジェクトドキュメントの場合もあります。共有する際は、どのフォーマットを使用しているかを明記し、元のテキストを確認できるようにしておきましょう。

DESIGN.mdファイルには何が含まれますか？

Google Labsの仕様には、オプションのYAMLフロントマターを持つMarkdownの本文構造が記述されています。トークングループはカラー、タイポグラフィ、角丸（rounded）、スペーシング、コンポーネントをカバーします。本文では、アクセントカラーをどこに配置すべきか、ボタンとカードでどのような違いを持たせるかといった決定事項を解説します。正確な値と文章でのガイドラインは、それぞれ異なる役割を果たします。

仕様ではHex値を含むCSSカラー文字列が使用できます。YAML内でHexカラーを指定する際はダブルクォートで囲んでください。クォートしないハッシュ記号（#）はコメントの開始とみなされます。{colors.primary}のような参照は、ファイル内の別のトークンを指します。Sleekのライブラリでは、ダウンロード前にパレットを確認できるよう、元のテキストの横にHexスウォッチを表示しています。

最小限のDESIGN.mdの例とはどのようなものですか？

スターターとなるDESIGN.mdは、パレット、本文スタイル、スペーシング値、ボタンといった1つの小さなビジュアルシステムを記述できます。以下の例はこのガイド用に作成されたものです。これをDESIGN.mdとして保存し、モバイルアプリの必要に応じてルールを追加していってください。これはあくまで出発点であり、完成されたコンポーネントライブラリではありません。

---
version: alpha
name: Quiet Blue Mobile
colors:
  primary: "#2459C4"
  on-primary: "#FFFFFF"
  surface: "#FAF8F3"
  on-surface: "#20242B"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  md: 12px
spacing:
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---
## Overview
A quiet mobile interface with cream surfaces and blue actions.

## Colors
Use primary for actions. Keep reading surfaces cream.

## Typography
Use body-md for reading text. Keep labels short.

## Layout
Use spacing.md for screen gutters and related content groups.

## Shapes
Use rounded.md on cards and buttons.

## Components
Primary buttons use button-primary. Keep one main action per view.

## Do's and Don'ts
Keep text readable at larger system font sizes.
Do not use color as the only signal for an error.

追加した内容はリポジトリのlintコマンドでチェックできます。lintの検出結果により、参照切れやカラーペアのコントラストの問題を発見できます。ただし、実際の画面表示の確認も怠らないでください。テキストファイルでは、見切れてしまったラベルやわかりにくいコントロール、フォームを隠してしまうキーボードなどを確認することはできません。

npx @google/design.md lint DESIGN.md

Claude CodeでDESIGN.mdを使うには？

DESIGN.mdをプロジェクトに置き、UIの作業時に読むようClaude Codeに依頼します。Anthropicのメモリ機能のドキュメントによると、CLAUDE.mdのインポートはセッション開始時に読み込まれます。必要なときだけ読むには、通常のパスで参照するか、.claude/rules/にUIファイルと一致するpathsパターンを指定したルールを作成します。

例えば、@によるインポートを使わず、次の指示をCLAUDE.mdに追加します：

For UI tasks, read DESIGN.md before creating or changing app screens.

その後、具体的な画面とその状態（ステート）の作成を依頼します。例えば、空の状態（empty state）や同期失敗状態（failed-sync state）を含むタスクリストを要求してみましょう。生成されたUIがファイル内の値に従っているかレビューし、意図的にデザインを変更した際はファイルも更新します。より広範なワークフローについては、当サイトのClaudeを使ったデザインガイドをご覧ください。

CursorやStitchでDESIGN.mdを使うには？

Cursorでは、タスクにDESIGN.mdを明示的に添付するか、プロジェクトルールから参照します。Stitchでは、DESIGN.mdのインポートおよびエクスポート機能を利用して、プロジェクト間でデザインルールを引き継ぎます。この違いは重要です。コーディングエージェントはコンテキスト内にファイルを必要としますが、Stitchは同フォーマットを中心としたワークフローを提供しています。

Cursorの場合、ルールに関するドキュメントでプロジェクトルールとファイル参照について説明されています。ルールを設定することで、UIの変更時にDESIGN.mdを読み込むようエージェントに指示できます。無関係なバックエンドタスクに長いデザインドキュメントが含まれないよう、ルールが適用されるタイミングを適切に選択してください。

Stitchの場合、GoogleのDESIGN.md発表記事で、プロジェクト間でデザインルールをインポートおよびエクスポートできることが説明されています。インポート後は、生成された画面を元データと比較し、必要に応じてルールを調整してください。

SleekではモバイルアプリのスタイルにDESIGN.mdをどのように活用していますか？

Sleekでは、カスタマイズ可能な注目のリファレンスごとにデザインファイルを保持しています。「このスタイルを使う」を選択してアプリの概要を入力すると、Sleekはそのファイルとブリーフ（概要指示）を組み合わせて生成処理へ渡します。ファイルがビジュアルを定義し、ブリーフがアプリの目的とコンテンツを決定します。画面とファイルは事前に入念に確認することができます。

リファレンスギャラリーとDESIGN.mdライブラリでは、同じ注目プロジェクトが使用されています。SleekはGoogle Labsの構造を使い、枠線や影などのコンポーネントプロパティを追加しています。これらのプロパティはリンターで警告として報告されます。アイコン、イラストレーション、階層構造、特徴的なビジュアル詳細に関するガイダンスも追加しています。スタイルファイルには、新しいアプリを生成するための見た目の選択を記録します。

ライブラリ内でスタイルを開くとDESIGN.mdをコピーまたはダウンロードできます。また、Use this style in Sleek を選択してアプリのアイデアを入力することも可能です。お使いのコーディング環境からSleekを操作したい場合は、別個の連携方法を解説したエージェント設定ガイドを参照してください。

DESIGN.mdに関するFAQ