Figma で画面を組まずに Claude Code で動くプロトタイプを作る: トークンの CSS 1枚＋DESIGN.md、部品は CSS コピーか SVG で渡す
Figma は「デザイン情報の読み取り元」にとどめ、画面と遷移は Claude Code に作らせる。既存デザインからのズレを抑える鍵は、全プロトタイプが読む「デザイントークンの CSS 1枚」と、意図と使い分けを書いた DESIGN.md の二段構え。
どんな時に使う？
- ユーザー検証用のプロトタイプを Figma で線をつないで作るのが重い
- 検索で絞り込む、入力を保存して別画面に出す、カメラを使う、など「本物に近い挙動」まで試したい
- 既存アプリのデザインにそろえたプロトタイプを短期間で何本も作る
手順
- 小さく試す: まず単純な1機能だけ Claude Code で作る（Goodpatch の例では、着手から約4日で2機能が FIX）
- デザイン情報の渡し方を使い分ける。部品単位では、Figma の CSS コピー機能と SVG の直接渡しが、スクリーンショットよりずっと正確
- デザイントークン（色・余白・文字など）を定義した CSS を1枚作り、すべてのプロトタイプから読み込む。Figma 側が変わったらこの1枚だけ直す
- 原則・命名規則・トークン・部品の使い分け・運用ルールを Markdown にまとめた DESIGN.md を置き、Claude Code が常に参照できるようにする（CSS は「数字の正解」、DESIGN.md は「なぜ・どう使い分けるか」）
- 比較案は会話で並行して作る（「A 案は強調、B 案は控えめに」）。複数案を1枚の HTML に並べ、その上で触れる「提案書」にもできる
- 検証の合間に指摘を反映し、次の参加者からは改善版を触ってもらう
共有のしかた
- プロトタイプは HTML なので配信の仕組みが要る。Goodpatch では、HTML をアップロードして URL で限定配信するミニサービスも Claude Code で作った
- クライアントワークではプロトタイプ自体が NDA 対象。アクセス制限、パスワード、配信期限、推測しにくい URL は自分で設計しきる
注意点
- Figma が要らなくなるわけではない。デザインシステムの整備、情報設計の見直し、ビジュアルの方向性そろえは引き続き Figma が主役
- AI は放っておくと「それっぽいが微妙にズレた UI」を出す（色味、余白のスケール、フォントウェイト）。トークンの CSS と DESIGN.md はそのための対策
- DESIGN.md の書き方は AI 向け DESIGN.md は「値」ではなく「なぜ・いつ」を書き、守らせる部分は lint にする、日本語 UI 向け DESIGN.md: 和文フォント・行間・字間を先に書く
出典
- @kc_at_ 2026-05-21: @kc_at_ · 2026-05-21
- Goodpatch Blog「気付けば、Figmaで画面を作らなくなっていた。デザイナーがバイブコーディングでプロトタイプを作った話」: goodpatch.com