Flutter

Stitch MCP + Figma MCP + Claude Code でFlutterアプリをリデザインした話

#Flutter #Claude Code #MCP #Figma #Stitch #AI

個人開発の料理アプリ「大さじ（oosaji）」のUIリデザインをAIツールだけで完結させました。

デザイナーなしで、Stitch MCP → Figma MCP → Claude Code という流れでゼロからUIを作り直した手順をまとめます。

使ったツール

ツール役割
Google Stitch MCPUIコンセプト生成・各画面デザイン案を出す
Figma MCPFigmaに直接デザインを書き込む
Claude Code全体のオーケストレーション＋Flutterへの実装
Figma ProfessionalMCPからの書き込みに必要（月額3,000円）

全体の流れ

Stitch MCPでコンセプト生成
        ↓
Figma MCPでデザイン作成（全11画面）
        ↓
Claude CodeでFlutter実装

Step 1: Stitch MCPでUIコンセプトを作る

まずClaude Codeに現在のアプリの課題を伝え、Stitch MCPでUIコンセプトを生成します。

Stitch MCPは「こういうアプリを作りたい」という自然言語の指示からモバイルUIのコンセプト画像を生成してくれます。既存アプリの各画面をベースに「モダンにしたい」「Material 3に合わせたい」といった方向性を伝えるだけでOKです。

生成されたコンセプトをもとに、実際のアプリの機能・画面構成と照らし合わせて微調整しました。

Step 2: Figma MCP のセットアップ

Figma MCPを使うには Figma Professional プラン が必要です（無料プランだと書き込みAPIが制限されます）。

MCPサーバーを追加

claude mcp add --transport http figma https://mcp.figma.com/mcp

認証（ブラウザでOAuth）

! claude mcp auth figma

ブラウザが開いてFigmaのOAuth画面が表示されます。「Allow Access」を許可すれば完了です。APIキーの手動作成は不要です。

認証が終わったらセッションを再起動（/exit → claude）するとFigma MCPのツールが使えるようになります。

動作確認

接続が成功すると、Claude Codeからアカウント情報が取得できます。

your-account アカウントで Professional プラン（Full seat）が確認できました

Step 3: Figmaプロジェクトを整理する

無料プランで使っていたFigmaのDraftsにある既存ファイルは消えません。Professional契約後もDraftsにそのまま残っています。

Professionalプランで新たに使えるのは Team project（無制限のプロジェクト）です。

おすすめの構成：

Team project「oosaji」
├── デザインシステム  ← カラー・タイポ・コンポーネント定義
└── 画面デザイン     ← 全画面

Step 4: Claude CodeからFigmaにデザインを生成する

Figma MCPの use_figma ツールを使うと、Figmaに直接フレームやコンポーネントを書き込むことができます。WebでもDesktopでもリアルタイムに反映されます。

まずデザインシステムの基盤（カラートークン）を定義します。

Primary   : #F46538（オレンジ）
Background: #FFF8F0（クリーム）
Text      : #9C583B（ブラウン）
Accent    : #FFB885, #F89577
Surface   : #FFFFFF（カード背景）
BorderRadius: 12px統一
Shadow    : black 5%, blur 8, y:2

これをLocal Variablesとして登録してから各画面を作成していきました。

最終的に生成した画面は11画面です。

画面内容
OB1〜OB3オンボーディング（機能紹介）
分量変換ホーム検索バー＋変換テーブル＋検索履歴
分量変換 検索中テキスト入力＋候補リスト
分量変換 詳細材料名＋小さじ/大さじ/カップ変換
人数変換レシピ名＋材料テーブル
サイズ変換丸型→スクエア型の変換
設定ドロワー式

Step 5: FlutterへMCPで実装する

Figmaにデザインができたら、FigmaファイルのURLをClaude Codeに渡して get_design_context ツールでデザイン情報を取得します。

このFigmaのURLからデザインを読み取ってFlutterで実装して
https://www.figma.com/design/xxxxxxx/...

Claude Codeがカラー・レイアウト・コンポーネント情報を読み取り、Flutterコードを生成します。

実装はフェーズ分けして進めました：

  • Phase 1: 背景色・カード・角丸の統一
  • Phase 2: Material 3テーマ、ColorScheme、cardTheme設定
  • Phase 3: ボトムナビをモダンデザインに変更

やってみてわかったこと

良かった点:

  • デザイナーなしで11画面のUIを1日で作れた
  • Figmaに直接書き込むのでWeb・Desktopどちらでもリアルタイムに確認できる
  • デザインからコードへの変換がスムーズ

ハマったポイント:

  • Figma Professional必須: 無料プランではMCPからの書き込みができない
  • OAuth認証はブラウザ操作が必要: ! claude mcp auth figma をターミナルで直接実行する必要がある（Claude Code内からは不可）
  • DraftsはTeam projectと別管理: 無料時代のファイルはDraftsに残っているが、MCPからはTeam project内のファイルを操作するのが安定

まとめ

Stitch MCP → Figma MCP → Claude Code という流れで、コーディングだけでなくデザインフェーズもAIに任せることができました。

特にFigma MCPの「クラウドに直接書き込む」という仕組みは強力で、Figmaを開いたまま画面がリアルタイムで追加されていく体験は新鮮でした。

個人開発でデザインにリソースをかけられないときの選択肢として十分実用的です。