AIとデザインシステム

デザインシステムとは、UIコンポーネント・カラー・タイポグラフィ・スペーシングなどの設計ルールを体系化したものです。Material Design（Google）やHuman Interface Guidelines（Apple）が有名です。

2026年現在、AIコーディングツールの普及により「AIにUIを生成させる」ケースが急増しています。

DESIGN.mdとは

DESIGN.mdは、AIコーディングツール（Claude Code、Cursor等）にデザインルールを伝えるためのMarkdownファイルです。プロジェクトルートに配置すると、AIがUIを生成する際に自動的に参照します。

含めるべき内容:

• カラーパレット（プライマリ、セカンダリ、アクセント）
• タイポグラフィ（フォント、サイズ、ウェイト）
• スペーシングルール（4px/8pxグリッド等）
• コンポーネントパターン（ボタン、カード、フォーム）
• レスポンシブ対応のブレークポイント

主要ツール

このトピックの読み方

デザインシステムを理解したい → 下の「まずこれを読む」のデザインシステム入門から。

DESIGN.mdを書きたい → DESIGN.md入門でフォーマットと書き方を学べます。

AIデザインツールを試したい → awesome-design-mdで58+の実例テンプレートを参照できます。