🎨
UI生成 & デザインシステム
デザインシステムの構築、DESIGN.md、AIによるUI生成ツール
10
記事
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+の実例テンプレートを参照できます。
📄 関連記事（2件）
📐
🎨
design.mdとは？AIエージェントに一貫UIを生成させるデザイン仕様書の書き方入門
awesome-design-md｜73ブランドのDESIGN.md実例集とdesign.mdの書き方
🏷️ 「design」タグの記事
🎨
🪄
🟦
🎨
🎨
🎨
🏗️
🇯🇵
🎨
🎨
tweakcnとは｜shadcn/uiのテーマをノーコードで視覚編集しCSSを吐く使い方を実機解説
tamboとは｜LLMがReactのUIを組み立てる『生成UI』SDKの仕組みと使い方を実機解説
Square UI解説｜shadcn/uiレイアウト20種を実機デモで全検証｜MITから独自ライセンスへ
claude-design-system-prompt解説｜AI slopに抗うデザイン系プロンプト集
Penpot徹底解説：自己ホストできるオープンソースのデザイン基盤とFigma代替の実力
ux-ui-agent-skills徹底解説｜Claudeを“シニア設計者”に変えるOSSスキル集【DTCG/WCAG】
フロントエンドのクリーンアーキテクチャ完全解説｜依存の方向を制御してReactを「替えられる部品」にする設計論
awesome-design-md-jp：378サイトの日本語UI DESIGN.md集（CJKタイポグラフィ拡張）
Open Design：Claude DesignのOSS代替、72デザインシステム×10AIエージェント対応
Claude for Creative Work徹底解説｜9つのMCPコネクタでBlender・Adobe・Ableton連携
