デザイナーがコードを書く時代——と言われて久しいが、2026年の現実はもっと先を行っている。Claude Codeの登場により、デザイナーが自然言語でプロダクトを直接構築するワークフローが急速に広がっている。
本記事では、英語圏・日本語圏の実例をもとに、デザイナーのClaude Code活用ユースケースを22カテゴリで網羅的に整理した。
Part 1: Figma連携
1. Figma → Code（デザインからコードへ）
Figma MCPサーバーを通じて、Figmaのデザインデータを直接Claude Codeに読み込み、プロダクション品質のコードを生成するワークフロー。
具体的な流れ:
- Figma MCPを
claude mcp add --transport http figma https://mcp.figma.com/mcpでインストール - FigmaのレイヤーリンクをClaude Codeに共有
get_variable_defsでデザイントークン（カラー・タイポグラフィ・スペーシング）を自動抽出- CSS変数 → Tailwind設定へ自動変換
- コンポーネントのバリアント・ステートを含むReactコンポーネントを生成
- Storybook MCPと連携してドキュメントも自動生成
劇的な時間短縮の実測値（Zenn kimmaru氏）:
| 作業 | Before | After |
|---|---|---|
| テキスト抽出（3言語） | 2-3時間 | 5分 |
| レイアウト確認+レスポンシブ | 3-5時間 | 約0 |
| 実装 | 1-2時間 | 15分 |
| 合計（1ページ） | 約8時間 | 約20分 |
成功の鍵はFigmaでAuto Layoutが適切に設定されていること。なければ手動で値を拾う作業に逆戻りする。
参考: Figma MCP x Claude Codeで1ページ8時間の作業が20分になった話（Zenn）
2. Code → Figma（Code to Canvas）
2026年2月にFigmaとAnthropicが共同発表した「Code to Canvas」機能。Claude Codeで構築したUIをFigmaの編集可能なフレームに変換する。
具体的な流れ:
- Claude Codeでローカル/ステージング/本番のUIを構築
- 「Send this to Figma」と入力
- ブラウザのレンダリング状態がFigma互換フレームに自動変換
- Figmaキャンバス上でアノテーション・比較・編集が可能
ポイント: スクリーンショットではなく実際に編集可能なフレームとして変換される。MCP Serverがコンポーネント・変数・スタイル・レイアウト構造を読み取る。
ユースケース:
- マルチスクリーンフローのキャプチャ（オンボーディング、チェックアウト、設定画面を一括で）
- エンジニアが実装したUIをデザインレビュー用にFigmaへ逆輸入
- コードで素早く作ったバリエーションをFigma上で並べて比較検討
制約: Figmaデスクトップアプリが必要（ブラウザ版では動作しない）。
参考: From Claude Code to Figma（Figma公式ブログ）/ PR TIMES日本語プレスリリース
3. 双方向デザインループ
Figma MCPとCode to Canvasを組み合わせた完全な双方向ワークフロー。
Figma（デザイン） → Claude Code（実装） → ブラウザ（確認）
↑ ↓
← ← ← ← Code to Canvas（Figmaへ戻す） ← ← ←
デザイナーがFigmaで変更 → Claude CodeがFigma MCPで差分を取得 → コード更新 → Code to Canvasでデザイナーに戻す。デザインとコードの乖離がリアルタイムで解消される。
デザイン対話の重心が「どう作るか」から「どの案を発展させるか」へ移行する。
参考: The Figma + Claude Code Bidirectional Loop, Explained（railly.dev）
4. FigmaプラグインによるAd広告バリエーション生成
Anthropicのグロースマーケティングチームが社内で構築した事例。Claude Codeで開発したFigmaプラグインが、ヘッドラインと説明文の組み合わせを自動スワップし、最大100パターンの広告バリエーションを半秒で生成する。
従来は数時間かかっていたコピー&ペースト作業をほぼゼロにした。
参考: How Anthropic Teams Use Claude Code（Anthropic公式ブログ）
Part 2: プロトタイピング・アプリ構築
5. 高速プロトタイピング
アイデアから動くプロトタイプまでを数時間〜数日で実現。
事例:
- ヴィンテージ時計検索エージェント: デザイナーが週末でAI搭載の検索・監視ツールを構築（Nervegna Substack）
- ECサイトプロトタイプ: 非エンジニアPMが30分で構築（梶谷健人氏）
- インタラクティブな技術提案書: 静的モックアップの代わりにAI駆動のコンバージョン最適化デモを構築。開発調整時間を約80%削減
- FigJamフローチャートからテトリス: Felix Lee氏がFigJamのフローチャートからFigma MCPでテトリスゲームをワンショット生成
構造化ワークフロー（GSD方式）:
/gsd:new-project— 前提の確認・要件整理・ロードマップ作成/gsd:discuss-phase N— 美学・レスポンシブ挙動・インタラクションを言語化/gsd:plan-phase N— 並列リサーチエージェントでタスク計画/gsd:execute-phase N— 並列実行＋自動アトミックコミット/gsd:verify-work N— UAT＋自動修正プラン生成
6. 完全なアプリ構築（バイブコーディング）
デザイナーがClaude Codeだけで、アイデアからデプロイまでを完結させる。
事例:
- ファイル転送サービス: ASOLAB社の非エンジニアが24時間で自社ブランドのサービスを開発
- レシピアプリ「にゃんでもCHEF」: Xtone社デザイナーが2週間のハッカソンで開発。「数分でWebページが完成する衝撃」を体験
- バナー生成Webアプリ（Vibe Draw）: GMO MAKESHOP社。デザイナーがFigmaでテンプレートルールを定義 → 非デザイナーが自然言語でバナー生成。制作期間を2週間超 → 約10時間に短縮
- IoTアプリ: AWS Data Lakeバックエンド含む組み込みIoTアプリを1週間で構築
Xtone社デザイナーの学び:
- 細かいデザイン反映は苦手。既存モックへの後付け修正が特に難しい
- 新規ファイルから作成させると仕上がりが良い
- CLAUDE.mdにルール統一して毎回の説明を省略するのが有効
- 「スタイリッシュ」「任天堂風」など指向性で指示すると叩き台になる
参考: デザイナーが挑んだ初ハッカソン：Claude Codeでレシピアプリを作ってみた学び（Xtone）
7. ポートフォリオサイト構築
デザイナーが自分のポートフォリオをClaude Codeで構築するユースケース。
フェーズ分割の例:
- Foundation: プロジェクト構造とデザインシステムセットアップ
- Core Layout: ヒーローセクション（48pxの名前、18pxのタグライン）、プロジェクトグリッド（48pxギャップ＋ホバーステート）、カードレイアウト（16:9画像＋プレースホルダー）
- Content & Polish: プロジェクトデータ統合、レスポンシブ画像最適化、モバイルナビ改善
- Deployment: Vercelセットアップ＋カスタムドメイン設定
メリット: デザイナーが自分の作品を最も理解している。意図をそのままコードに反映できるため、エンジニアへの依頼より高い完成度が実現しやすい。
参考: Claude Code for Designers: A Practical Guide（Nervegna Substack）
8. ランディングページ・マーケティングサイト構築
コンバージョン最適化されたLPをClaude Codeで構築。
ワークフロー:
- 戦略定義（ICP、USP、競合差別化ポイント）
- Figmaでデザイン基盤を作成
- CLAUDE.mdにブランドガイドラインを定義してClaude Codeに読ませる
- レスポンシブ対応のWebサイトを生成
- 自然言語でフィードバックしながら反復
- Vercelでデプロイ
注意点: CLAUDE.mdにスタイルガイドラインがないと、ブランドから外れた結果になる。
参考: How to Build Websites with Claude Code That Look Good（raduan.xyz）
9. ライブデザイン（リアルタイムプロトタイピング）
ステークホルダーの目の前でClaude Codeを使い、リアルタイムにプロトタイプを変更しながら要件を詰める手法。坪田朋氏が提唱。
要件定義・デザイン・プロトタイピングが一つの行為に融合する。従来の「要件を固める → デザイン → 実装 → レビュー」という逐次プロセスが不要になる。
参考: デザイナーがFigmaを閉じて、AIエージェントでデザインする日はいつ来るのか（坪田朋）
Part 3: デザインシステム・UI品質
10. デザインシステムの構築・管理
デザイントークンの定義からコンポーネント生成、Storybook連携まで。
具体的な活用:
- トークン定義: Figma変数 → CSS変数/Tailwind設定への自動変換
- コンポーネントスキャフォールド: バリアント・アクセシビリティ・TypeScript型を含む完全なコンポーネント生成
- 一貫性の維持: CLAUDE.mdにデザインルールを記述し、すべての生成物がデザインシステムに準拠
- セマンティックトークン:
#FF0000ではなくcolor-errorのような変数を使用させることでブランド規則を一貫
Hexabase社のチーム運用:
- シングルソース原則 — Figmaとコード間で設計変数を1対1対応
skill.mdをチーム全員で共有- Atomic Design原則に従い、既存ライブラリの組み合わせのみ許可
- 技術スタック固定（Next.js + Tailwind CSS）でAIとの親和性を最大化
参考: Claude Skillsでバイブコーディングを卒業する（Hexabase）
11. デザイントークンの管理・変換
Figma MCPと連携した、トークン管理の専門的なユースケース。
ワークフロー:
- Figmaでカラー・タイポグラフィ・スペーシングの変数を定義
- Claude Codeが
get_variable_defsで取得 - CSS Custom Properties / Tailwind config / Style Dictionary形式に変換
- 既存コードベースでハードコードされた値をトークンに置換する監査も可能
Dhika Endi Astowo氏（Design Systems Collective） がVS Code + Claude Codeでのトークン管理ワークフローを詳細に解説している。
参考: How I built Figma design tokens using Claude Code（goodenoughdesigner Substack）
12. 脱「AIっぽい」UIの実現
AI生成UIの最大の課題はDistributional convergence（分布の収束）。統計的に安全な選択に偏り、どれも似た見た目になる。
解決策1: 公式frontend-designスキル（約400トークン）
| 軸 | 方針 | 避けるべきもの |
|---|---|---|
| タイポグラフィ | JetBrains Mono、Space Grotesk等 | Inter、Roboto、Arial |
| カラー | 支配的な色＋鋭いアクセント | 均等配分の無難なパレット |
| モーション | ページロードのスタガードアニメーション | 散漫なマイクロインタラクション |
| 背景 | グラデーション・パターンで深度演出 | 単色ベタ塗り |
解決策2: CLAUDE.mdに3行書くだけ
グラデーション禁止、白背景、装飾は最小限
これだけでも劇的な改善が報告されている。
解決策3: 美学方向性の明示指定
frontend-designプラグインでは、brutalist / maximalist / retro-futuristic / luxury / playful 等の方向性を選択でき、生成開始前にデザインフレームワーク（目的・対象者・美学）を確立する。
参考: Skills機能で「AIっぽい」UIから脱却する方法（Zenn tmasuyama1114氏）/ Claude Code公式プラグイン「frontend-design」完全解説（note AI-Driven Lab）
13. Storybook MCP連携（コンポーネントカタログ管理）
@storybook/addon-mcpでClaude Codeとコンポーネントカタログを接続。
機能:
- Component Manifest: バリデーション済みprop型、使用例、JSDocドキュメント、テストスイート
- コンポーネント検索: 既存コンポーネントをクエリして重複生成を防止
- Story URL取得: ビジュアル検証用のURL
セットアップ:
npx storybook add @storybook/addon-mcp
claude mcp add storybook-mcp --transport http http://localhost:PORT/mcp
デザイナーのメリット: 新しいコンポーネントを作る際、Claude Codeが自動的にStorybookを参照し、既存のデザインシステムコンポーネントを再利用する。重複や不整合を防げる。
参考: Supercharge Your Design System with LLMs and Storybook MCP（Codrops）
14. CSSアニメーション・マイクロインタラクション生成
Claude Codeで動きのあるUIを生成する専門ユースケース。
対応技術:
- CSS-only:
@keyframes、transitions、animation-delayでスタガードリビール - JavaScript: GSAP、Motion（Framer Motion）、anime.js
- React: ステート駆動トランジション
- SVGアニメーション: パスモーフィング、ドローイングエフェクト
- 動画生成: Remotion連携でプログラマティックビデオ
コミュニティスキル: Motion Design Principles Emil Kowalski、Jakub Krehel、Jhey Tompkinsのアニメーション作品をベースにした、コンテキストに応じたフィードバックを提供するスキル。
公式スキルの推奨: 「散漫なマイクロインタラクションより、一つの統合されたページロードアニメーション（スタガードリビール）の方がデライトを生む」
参考: Generate Animated Effects for the Web with Claude（UX Planet）
Part 4: コピー・コンテンツ
15. UXコピーライティング
スクリーンショットやFigmaデザインを貼り付け、インターフェースのコピーを提案・反復修正する。
Clinton Halpin氏のMCP構成:
- Figma MCP: デザインコンテキスト
- Linear MCP: タスクの背景情報
- Notion MCP: ブランドガイド・用語集
- Context7 MCP: API呼び出しのハルシネーション防止
Linear（タスク背景）+ Notion（ブランドガイド）+ Figma（デザイン文脈）を同時接続することで、汎用的なコピーではなくプロダクト固有の文脈に沿ったテキストが生成される。
参考: Using Claude Code for Product Design（Clinton Halpin）
16. マーケティング広告のバリエーション量産
Anthropicグロースマーケティングチームの社内事例。
ワークフロー:
- 数百件のAd広告データ（CSV）をClaude Codeに渡す
- 2つの専門サブエージェントが並列で動作:
- サブエージェントA: パフォーマンスの低い広告を特定
- サブエージェントB: 文字数制限内で新バリエーションを生成
- 数百の新しい広告を数分で生成（従来は数時間）
別途、Figmaプラグインも構築し、ヘッドライン×説明文の組み合わせで最大100パターンを半秒で生成。
参考: How Anthropic Teams Use Claude Code（Anthropic公式ブログ）
Part 5: 品質保証・テスト
17. デザインQA・ビジュアルテスト
Playwright MCPやChrome DevTools MCPを使い、実装されたUIをデザインと比較検証。
ツールチェーン:
- Playwright MCP: スクリーンショット取得・要素検証・レスポンシブテスト
- Chrome DevTools MCP: コンソールログ・ネットワーク・パフォーマンス分析・コンピューテッドスタイルの読み取り
- Puppeteer MCP: サンドボックスブラウザでの動作確認
デザイナーのメリット:
- 「このページのボタンが仕様と違う」と自然言語で指示するだけで修正コードを生成
- 30秒のFigma修正が数時間で本番反映（従来は数日かかるレビューサイクル）
高度な活用: マルチモーダルビジュアルテスト
claude-code-frontend-devプラグインは、Claude 4.5 Sonnetのビジョン機能を活用したクローズドループテストを実現。コード生成 → スクリーンショット → 視覚分析 → 修正を自動反復。
参考: Chrome DevTools MCP（Google公式GitHub）
18. レスポンシブデザインテスト
複数ビューポートでの表示を自動検証する専門ユースケース。
ワークフロー:
「Playwrightで localhost:3000/dashboard を
375px、768px、1440pxの幅でキャプチャして、
レイアウトが正しいか教えて」
Claude Codeが3つのビューポートでスクリーンショットを取得し、マルチモーダル機能で視覚的に分析。オーバーフロー、テキスト切れ、レイアウト崩れを報告し、修正コードも生成する。
参考: Playwright MCP with Claude Code（Simon Willison）
19. アクセシビリティ監査
AccessLintプラグインをはじめとするアクセシビリティスキルで、WCAG準拠を自動チェック。
AccessLintプラグインの機能:
- コントラストチェッカー: hex/rgb/rgba入力でWCAGコントラスト比を計算
- 色のみの情報伝達チェック: WCAG 1.4.1準拠の自動分析
- 包括的コードレビュー: 多段階のアクセシビリティ監査
コミュニティスキル:
accessibility-test-scanner: WCAG 2.1/2.2準拠スキャン、ARIAバリデーション、キーボードナビゲーション検証、スクリーンリーダー互換性評価accessibility-wcag: 包括的WCAGガイダンス- UI/UX Design Expert skill: WCAG 2.2＋インクルーシブインターフェース
インストール:
claude plugin marketplace add accesslint/claude-marketplace
参考: AccessLint Claude Marketplace（GitHub）/ Top 8 Claude Skills for UI/UX Engineers（Snyk）
20. エラーステート・エッジケースの設計改善
Anthropicプロダクトデザインチームの社内事例。
従来: エラーステートやエッジケースは実装後に発見されがち Claude Code活用後: デザインフェーズでClaude Codeにエラーステートとエッジケースのマッピングを依頼。設計初期段階で網羅的に洗い出し、「初期デザインの品質を根本的に改善」した。
参考: How Anthropic Teams Use Claude Code（Anthropic公式ブログ）
Part 6: ビジュアルアセット
21. SVG・ロゴ・アイコン生成
Claude Codeの高いコーディング能力を活かし、SVGコードでビジュアルアセットを生成。
できること:
- ロゴデザイン: 会話でコンセプトを探り、SVGロゴを反復生成
- アイコンセット: 統一されたスタイルのアイコンをコードで量産
- フローチャート・技術図表: 無限にスケーラブルなベクター図
- CSSアート・アニメーション: インタラクティブなビジュアル要素
ツール連携:
- SVGMaker MCP: Claude Code/Cursor/VS Codeから直接SVGの生成・編集・変換
- Superdesign MCP: UIデザイン・ワイヤーフレーム・ロゴ・SVGアイコンを自動ファイル整理付きで生成
制約: ラスター画像は生成不可。幾何学的・構造的なデザインは得意だが、詳細で有機的な表現は苦手。
参考: Claude Code SVG Logo Design Skill（Jeremy Watt's Blog）
22. バナー・クリエイティブの量産ワークフロー
GMO MAKESHOPの「Vibe Draw」事例に代表される、デザイナーとAIの分業モデル。
ワークフロー:
- デザイナーがFigmaでベーステンプレートを作成（色彩・フォント・レイアウトのルールを定義）
- 非デザイナーが自然言語でAIイラストを生成（「デザイナーとマーケターのコラボレーション」等）
- テンプレートルールに従ってレイアウトに統合
- デザイナーがSlackで10分レビュー
デザイナーの新しい役割: テンプレート設計者・ブランド基準策定者・品質レビュワー。制作実行ではなく戦略的クリエイティブ業務に集中。
参考: 非エンジニアのバイブコーディング体験（GMO MAKESHOP Tech Blog）
Part 7: ノーコード・外部ツール連携
23. Webflow MCP連携
Webflow公式のClaude連携コネクタで、ノーコードデザイナーのワークフローを強化。
できること:
- CMS コンテンツの管理
- コレクションの作成
- クラスの更新
- 変数の管理
- SEO / コンテンツ / ユーザビリティの監査
- カスタムコードの適用
3分以内にセットアップ完了。自然言語でWebflowプロジェクトを操作できる。
参考: Webflow Meets Claude（Webflow Blog）
24. Framer MCP連携
Framer MCPプラグインでClaude CodeとFramerデザインを直接接続。セキュアなトンネル接続でAIツールがFramerのデザインと対話できる。
参考: Framer Workshop with Claude（Framer公式）
Part 8: ワークフロー・チーム運用
25. デザインハンドオフの自動化
MC Dean氏が構築した63のデザインスキル集（8プラグイン・27コマンド）による、ハンドオフドキュメントの自動生成。
主要コマンド:
/handoff— 寸法・挙動・エッジケース・QAチェックリスト付きの開発者向けパッケージ/evaluate— 重要度別ヒューリスティック評価/discover— ユーザーリサーチ/strategize— デザイン戦略/write-case-study— ケーススタディ作成
MC Dean氏: 「創造的な飛躍、テイスト、直感……それはまだ私たちのもの。しかしフレームワーク、チェックリスト、構造的知識……それはツールと共有できる」
参考: I Built 63 Design Skills for Claude（MC Dean, Substack）
26. 非技術メンバーの環境構築・オンボーディング
デザイナーやPMがClaude Codeを使い始めるための環境セットアップ自体をClaude Codeに委任。
Clinton Halpin氏の/setupスキル:
- SSHキーの設定
- Node.jsバージョン管理
- パッケージマネージャーの導入
- よく使うコマンドの許可リスト設定
- Shell/AppleScriptによるプッシュ通知（Claude Codeがフィードバックを待っている時にターミナルを開く）
安全な参加ルートの設計:
- リポジトリのクローン = Figmaファイルの複製と同じ心理モデル
- Plan Modeで変更の提案のみ先に確認
- 権限モードでAIの自律度をコントロール
- 最悪の場合は削除して再クローン
参考: Claude Code for Designers（Builder.io）/ Using Claude Code for Product Design（Clinton Halpin）
27. Hooks によるデザインワークフロー自動化
Claude CodeのHooks機能（ライフサイクルイベントに応じたコマンド実行）をデザインワークフローに活用。
| イベント | デザイン活用例 |
|---|---|
PostToolUse（Edit/Write） |
CSS/HTMLの自動フォーマット（Prettier/Stylelint） |
PreToolUse（Edit/Write） |
デザイントークンファイルの保護（無断変更をブロック） |
Stop |
完了前にデザインスペック準拠を検証 |
Notification |
デザインタスク完了のデスクトップ通知 |
PostToolUse（Bash） |
コード変更後のビジュアルリグレッションテスト自動実行 |
SessionStart（compact） |
コンテキスト圧縮後にデザインシステムルールを再注入 |
参考: Claude Code Hooks Guide（公式ドキュメント）
28. Agent Teamsによるデザインチーム分業
Claude CodeのAgent Teams機能で複数のAIエージェントを並列実行。
フリーランスデザイナーのHanako Shinzato氏が体験を報告。「バリバリコードを書けるエンジニアではない」立場からの学びを共有している。
デザイナー視点の活用:
- リサーチエージェント＋実装エージェントの並列実行
- 品質チェックエージェントによる自動レビュー
- 各エージェントに異なるスキル・コンテキストを付与
参考: デザイナーだけど、Claude Code Agent Teams使ってみた（note Hanako Shinzato氏）
Part 9: バイブデザイン（日本発の概念）
29. バイブデザイン
坪田朋氏が提唱する、バイブコーディングのデザイン版。「なんとなくこんな感じ」「もっといい雰囲気にして」といった直感的な指示でUIを構築する手法。
坪田氏の実践:
- Claude Code（CLI版）だけで記事詳細ページを1時間でデザイン
- CLAUDE.mdにデザインシステム（CSS変数、セマンティッククラス、禁止パターン）を定義
- フィードバックは「意図」だけ伝え、デザインシステムのクラス名で指示すると精度向上
- 最終的な審美的判断は人間が行う
要点: バイブデザインでも「自分らしいUI」にはデザインシステムが判断基準として必要。
参考: Claude Codeで「バイブデザイン」を始めよう（坪田朋氏）
Part 10: その他の専門ユースケース
30. 法務チームのツール構築
Anthropicの法務チームがClaude Codeで「電話ツリーシステム」を構築。チームメンバーが適切な弁護士に素早くつながるためのプロトタイプ。非技術部門がエンジニアリソースなしでカスタムツールを構築する事例。
参考: How Anthropic Teams Use Claude Code（Anthropic公式ブログ）
31. データ可視化アプリ構築
Anthropicのデータサイエンティスト（非ML背景）が、TypeScriptの素養がないにもかかわらず、モデルパフォーマンスを可視化する完全なReactアプリケーションをワンショットプロンプティングで構築。
32. Claude Cowork（非技術者向け新インターフェース）
2026年1月発表。Claude Codeの機能をより使いやすいチャットインターフェースで提供。ターミナル操作のハードルをさらに下げ、デザイナーの参入障壁を低減。
参考: 非エンジニアのためのClaude Code / Coworkベストプラクティス（Zenn storehero）
デザイナーの役割はどう変わるか
共通して浮かび上がるのは、デザイナーの価値が**「制作実行者」から「戦略設計者」へシフト**しているという点だ。
| 従来の役割 | 新しい役割 |
|---|---|
| UIの制作実行 | フレームワーク・ルールの設計 |
| ピクセルパーフェクトの追求 | 品質基準の定義と監査 |
| エンジニアへの仕様伝達 | AIへの意図伝達（プロンプト設計） |
| 1つのデザインの完成 | 複数バリエーションの比較検討 |
| ツール操作のスキル | 判断力・選択眼 |
Netflixのデザインシステムチームからは「もはや職種の境界線を引く意味がない」という発言も出ている。
アオキタカユキ氏の問いかけ: Claude CodeにUIデザインの面倒な仕事を任せた結果、OOUI（オブジェクト指向UI）やHIG準拠の出力が得られた。しかし「これ誰のためのサービスなんだっけ？」という問いが浮上。ユーザー中心設計の意思決定や問題定義は、AIには委任できない人間の仕事。
Oikon氏（X投稿）: 「デザイナーが直接動くUIを作るためのClaude Codeへのプロンプトは、エンジニアでは気付けない観点も含まれると思う。エンジニアがFigma makeなどでデザインの領域に足を踏み入れるように、デザイナーもClaude Codeでコーディングの領域に足を踏み入れるべき」
まとめ: 始めるなら何から？
| レベル | おすすめユースケース | 必要なもの |
|---|---|---|
| 入門 | UXコピーライティング（#15） | Claude Code + Figma MCP |
| 入門 | バイブデザイン（#29） | Claude Code + CLAUDE.md |
| 初級 | デザインQA（#17） | + Playwright MCP |
| 初級 | 脱AIっぽいUI（#12） | + frontend-designスキル |
| 中級 | Figma→Code変換（#1） | + デザイントークン整備 |
| 中級 | ポートフォリオ構築（#7） | + Vercel |
| 上級 | 双方向ループ（#3） | + Code to Canvas + チーム運用 |
| 上級 | デザインシステム管理（#10） | + Storybook MCP |
| 発展 | 完全なアプリ構築（#6） | + Supabase |
| 発展 | ライブデザイン（#9） | + ステークホルダー同席 |
推奨セットアップ（フロントエンド/UI/UXデザイナー向け）
| レイヤー | ツール | 用途 |
|---|---|---|
| デザインソース | Figma MCP | デザイン読み取り・トークン抽出・Code to Canvas |
| コード生成 | Claude Code + frontend-designスキル | 個性的で高品質なUI生成 |
| コンポーネント管理 | Storybook MCP | 既存DSコンポーネントの再利用 |
| ビジュアル検証 | Playwright MCP | マルチビューポートスクリーンショット |
| ライブ検査 | Chrome DevTools MCP | コンピューテッドスタイル・レイアウトデバッグ |
| アクセシビリティ | AccessLintプラグイン | WCAGコントラスト・ARIA検証 |
| 自動化 | Hooks | 自動フォーマット・テスト・QAゲート |
| デザイントークン | CLAUDE.md + Skills | トークンシステムの一貫適用 |
Claude Codeは「デザイナーがコードを学ぶ」ツールではない。デザイナーの意図をコードに翻訳する通訳者だ。翻訳の質を上げるために、CLAUDE.mdでのルール定義やSkillsの活用が重要になる。
まずは小さく始めて、自分のワークフローに合うユースケースを見つけてほしい。
主要ソース一覧
公式:
- Figma Blog: From Claude Code to Figma / The Future of Design Is Code and Canvas
- Anthropic: How Anthropic Teams Use Claude Code / Improving Frontend Design Through Skills
- Claude Code Hooks Guide
英語圏:
- Clinton Halpin: Using Claude Code for Product Design
- Nervegna Substack: Claude Code for Designers Practical Guide
- Builder.io: Claude Code for Designers / Claude Code to Figma
- MC Dean: I Built 63 Design Skills for Claude
- UX Planet: Claude Code + Figma
- Design Systems Collective: Design System Designer with Claude Code
日本語圏:
- 坪田朋: バイブデザイン / Figmaを閉じてAIエージェントでデザインする日
- 梶谷健人: Claude Codeはエンジニア以外も使うべきツール（note）
- Xtone: デザイナーが挑んだ初ハッカソン
- GMO MAKESHOP: 非エンジニアのバイブコーディング体験
- Zenn: Figma MCP x Claude Codeで8時間→20分 / Skills機能で脱AIっぽいUI
- Hexabase: Claude Skillsでバイブコーディングを卒業する
- note AI-Driven Lab: frontend-design完全解説
- Hanako Shinzato: Agent Teams体験記（note）