DESIGN.mdとは？Google Stitchで試す、AI時代のUI設計書【Web Design Talk】

こんにちは、How many designs です。
Web Design Talk というタイトルで、デザインに関するお話を少しだけ書いていこうと思います。気軽に読んでいただければ幸いです。

What is DESIGN.md?

Google が提供する次世代の UI デザインツール Google Stitch における DESIGN.md は、プロジェクト全体で一貫性のあるUIを生成するためにAIエージェントが読み込むデザインシステムドキュメントです。

一言で言うと「AI のためのデザイン説明書」です。

通常、デザイン案には、色、フォント、間隔、コンポーネントスタイルといった視覚的なアイデンティティがあります。従来、これらはFigmaファイル、ブランドPDF、あるいはデザイナーの頭の中に存在していました。しかし、これらはAIエージェントには読み取れません。

DESIGN.mdはこの状況を変えます。人間もエージェントも読み、編集し、適用できるプレーンテキストのデザインシステムドキュメントです。

通常、デザインのルール（色やフォント、余白など）は Figma などのツール内に保存されますが、Stitch はそれを Markdown（.md）形式のテキストファイルとして書き出します。

なぜこれが画期的なのか？

これまでのデザインツールは「絵」として情報を保持していましたが、Stitch はそれを「指示書（プロンプトの種）」として扱います。AIと共存していくこれからのワークフローにおいて、以下の点で大きなメリットがあります。

• エンジニアとの連携が爆速: エンジニアが DESIGN.md を AI 駆動のコーディングツール（Cursor や Claude Code など）に読み込ませれば、AI はそのルールを守ったまま完璧な CSS/React コンポーネントを実装してくれます。

• デザインの自動更新: Stitch 上でデザインを変更すると DESIGN.md も更新されるため、常に最新のルールを AI と共有できます。

つまり、DESIGN.md は、「デザインのこだわりを AI が理解できる言葉に言語化した」ものです。これがあるおかげで、AI は「なんとなく」ではなく、デザイナーの意図を理解して UI を作れるようになります。

DESIGN.md の役割

このファイルの最大の目的は、「AI（Gemini や Claude など）に、あなたのサイトのデザインルールを正確に理解させること」です。

StitchのようなデザインエージェントがDESIGN.mdを読み込むと、生成されるすべての画面が同じ視覚ルール（カラーパレット、タイポグラフィ、コンポーネントパターン）に従います。DESIGN.mdが無い場合は、AIが理解できるデザインルールが無いので、各画面のデザインはバラバラになります。プロンプトだけでデザインを統一するのはかなり難しい、というのがこれまでのバイブデザインの課題でした。

DESIGN.md の特徴

DESIGN.mdは人間とAIを橋渡しするためのドキュメントです。具体的には以下のような特徴を持っています。

• 共通言語: 人間が見ても分かりやすく、AI にとっても読み取りやすい形式で、デザインの「正解」が書かれています。

• 一貫性の維持: 「ボタンの角丸は何ピクセルか？」「メインの色は何番か？」といったルールが明文化されているため、AI が新しい画面を生成してもデザインが崩れません。

• ポータビリティ: ただのテキストファイルなので、他のプロジェクトやコードベースにコピー＆ペーストするだけで、デザインシステムを丸ごと持ち運べます。

DESIGN.md には何が書かれているの？

Stitchは、完全なデザインシステム（色、タイポグラフィ、間隔、コンポーネントスタイル）を生成し、DESIGN.mdとしてまとめます。
また、Stitchではマークダウンのドキュメントだけでなく、キャンバス上にビジュアルボードを作成してくれます。DESIGN.mdの内容を視覚的に理解することができます。

DESIGN.md の作り方

Google StitchでDESIGN.mdを作成する方法は、簡単なものから精密なものまで、3つあります。

Stitchのプロンプトからデザインシステムを作成する

プロンプトでエージェントに生成させる雰囲気を記述します。プロンプトからデザインの意図をトークンとガイドラインに変換します。

プロンプト例

温かみのある色使い、丸みを帯びた角、親しみやすい雰囲気の、遊び心のあるコーヒーショップの注文アプリ

既存のURLやデザインから派生させる

既にあるURLまたは画像を提供します。エージェントは、既存のデータからカラーパレット、タイポグラフィ、スタイルパターンを抽出し、DESIGN.mdを作成します。

手書きで作成する

DESIGN.mdを直接作成し、デザインに関する詳細な設定を記述できます。すべてのセクションはMarkdown形式です。特別な構文やツールは必要ありません。

関連記事

Google Stich について記事を書いています。ご覧いただければ幸いです。

ハンズオン: DESIGN.mdを使ってサイトのリニューアル案を出してみる

1. 既存のWebサイトからDESIGN.mdを作成させる

リニューアルなので、すでにある現行のWebサイトのURLをStitchに渡してDESIGN.mdを作成させます。

読み込ませたWebサイトは以下のようなデザインです。

Sritchに指示したプロンプト

このページからDESIGN.mdを作成
{URL}

2. Stitchが作成したDESIGN.md を確認

概要、カラー、タイポグラフィなどが詳細に書かれていて、かなりのボリュームでした。人の手で作ろうとすると結構時間がかかると思いますが、Stitchならすぐに作成してくれます。AIが得意とする作業ですね。

具体的には以下の項目に整理されていました。

1. Overview & Creative North Star

2. Colors

3. Typography

4. Elevation & Depth

5. Components

6. Do's and Don'ts（すべき、すべきでないこと）

また、キャンバスにビジュアルボードも作成してくれます。色やタイポグラフィをAIがどのように汲み取っているのか視覚的にもわかりやすいですね。

3. DESIGN.md を踏まえたリニューアル案を出す

プロンプトで以下のように指示してみました。プロジェクトにDESIGN.mdがあるので、プロンプトで指定しなくても参照してくれると思います。

Webサイトのリニューアル案を作成。  
・デスクトップ版のみ 
・最上部はキービジュアル。 

情報の優先度は以下の通り。
・キービジュアル
・リコメンド商品の紹介 
・定番商品の紹介 
・店舗情報 
・コンセプトの紹介

4. Stitchが作成したデザイン案からはデザイナーの本領発揮

Stitchは以下の画像のようなデザイン案を出してくれました。DESIGN.mdがあるのでトンマナが大きく外れることありません。

リニューアル案のたたきとしては十分なクオリティだと思います。パワポの構成レベルではなく画像までしっかり生成されているので、イメージの方向性をつかみやすいで。ここからデザイナーがブラッシュアップしていく作業に入れば、ワークフローが大きく変わりますね！データはエクスポートして Figmaに持っていくこともできます。

5. デザインから即座にモックアップを作成する

Google Stitchではデザインから即座にコードを作成することができます。

Webデザインはインタラクティブ性を前提としているので、絵としてのデザインが成立していても実際に操作すると修正が必要になることがよくあります。操作感を確かめるにはモックアップが必要ですが、そのためにはコーディング作業が必要でした。

Stichで生成されたコードはダウンロードしてブラウザですぐに動かして試すことができます。また、クラウドのエディタであればコードをペーストするだけで動作するので簡単です。

今回はStitchで生成されたコードをCodePenに貼り付けてみました。Webサイトとして普通にブラウズできるのはもちろんですが、画像にオンマウスした時のアニメーションなどが特に指示していなくても実装されているので驚きました。

まとめ

DESIGN.md は、デザインのこだわりを AI が理解できる言葉に言語化します。AIはデザインの良さを判断できませんが、言語化された指示を守ることは得意です。人間でしかできないデザインの本質的な作業と、AIの生産性を橋渡しする機能としてDESIGN.mdは非常に建設的だと思います。

AIを活用した「バイブデザイン」という新しいワークフローにぜひ挑戦してみてください。