Claude Designのプロトは「名札＋対応表」でデザインシステムどおりのFigmaにする

どんな問題を解決するか / いつ使うか

Claude Design（やHTMLプロト）で作った画面を、既存のFigmaデザインシステムのコンポーネントで組み直したいとき。ゼロから「同じように組んで」と頼むと、ライブラリのインスタンスがほとんど付かない「それっぽい四角」になりがちなとき。AIでUIを量産するなら、先に「人間が育てたFigmaのDS＋DESIGN.md＋見本」を揃える（10→100向き） や AIで作ったLP・実装をFigmaのデザインデータに戻し、Figma上で赤入れ・編集する とつながる。

やり方

1. プロト生成スキルに名札ルールを足す
   各コンポーネントのいちばん外側に data-ds="ライブラリのコンポーネント名" を付ける。ライブラリに無いものは data-ds="none"。クラス名は生成のたびに変わるので使わない。
2. 対応表（JSON）を用意する
   名札ごとに、置くコンポーネントの key、variant、文言プロパティ、表示切替の取り方を書く。例のイメージ:

"Row/Switch": {
  "key": "<ライブラリのコンポーネントkey>",
  "variant": { "Toggle": "@aria([role=switch],aria-checked)" },
  "text": { "MainText": "@seg(0)" }
}

3. スクリプトで組み立て計画を出す
   プロトHTMLを読み、名札・文言の並び・ARIA（スイッチのON/OFFなど）だけを手がかりに、画面ごと・状態ごとの計画を生成する。AIの推論はここまででほぼ終わり。
4. Figma MCPでテンプレートに差し込む
   ライブラリから key でコンポーネントを読み、プロパティを入れ、ヘッダーや下タブ付きテンプレートのスロットへ状態ごとの画面として差し込む。投稿の実案件では4画面・12状態の組み立てが約20秒だった、とある。
5. ライブラリに無い部品は似た部品で無理に埋めず、点線枠などで「人が作る」と明示する。

うまくいく条件

• 出力形式をスキル／プロンプトに明記する（「同じように」だけでは形がぶれる）。
• 部品をデザインシステムの名前と対応づける（名札が無いと毎回推論任せになる）。
• 必要なコンポーネントとテンプレートをライブラリに公開しておく（未公開部品は置けない）。

注意点・対応状況

• 中身をプロパティで変えられない見本部品、端末別フォント変数の欠落などは自動化できない。
• 仕様書に無い要素はプロト生成のたびに出たり消えたりする。Figma化以前に仕様を固める。
• Figma MCP・Claude Design の手順はツール側の更新で変わる。導入時は公式ドキュメントを確認する。

出典

• 投稿者: @newfulcrum（ふるくらむ）／紹介: @note__design
• 投稿: @note__design · 2026-10-11
• 記事: note.com
• 収集日: 2026-10-12（JST）