はじめに
create-design とは
create-design は、AIコーディングエージェント向けの設計システム文書「DESIGN.md」を自動生成する汎用スキルです。
プロジェクトの要件やブランドガイドラインを入力するだけで、AIエージェント（Claude、Cursor、GitHub Copilot 等）が即座に理解・実装できる構造化されたデザインドキュメントを生成します。
"Markdown is the format LLMs read best, so there's nothing to parse or configure."
Google Stitch との関係
Google Stitch は、Google が開発した AI デザインツールです。Stitch は DESIGN.md というフォーマットを導入し、Markdown ベースでデザインシステムを記述する手法を確立しました。
create-design スキルは、この DESIGN.md フォーマットに完全準拠した文書を生成します。生成された DESIGN.md は以下の用途に使えます:
- Stitch に投入してデザインカンプを生成
- AIコーディングエージェント に渡して直接 UI を実装
- チーム内のデザインガイドライン として共有
できること
DESIGN.md の自動生成
プロジェクト要件やブランドガイドラインから、9セクション構成の DESIGN.md を自動生成します。
/create-design既存デザインプロンプトの変換
すでにデザインプロンプトや断片的なスタイルガイドがある場合、DESIGN.md 形式に変換できます。
/create-design --convert existing-prompt.mdプリセットテンプレートからのクイックスタート
用途に合わせたプリセットテンプレートを使って素早く開始できます。
| テンプレート | 用途 |
|---|---|
dark-gaming | ダーク背景のゲーミングアプリ |
corporate | コーポレートサイト・管理画面 |
minimal-light | ミニマルなライトテーマ |
saas-dashboard | SaaS ダッシュボード |
Stitch 連携ワークフロー
生成した DESIGN.md を Google Stitch に投入し、デザインカンプの生成から実装コードへの変換まで、一気通貫のワークフローを実現します。詳しくは Stitch 連携ガイド を参照してください。
対象ユーザー
AIエージェント（Claude / Cursor / GitHub Copilot 等）を使って UI を実装する すべての開発者 が対象です。
こんな方に最適
- デザイナーがいないチームで UI を実装したい
- AIエージェントにデザインの意図を正確に伝えたい
- プロジェクト横断で一貫したデザインを維持したい
- Stitch で高品質なデザインカンプを素早く生成したい
発動条件
以下のいずれかの場合に create-design スキルが自動的に発動します:
- 「デザインを作りたい」「DESIGN.md を生成して」「Stitch でデザインしたい」等のリクエスト
/create-designコマンドの入力- プロジェクトのデザインシステム構築が必要になった場合
クイックスタート
ステップ 1: スキルの実行
/create-designステップ 2: 対話形式で要件を定義
スキルが起動すると、以下の質問を通じてデザイン要件を収集します:
Q1: プロジェクトの概要を教えてください
→ 例: MTGのデッキ管理Webアプリ
Q2: デザインの方向性は？
→ 例: ダークテーマ、ゲーミング寄り、プロフェッショナル
Q3: ターゲットユーザーは？
→ 例: MTGプレイヤー（初心者〜上級者）
Q4: ブランドカラーやロゴはありますか？
→ 例: メインカラー #7C3AED、MTG5色を使いたいステップ 3: DESIGN.md の生成
要件に基づいて、9セクション構成の DESIGN.md が生成されます。
生成される DESIGN.md の構成
- Visual Theme & Atmosphere
- Color Palette & Roles
- Typography Rules
- Component Stylings
- Layout Principles
- Depth & Elevation
- Do's and Don'ts
- Responsive Behavior
- Agent Prompt Guide
ステップ 4: 活用
生成された DESIGN.md は以下の方法で活用できます:
# Claude Code のプロジェクトに配置
cp DESIGN.md /path/to/your-project/
# AIエージェントが自動的にDESIGN.mdを参照してUI実装# DESIGN.md の内容をコピーしてStitchに貼り付け
# 画面名を指定してデザインカンプを生成次のステップ
- DESIGN.md フォーマット仕様 -- 9セクションの詳細仕様を理解する
- Stitch 連携 -- Google Stitch との連携ワークフローを学ぶ