こんにちは！マエカワです。今日はGoogleのAIデザインツール「Stitch」をClaude Code経由で操作して、FigmaデザインをどこまでAIで再現できるのか検証してみました。結論から言うと「ラフ出しには使えるけど、忠実再現は厳しい」です。

使ったAIツール

• Claude Code（Opus 4.6）— メインの操作・指示出し
• Stitch（Google MCP）— AIデザイン生成
• Figma MCP — デザイン情報の取得

GoogleのAIデザインツール「Stitch」でFigma再現チャレンジ

背景

Stitchは Googleが提供するAIデザインツールで、テキストプロンプトからUIデザインを生成できます。MCP（Model Context Protocol）サーバー経由でClaude Codeからも操作可能。これを使って、ENSPORTSのFigmaデザインをどこまで忠実に再現できるか検証してみました。

やったこと

① Figma MCP でデザイン情報を取得 FigmaのURLからget_design_contextでコンポーネント構造・カラー・フォント・レイアウト情報をまるっと取得。これをStitch用のプロンプトに変換。

② Stitch で画面生成 → 修正を繰り返す ENSPORTSのスワイプ画面（プロフィールカード）を再現。 ClaudeにフレームのURLを渡して初回生成し、「ヘッダー削除」「ボトムナビ削除」「テキスト修正」「写真差し替え」「ボタンラベル削除」「アクションバーをオーバーレイ化」などを段階的に修正。

③ グリッドレイアウトの生成 20人のプロフィールカードを3列グリッドで並べる画面も生成。Figmaの参考セクションのカードデザインをベースに、GOODボタン付きのカードグリッドを作成。

Claude × Stitchの連携で精度が上がった

Stitchのチャット（Gemini）だけだと言うこと聞かない問題

Stitchには画面上にチャット機能（Gemini）がついていて、直接指示を出せます。ただ、これが結構言うことを聞かない。「ヘッダーとボトムナビを消して」と言っても勝手に別のUIを足してきたり、「写真だけ差し替えて」と言ったのにレイアウトまで変わったり。何度修正しても意図通りにならないことが多く、やり取りの回数がどんどん増えていきます。

Claude Code経由で指示を出すと精度が上がる

そこで、Claude CodeからStitchを操作する方法に切り替えました。具体的にはこんな流れです：

1. FigmaのURLをClaude Codeに渡して、デザインの構造・色・フォント・レイアウト情報を自動で読み取ってもらう
2. Claude Codeがその情報をもとに、Stitchに渡す詳細なプロンプト（指示文）を自動生成する
3. Claude CodeがStitchに指示を送って画面を生成・修正する

Claudeが間に入ることで何が変わるかというと：

• Figmaから読み取ったデザイン情報（色コード、フォントサイズ、余白など）を正確にプロンプトに含められる → 自分で目視して書くより漏れがない
• 「この要素だけ変えて、他は絶対に触るな」という制約付きの指示をClaudeが的確に組み立ててくれる → Stitchが余計なことをしにくくなる
• 修正がうまくいかなかったとき、Claudeに「別のアプローチで」と言えば指示の出し方を変えてくれる → 自分でプロンプトを試行錯誤しなくていい

要するに、Claudeが「優秀なデザイナーへの指示出し係」になってくれる感じです。人間がStitchに直接話しかけるより、Claudeに翻訳してもらったほうが伝わる。AIにAIへの指示を出させるという、ちょっと不思議な構図ですが、実際に精度は上がりました。

教訓・気づき

AIデザインツールは「0→1のラフ出し」には強いが、「既存デザインの忠実再現」には向かない。Figmaとの併用が前提。

Stitchの良いところ：

• テキストだけでUIデザインが生成できるスピード感
• デザイントークンを自動認識してブランドカラーを適用してくれる
• Claude CodeからMCP経由で操作でき、Figma MCP と組み合わせた自動化ワークフローが組める
• 現時点(2026-3-)で無料

Stitchの課題：

• UIパーツの直感的な操作（ドラッグ&ドロップ）ができない
• 勝手に「よくあるアプリUI」（ヘッダー・タブバー）を補完してしまう
• 実写写真が生成できない（AIイラスト調になる）
• 編集のたびに意図しない要素が変わる（再現性が低い）
• レスポンスが空で返る・タイムラグがあるなどAPI動作が不安定

現実的な運用としては「Stitchでラフ → Figmaで仕上げ」の二段構えがベスト。Figma MCPでデザイン情報を取得してStitchのプロンプトに活用するフローは、ゼロからプロンプトを書くより精度が上がるので有効。

Googleに期待する将来改善

Stitchは「プロンプトで操作可能なデザインを生成する」というコンセプト自体はすごく良いので、以下の改善が入ればかなり実用的になると思います。

• パーツのドラッグ&ドロップ対応 — 生成後に「このボタンをもう少し右に」をマウスでできるようにしてほしい
• 画像のアップロード・差し替え機能 — 自前の写真素材やロゴを貼れるようにしてほしい。今はAI生成画像しか使えない
• 「この要素だけ変更」のピンポイント編集 — 今は画面全体を再生成するので、触りたくない部分まで変わってしまう
• Figmaプラグインとの双方向連携 — Figmaで作ったデザインをStitchに読み込んでバリエーション展開、逆にStitchで作ったものをFigmaに書き出し、が簡単にできると最強
• 実写風の写真生成 — 現状はイラスト調しか出ない。マッチングアプリのモックアップには実写っぽい人物写真が必須