DESIGN.mdの例をセクション別に解説
DESIGN.mdを理解する最短の方法は、実物を順に読むことです。AIが読む順序で、各セクションの内容、見た目、配置理由を解説します。この構造をそのまま自分のスタイルのテンプレートにできます。
ファイルの全体構造
正しいDESIGN.mdは同じ順序の3層で構成されます。最初に機械が読む構造化メタデータのfrontmatter、次に色、タイポグラフィ、余白、形状、影、動きを正確な値で示すトークン、最後にトークンを画面へ変えるコンポーネントロジックと使用上のルールです。
順序が重要です。エージェントは上から、定位（これは何か）、語彙（値は何か）、文法（どう組み合わせるか）へ進みます。この形なら戻ったり推測したりせず一度で解析できます。
frontmatter：名前、エッセンス、フラグ
ファイルは少数の項目を持つYAMLブロックで始まります。スタイル名、一文のエッセンス、後のレンダリングを変えるブールフラグです。Bauhausなら「原色のアクセントを持つ幾何学的な明快さ、形態は機能に従う」などと書き、最重要のフラグはダークかどうかです。
小さくても1行あたりの働きは最大です。エッセンスが後の解釈を方向づけ、ダークフラグだけでコントラスト、階層、画像の扱いが変わります。ここだけでも重大な誤りを避けられます。
トークン：役割で名付けた正確な値
The color section lists a named palette where every entry is a role plus an exact value: background <hex>, ink <hex>, a small set of accents <hex>, hairline <hex>. Roles, not appearances — so the agent knows where each color belongs, not just what it looks like.
The typography section names the font families and weights, then gives a type scale as concrete sizes — display, heading, body, caption, each at <px> with a line height. The spacing section states the rhythm the layout snaps to: a base unit in <px> and the steps built on it.
Shape, shadow, and motion round out the vocabulary: corner radii in <px>, elevation levels with their shadow values, and easing curves with durations. Every one of these is a number a machine can apply verbatim — that is the test each line has to pass.
One honest note: the values in this walkthrough are placeholders like <hex> and <px>. The structure of a DESIGN.md is open; the precise values for each of Curio's styles are the paid product. What matters for a template is the shape — swap in your own values and the file works.
適用レイヤー：コンポーネントロジックと境界
トークンの後に頻出コンポーネントの短い宣言ルールを置きます。主ボタンはインク色で塗り、文字は背景色、角丸は形状セクションから、影なし。カードは細線の枠内に置き、ドロップシャドウは使わない。階層は色を足さずサイズとウェイトで表します。
最後に、得意な用途と避ける用途を数文で示します。エディトリアルやマーケティングには向くが、高密度の表やダッシュボードには向かない、といった境界が誤用を防ぎます。
テンプレートとして使うか、実物を入手する
自社ブランドを記述するなら、この解説をテンプレートにしてください。frontmatterで始め、役割ごとにトークンを示し、コンポーネントロジックと境界で終えます。自分の値を入れれば仕様になります。
確立したスタイルが必要なら、ファイルはすでにあります。Curioの全スタイルはこの構造の完全なDESIGN.mdとして実値入りで提供され、AIがMCP、共有リンク、ダウンロードから適用できます。
FAQ
この構造をテンプレートとしてコピーできますか？
はい。構造は公開されており、この記事はコピー用です。frontmatter、役割別トークン、コンポーネントロジック、使用境界という全体形はGoogleの公開DESIGN.md仕様と同じで、対応ツールが読めます。
なぜ実数ではなくプレースホルダーなのですか？
値そのものが製品だからです。DESIGN.mdの構造は公開知識ですが、Curio各スタイルの調査済みトークン値は有料プランで提供します。自社ブランドのファイルには自分の値を入力します。
最小限のDESIGN.mdはどのようなものですか？
名前、エッセンス、ダークフラグを持つfrontmatter、正確な色と文字スケール、余白単位、ボタン・カード・強調の3ルールです。半ページで収まり、形容詞だけのプロンプトより有効です。