Claude-Native Designer — デザイナーが「作る人」になる Figma MCP × Claude Code ワークフロー

@felixleezd（Felix Lee）氏のポストが注目を集めています。ADPList の共同創業者であり、1,500 人以上のデザイナーに Vibe Coding を教えてきた Felix Lee 氏が、4 ヶ月の実践から導いた「Claude-Native Designer」のワークフローを公開しました。

If you want to ship products you designed, stop using Figma only. Do it on Claude Code instead.

Autonomous AI = memory + planning + tools + safety + collaboration. It’s a system, not a prompt.

「デザインの未来はコードを学ぶことではない。ビルドすることを学ぶことだ」— この記事の核心は、デザイナーが抱えてきた「アイデアはあるが実装できない」という壁が、Claude Code によって構造的に消滅したという主張です。

デザイナーの天井 — 7 年間の経験が語る構造的問題

Felix Lee 氏は Gotrade（YC S19）と ADPList で 7 年間デザインに携わってきました。その間、デザイナーが直面する共通の天井を目撃しています。

従来のデザイナーの壁:

  アイデア → Figma モックアップ → ブリーフ作成 → エンジニア待ち → 優先度調整
                                                    ↑
                                              数日〜数週間のブロック

Claude-Native Designer:

  アイデア → Claude Code に記述 → 動くプロダクト → レビュー → 修正 → 出荷
                                    ↑
                               数時間で完了

ADPList での機能実装を例に挙げています。通常ならエンジニアとのやり取りで数日かかる作業が、Claude Code で数時間で完了しました。「モックアップでもプロトタイプでもない。動くアプリだ」と記しています。

なぜ汎用 AI が専用ツールに勝つのか

Felix Lee 氏は Framer AI、Figma Make、Lovable など、デザイナー向け AI ツールを一通り試した上で、汎用の Claude Code を選択しています。

ツール強み限界
Framer AI画面生成が速い生成で止まる。ロジック・データ・デプロイは別途必要
Figma MakeFigma 内で完結Figma エコシステムの外に出られない
Lovableランディングページに最適複雑なアプリケーションには不向き
Claude Codeデザイン・ロジック・コピー・コード全て学習コストあり。コーディング知識は不要だが「意図の伝達力」が必要

The real leverage is the tool that can hold the full context of what you’re building: the design, the logic, the copy, the code, and move fluidly between them.

専用ツールは「画面の生成」に特化しています。しかし出荷するプロダクトは画面だけではありません。データベース、認証、API 連携、デプロイまで含めた「全体のコンテキスト」を一つの会話で保持できることが、Claude Code の本質的な優位性です。

3 つのワークフロー — 実践の全貌

1. Figma MCP — デザインファイルが「生きる」

Figma MCP（Model Context Protocol）は、Claude Code と Figma の双方向接続を実現します。2026 年 2 月に Figma が公式に「Code to Canvas」として発表しました。

1
2

# Claude Code に Figma MCP を追加
claude mcp add --transport http figma https://mcp.figma.com/mcp

ワークフロー:

Figma でデザイン
    ↓
Claude Code で Figma MCP 接続
    ↓
Claude がフレームを読み取り
（コンポーネント・デザイントークン・スペーシングを理解）
    ↓
デザインを忠実に反映したコードを生成
    ↓
「Send this to Figma」で逆方向にも変換可能

従来の「デザイン→エンジニアへの翻訳→解釈のズレ」という問題が構造的に解消されます。MCP はスクリーンショットを渡すのではなく、コンポーネント構造・変数・スタイル・レイアウトを意味的に読み取ります。

Felix Lee 氏の実例では、FigJam のフローチャートから Figma MCP 経由でテトリスゲームを一発で構築しています。

2. Claude Code — 「記述→レビュー→修正」の反復

Felix Lee 氏は過去に 3 回「コードを学ぶ」ことに挑戦し、すべて挫折しています。Claude Code が根本的に異なるのは、コードを書くのではなく、意図を記述してレビューする点です。

実際のワークフロー:

1. 機能を平文の英語で記述
2. Claude が第一版を構築
3. ビジュアルでレビュー
4. 「ここが違う」と Claude に伝える
5. Claude が修正
6. 繰り返し

My design eye, the thing I’ve spent a decade sharpening, is exactly what makes me good at this.

10 年磨いてきた「デザインの目」— パディングの過不足、フォントウェイトの違和感、インタラクションのぎこちなさを瞬時に見抜く能力 — が、Claude Code との協業で最大の武器になるという指摘は重要です。

3. プロトタイピング — 思考速度で実動するもの

従来のプロトタイプClaude Code プロトタイプ
Figma でクリッカブルに仕上げる（2 時間）Claude に説明する
プレゼン → フィードバック → 再修正ブラウザで実際に動く
「見た目は動く」「本当に動く」
所要時間: 2 日所要時間: 30 分

The feedback I get is completely different when something works versus when something looks like it works. Real interactions surface real problems.

実動するプロトタイプはスマホでテストでき、ユーザーに直接送れ、ステークホルダーに見せられます。「見た目が動く」と「本当に動く」では、得られるフィードバックの質が根本的に異なります。

コンテキストファイル — Claude-Native の核心

Felix Lee 氏が最も強調するのが「コンテキストファイル」の重要性です。

Claude Code doesn’t know your product. Your users. Your constraints. Your opinion on how something should feel.

空の Claude 会話はゼロからのスタートです。しかし CLAUDE.md にプロダクトコンテキストを教えておけば、すべての会話がその基盤の上に構築されます。

CLAUDE.md のデザイナー向け構成例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

# プロダクトコンテキスト

## プロダクト概要
- ADPList はデザイナー向けメンタリングプラットフォーム
- ターゲットユーザー: キャリア初期〜中期のデザイナー

## デザイン原則
- ミニマルで余白を活かす
- アクセシビリティ WCAG AA 準拠
- モバイルファースト

## デザインシステム
- カラー: プライマリ #4F46E5, セカンダリ #10B981
- フォント: Inter（UI）, Playfair Display（見出し）
- スペーシング: 4px グリッドベース

## 「良い」の基準
- ローディング状態がスムーズ
- エラー状態が親切
- インタラクションに微細なアニメーション

The output quality difference is night and day. Claude stops producing generic. It starts producing yours.

「Claude-Native Designer」とは何か

Felix Lee 氏の定義は明確です。

A Claude-native designer isn’t someone who uses AI to make Figma faster. It’s someone who uses Claude to operate as a full product team.

従来のデザイナーClaude-Native Designer
Figma でデザイン → エンジニアに渡すデザイン → 構築 → 出荷まで一人で
アイデアを持ち、実行を待つアイデアを持ち、自分で実行する
「デザイナー」「ビルダー」
AI で Figma を速くするAI でプロダクトチームとして機能する

Design. Prototype. Build. Ship. — この 4 つを一人で回せることが「新しいベースライン」です。

2026 年のデザイナー市場の変化

ADPList のデータによると、2026 年初頭から予約の 42% が AI 関連（Vibe Code、ワークフロー、ツール）になっています。8,000 人以上のデザイナーが Vibe-Coding for Designers School に登録し、Google・Apple・Meta のデザイナーも受講しています。

ADPList のカリキュラム構成

Day内容
1インストール（Mac + Windows）
2インターフェース理解
3初回プロジェクト
4GitHub + バージョン管理
5Vercel デプロイ
6カスタムドメイン
7Supabase + OpenAI 統合
BonusAI エージェント + Figma MCP

7 日間でインストールからデータベース連携・AI 統合までカバーする構成は、「コードを学ぶ」のではなく「ビルドを学ぶ」という思想を反映しています。

正直な部分 — 学習曲線は存在する

Felix Lee 氏は楽観的な煽りに終わらず、率直な注意も述べています。

To be clear, learning Figma MCP and Claude Code is not easy. There’s a real learning curve. The first few sessions will be frustrating.

ただし、「ゼロからコードを学ぶ」こととの根本的な違いは、**学ぶべきスキルが「意図の明確な伝達」**であることです。4 時間かけてボタンを動かすのではなく、「このボタンのパディングが大きすぎる」と伝える力です。

The gap between a designer who can only design and a designer who can design and build is the gap between having ideas and shipping them. That gap used to require years of engineering experience to close. Now it requires a few weeks of genuine practice with Claude Code.

まとめ

  • 「デザイナー」から「ビルダー」へ: Claude Code によって「アイデアはあるが実装できない」という構造的壁が消滅。ADPList の機能実装が数日→数時間に短縮された実例
  • 汎用 AI > 専用ツール: Framer AI や Figma Make は画面生成に特化するが、Claude Code はデザイン・ロジック・コード・デプロイの全コンテキストを一つの会話で保持できる
  • Figma MCP が翻訳問題を解決: MCP がデザインファイルを意味的に読み取り、「デザインしたもの」と「実装されたもの」のズレを構造的に排除。双方向（Code to Canvas）も実現
  • デザインの目が最大の武器: コードを書く能力ではなく、10 年磨いた「違和感を瞬時に見抜く目」が Claude Code との協業で最も重要なスキルになる
  • CLAUDE.md がコンテキストの基盤: プロダクト概要・デザイン原則・「良い」の基準を CLAUDE.md に定義することで、出力品質が「汎用的」から「自分のプロダクト」に変わる
  • 市場は動いている: ADPList の予約の 42% が AI 関連に。8,000 人以上が受講し、「デザイナーがビルドする」は一部の先進事例ではなく市場トレンドになりつつある

参考