デザイナーが使う方法

デザイナーにとってのClaude Codeとは

「デザインはできるけど、コードは書けない」そのギャップを埋めるツールです。FigmaやXDのデザインをコードに変換したり、CSSの微調整を依頼したりできます。

デザイナーが使える具体的な場面

CSSの修正を依頼する

このボタンのスタイルを修正して。
- 現在: 角が四角、背景青
- 変更後: 角丸8px、背景をグラデーション（#4F46E5 → #7C3AED）
- ホバー時は少し暗くなるようにする

コンポーネントを説明から作る

カードコンポーネントを作って。
- 上部にサムネイル画像（16:9比率）
- タイトル（18px、太字）
- 本文（14px、2行まで、超えたら...で省略）
- 右下に「詳しく見る」リンク
- シャドウあり、ホバーで少し浮き上がるアニメーション

レスポンシブ対応を依頼する

このコンポーネントをモバイル対応にして。
スマホ（375px以下）では縦並び、
タブレット（768px以上）では横並びにして。

Figmaから直接（ブラウザMCP使用）

ブラウザMCPを使えば、FigmaのデザインをURLで渡して実装できる。

このFigmaのURLのデザインを実装して。
Next.js + Tailwind CSSを使って。
[FigmaのURL]

※MCP: Model Context Protocol の略。Claude Codeと外部ツール（GitHub・Supabaseなど）を接続するための標準プロトコル。

デザイントークンをコードに落とす

デザインシステムの値をCLAUDE.mdに書いておくと、常に一貫したコードが出てくる。

# CLAUDE.md（デザイン関連）

## デザイントークン
- Primary: #4F46E5
- Secondary: #7C3AED
- Text: #1F2937
- Background: #F9FAFB
- Border radius: 8px（標準）, 4px（小）, 16px（大）
- Shadow: 0 1px 3px rgba(0,0,0,0.1)

## フォント
- 見出し: Noto Sans JP Bold
- 本文: Noto Sans JP Regular
- コード: Cascadia Code

※CLAUDE.md: プロジェクトのルートに置くClaude Code専用の設定ファイル。プロジェクト固有のルールやコンテキストを記述する。※トークン: AIがテキストを処理する最小単位。日本語は1文字あたり約1〜2トークン。使用量に応じてAPIコストが変わる。

画像・アセット関連

alt テキストを自動で付ける

src/components/images/ にある全画像コンポーネントを読んで、
適切なalt属性を追加して。
アクセシビリティを考慮した説明的なテキストを使って。

SVGを最適化する

このSVGコードを最適化して。
不要なパスやグループを削除して、ファイルサイズを小さくして。

[SVGコードを貼る]

注意点

コードの最終確認はエンジニアにしてもらう（特にビジネスロジックに触れる場合）
アニメーションはパフォーマンスへの影響を確認する
生成されたコードは、既存のコードスタイルと合っているかチェックする