AIとデザインシステム
デザインシステムとは、UIコンポーネント・カラー・タイポグラフィ・スペーシングなどの設計ルールを体系化したものです。Material Design（Google）やHuman Interface Guidelines（Apple）が有名です。
2026年現在、AIコーディングツールの普及により「AIにUIを生成させる」ケースが急増しています。
デザインシステムなしでAIにUIを任せると毎回バラバラなデザインになります。DESIGN.mdやデザイントークンで制約を与えることで、一貫性のあるUI生成が可能になります。
DESIGN.mdとは
DESIGN.mdは、AIコーディングツール（Claude Code、Cursor等）にデザインルールを伝えるためのMarkdownファイルです。プロジェクトルートに配置すると、AIがUIを生成する際に自動的に参照します。
含めるべき内容:
- カラーパレット（プライマリ、セカンダリ、アクセント）
- タイポグラフィ（フォント、サイズ、ウェイト）
- スペーシングルール（4px/8pxグリッド等）
- コンポーネントパターン（ボタン、カード、フォーム）
- レスポンシブ対応のブレークポイント
主要ツール
| ツール | 特徴 |
|---|---|
| Claude Design | Anthropicの新機能。プロンプトからUIプロトタイプ生成 |
| v0 (Vercel) | Next.js + shadcn/uiベースのUI生成 |
| Figma | 業界標準のデザインツール。AI連携が進化中 |
| shadcn/ui | コピペで使えるReactコンポーネント集 |
このトピックの読み方
デザインシステムを理解したい → 下の「まずこれを読む」のデザインシステム入門から。
DESIGN.mdを書きたい → DESIGN.md入門でフォーマットと書き方を学べます。
AIデザインツールを試したい → awesome-design-mdで58+の実例テンプレートを参照できます。
