🎨
UI生成 & デザインシステム
デザインシステムの構築、DESIGN.md、AIによるUI生成ツール
14
記事
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とは｜DESIGN.mdの書き方・サンプル74ブランド実例集と導入手順
🏷️ 「design」タグの記事
🎛️
📐
🎨
🪐
🎨
🪄
🟦
🎨
🎨
🎨
🏗️
🇯🇵
vgpuとは｜Vercel Labs製WebGPUライブラリを実際に入れて3経路の実行を試した
Refactoring UIの原則をClaude Codeに守らせるスキル｜実測すると発火しない条件がある
designlangとは｜サイトのデザイントークンを1コマンドで抽出、npx版の落とし穴まで実測
Astryxとは｜Metaのデザインシステムが「agent ready」を毎晩shadcn/uiと採点比較している
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 とは｜日本語UI向けDESIGN.md集と本家との違い
