デザインシステムの構築、DESIGN.md、AIによるUI生成ツール
デザインシステムとは、UIコンポーネント・カラー・タイポグラフィ・スペーシングなどの設計ルールを体系化したものです。Material Design（Google）やHuman Interface Guidelines（Apple）が有名です。
2026年現在、AIコーディングツールの普及により「AIにUIを生成させる」ケースが急増しています。
DESIGN.mdは、AIコーディングツール（Claude Code、Cursor等）にデザインルールを伝えるためのMarkdownファイルです。プロジェクトルートに配置すると、AIがUIを生成する際に自動的に参照します。
含めるべき内容:
| ツール | 特徴 |
|---|---|
| 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+の実例テンプレートを参照できます。