概要
ADPListのCEO Felix Lee が、デザイナーとしての新しいワークフローを公開。「Claude-Native Designer」として、Figmaでデザインを作ってエンジニアに渡すのではなく、Claude Codeで直接プロダクトを構築するアプローチを4ヶ月実践した結果を共有している。
出典: @felixleezd — 2026-03-04 / ADPList Substack
エンゲージメント: 1,047いいね、2,948ブックマーク、241K閲覧
Felix Leeとは
- ADPList CEO（デザインメンタリングプラットフォーム）
- Gotrade（YC S19）出身
- 10M+人向けにプロダクトをデザインしてきた実績
- 「Vibe Coding for Designers」コースを提供
「Design it by building it」
従来のワークフロー
Figmaでデザイン → ハンドオフミーティング → エンジニアが実装 → フィードバック → 修正依頼 → ...
Claude-Native Designer
Claude Codeで直接構築 → 動くプロダクト → 実際のフィードバック → 即座に修正
「design it, hand it off, wait」から「design it by building it」への転換で、ハンドオフミーティングをスキップできる。ビジョンが直接プロダクトになる。説明も、待ち時間も、ズレもない。」 — @heybeaconhq
コンテキストファイルの活用
Felix Leeが提唱する重要な実践：
「Claude Codeにあなたの思考法、デザイン原則、プロダクトのコンテキスト、基準を教えると、すべての会話がその基盤の上に構築される。」
コンテキストファイルとは
# ADPList Context
## プロダクトについて
- ADPListはデザインメンタリングプラットフォーム
- ユーザーは成長志向のデザイナー
## デザイン原則
- シンプルさを優先
- 明確なCTA
- モバイルファースト
## 「良い」の基準
- 読み込み2秒以内
- アクセシビリティAA準拠
- ...
このファイルを claude.md としてプロジェクトに配置すると、Claude Codeが毎回その文脈を踏まえて作業する。
実績：48時間で3つのプロダクト
1. パーソナルサイト + AIチャット
- AIが質問に答えるチャットウィジェット付き
- 48時間で完成
2. 成長デザインツール
- ウェブサイトUIを分析（コンバージョン率、UX、コピー）
- データベース連携、ユーザー認証、AI推薦
- 3日で構築、500+ユーザー獲得
3. Tetrisゲーム
- FigJamのフローチャートからFigma MCP経由で構築
- コードに一切触れず
Vibe Codingの始め方
Step 1: インストール
npm install -g @anthropic-ai/claude-code
claude
Step 2: 計画から始める（重要）
いきなりコードを書かせず、まず計画を立てさせる：
I want to build a personal portfolio website with:
- A hero section with my name and tagline
- A projects section showing 4 recent works
- An about section with my bio
- A contact section
Research the best way to build this and create a plan.md file.
Step 3: フィードバックループ
Make the hero section full-height (100vh). Center the text vertically.
The projects section looks cramped. Add more padding — at least 32px.
Add a subtle hover effect on the project cards.
デザイナーとしてのフィードバック力がそのまま活きる。
Step 4: デプロイ
Deploy this project to Vercel.
コミュニティの反応
- 「動くものと動くように見えるもの、フィードバックが全然違う」 — @heycamzyn
- 「Figmaでピクセルを動かさない日もある」 — @princhipeh
- 「最初は何回かフラストレーションがある。でも慣れてくるとフローになる」 — @s_austerberry
- 「コンテキストファイルを追加するのはスマートな動き」 — @AzeemM0hammad
個人開発者への示唆
1. デザイナーのアドバンテージ
Felix Leeは「デザイナーはすでにフィードバックの仕方を知っている」と指摘。コードは書けなくても、何が良いデザインかを言語化できることが強み。
2. ハンドオフの消滅
「ハンドオフミーティング」という翻訳レイヤーがなくなる。ビジョンがそのままプロダクトになる。
3. 最初のフラストレーションを乗り越える
「最初の数セッションはフラストレーションが溜まる。Claudeに何かを作らせても、想像と違う。でも、癖を理解し、プロンプトの仕方を学ぶと、結果が良くなる。」
関連リソース
- Substack: Claude Code guide for designers
- コース: Vibe Coding for Designers
- X: @felixleezd