DESIGN.mdとは？AIと進めるUIデザインの共有ガイド

#ai #ui #designsystem

要点

DESIGN.mdは、UIの見た目と判断理由を人とAIで共有する文書です
数値だけでなく、目指す印象や避けたい表現まで言葉にします
さまざまなDESIGN.mdギャラリーサイトや生成方法があります

生成AIでUIのたたき台を作ることは以前より速くなりました。一方で、指示するたびに意図しない方向へ雰囲気が変わり、デザインプロセスが安定しない場面も増えています。そこで役立つのが、デザインの値と意図を一つのMarkdownファイルにまとめるDESIGN.mdです。

DESIGN.mdとは

Google LabsではDESIGN.mdを「デザインシステムをAIエージェントへ永続的・構造的に伝える形式」と位置づけています。任意のYAML Front Matterに機械が扱いやすいデザイントークンを置き、Markdown本文に人が理解しやすい設計意図や適用方法を書く構成が示されています。

たとえば「角丸は8px」と値だけを渡しても、どの部品に適用するのか、例外を認めるのかまでは伝わりません。反対に「親しみやすくする」と文章だけで伝えても、生成される形は毎回変わります。値と理由を組み合わせることで、AIは迷いにくくなり、人は出力をレビューしやすくなります。

なお、公式リポジトリでは、この形式のステータスがalphaとされています。現時点では完成した業界標準として扱うのではなく、チームの実践に合わせて試し、更新していく共有形式と捉えるのがよさそうです。

デザインシステムやプロンプトとの違い

DESIGN.mdは、既存のデザインシステムを置き換えるものではありません。Figmaのライブラリや実装済みコンポーネントが「再利用できる部品」を提供するのに対し、DESIGN.mdはAIが作業を始める前に参照できる、軽量な案内図に近い存在です。既存のトークンやガイドラインから必要な情報を抜き出し、リポジトリ内で読みやすく整理できます。

また、一度きりのプロンプトとも役割が異なります。プロンプトに毎回「青を使う」「カードの角丸は小さく」と書くと、更新漏れや表現の揺れが起こります。判断をDESIGN.mdへ寄せれば、依頼文は「DESIGN.mdに従って設定画面を作る」のように短くでき、複数画面や別の作業セッションでも同じ前提を使えます。

大切なのは、ファイルを置くだけで自動的に参照されるとは限らないことです。利用するツールの指示ファイルやプロンプトに「UI作業の前にDESIGN.mdを読む」と明記し、実際の出力にルールが反映されているか確認する必要があります。

何を書くと役立つのか

公式仕様には、Overview、Colors、Typography、Layout、Elevation & Depth、Shapes、Components、Do's and Don'tsという順序が示されています。すべてを最初から埋める必要はありません。まずは次の三つから始めると、短い文書でも判断基準として機能します。

目指す印象：誰に向けた画面で、どのような感情を持ってほしいか
よく使う値：色、文字、余白、角丸など、繰り返し現れるトークン
境界線：採用する表現と、ブランドに合わないため避ける表現

簡略化すると、次のように記述できます。

---
name: Example Product
colors:
  primary: "#2457D6"
  surface: "#FFFFFF"
  text: "#172033"
spacing:
  sm: 8px
  md: 16px
rounded:
  sm: 4px
  md: 8px
---

## Overview

業務中に長時間使う管理画面です。装飾よりも一覧性を優先し、
落ち着きがあり、次の操作に迷わない見た目を目指します。

## Components

- Primary Buttonは画面内の主要操作にだけ使います
- Cardを入れ子にせず、余白と区切り線で階層を示します

## Do's and Don'ts

- 状態は色だけでなく、ラベルやアイコンでも伝えます
- 背景のグラデーションを主要な情報領域に使いません

色名はblueではなくprimaryやsurfaceのように役割で命名すると、その役割を保ったまま値を差し替えられます。本文には「どこで使うか」「なぜ必要か」を書き、単なる数値一覧にしないことがポイントです。

参考にできるギャラリーとツール

DESIGN.mdのギャラリーサイトは数多くあります。

プラットフォーム名	用途
DESIGNmd	コミュニティのデザインを探す
designmd.app	500件以上のデザインを比較する
Free Design MD	無料・登録不要のデザインを探す
designmd.sh	GitHubで公開されたデザインを探す
DesignMD	実在ブランドのデザインを探す・生成する
Refero Styles	実在プロダクトのデザインシステムを研究する

また、既存のWebページからスクリーンショットやデザイン情報を取得するDesign MD Generator（GitHub）というツールもあります。取得した情報をお使いのAIエージェントに読み込ませ、DESIGN.mdを生成してもらう方法もあります。

おわりに

可能性を広げる方法が多様になり、何から始めればよいのかわからないことも多いと思います。こうしたギャラリーサイトを参考に、ほかの人がどのように作っているのかを見ることは、新しい概念を理解するための第一歩になるのではないでしょうか。

AIを使う目的は、これまでのデザインの仕事を単に合理化することだけではありません。今まで自分では思いつかなかった可能性を広げ、眠っていた課題を解決する創造的なアイデアを生み出せるよう、これからも学習と開発を進めていきたいと思います。

DEV Community