CONCEPT

CLAUDE.md と design.md の役割分担

前のセクションで学んだ CLAUDE.md に加えて、デザイン専用のファイル design.md を用意します。役割を分けておくと、更新も管理もしやすくなります。

観点CLAUDE.mddesign.md
扱う内容プロジェクト全体のルール・指示デザインに関する仕様のみ
位置づけAIへの指示書デザイントークンの定義
更新の頻度たまにデザイン変更のたびに

おすすめ両方を作り、CLAUDE.mdで全体ルール、design.mdでデザイン詳細を管理するのが基本の形です。

TEMPLATE

design.md テンプレート①カラー・タイポグラフィ

## カラーパレット
プライマリ #1A1A2E
セカンダリ #E94560
背景     #F8F9FA
テキスト  #333333
薄い文字  #666666
ボーダー  #E0E0E0
## タイポグラフィ
見出し Noto Serif JP
本文  Noto Sans JP
ベース 16px / 行間 1.8
h1 48px（SP 32px）
h2 36px（SP 24px）
h3 24px（SP 20px）
本文 16px / 小 14px

design.md テンプレート②余白・コンポーネント

## 余白
セクション間 PC 120px
           SP 60px
カード内   24px
ボタン    14px 28px
## コンポーネント
ボタン
  角丸 4px
  プライマリ 背景#E94560 文字#FFF
  セカンダリ 透明 ボーダー#1A1A2E
カード
  角丸 8px / 背景#FFF
  影 0 2px 8px rgba(0,0,0,.08)

design.md テンプレート③ブレークポイント

最後に、画面幅ごとの切り替え基準（ブレークポイント）を書いておくと、レスポンシブ対応の指示が正確に伝わります。

## ブレークポイント
モバイル   〜767px
タブレット  768px 〜 1024px
PC       1025px 〜

つまりカラー・タイポ・余白・コンポーネント・ブレークポイントを分けて書けば、AIが迷わずに同じデザインを再現できます。

STEP

Figma のスタイルから design.md を作る

すでにFigmaでデザインを作っている場合は、そこにある値をそのまま design.md に移すのが確実です。次の手順で進めます。

1

スタイルを確認する

Figmaのデザインシステムのページや Styles を開く。

2

値をコピーする

カラー・フォント・余白の値をコピーする。

3

design.md に整理する

コピーした値を design.md に貼り、テンプレートの形に整える。

4

AIに指示する

「design.mdのルールに従ってコーディングして」と伝える。

発展Figma MCP を使えば、この値の取り込みを自動化することもできます（17番で解説）。

ノーコードサロン