Rork × Google Stitch — デザインから React Native アプリまで AI で一貫開発

Google Stitchで生成したUIデザインをRork Maxへ取り込み、React Nativeアプリを最短で仕上げるワークフローです。基本の連携手順、MCPによる効率化、タスク管理アプリでの実践例、効果的なケースと注意点までを一通り解説します。デザインから実装への変換コストを下げます。

デザインとモバイル開発の壁を AI が越える

スマートフォンアプリの開発において、最もコストがかかるフェーズの一つが「デザインから実装への変換」です。デザイナーが作ったモックアップを、エンジニアが手でコードに落とし込む作業は時間がかかり、意図がずれることも多い。

Google Stitch と Rork を組み合わせることで、このギャップを AI が自動的に埋めます。Stitch が生成した UI コンポーネントを Rork Max が解釈し、React Native（Expo）のコードとして実装する——このワークフローにより、デザインから動くアプリまでの時間を劇的に短縮できます。

Google Stitch とは

Google Stitch は、Google が提供する生成 AI 搭載の UI デザインツールです。自然言語プロンプトから高品質な UI コンポーネントを生成し、HTML/CSS・React コードとしてエクスポートできます。

主な特徴：

テキスト指示だけで画面全体の UI を生成
Google Material Design 準拠のコンポーネント
React / Web Components 形式でのエクスポート
Figma インポートによる既存デザインの活用

Stitch × Rork の基本ワークフロー

ステップ 1: Stitch で UI を生成する

Google Stitch（stitch.withgoogle.com）にアクセスし、作りたい画面を自然言語で入力します。

プロンプト例:

フィットネスアプリのホーム画面。
- 本日のワークアウト進捗（リングチャート）
- 直近のアクティビティリスト（3件）
- クイックスタートボタン
- ダークモード対応
- Material Design 3 スタイル

Stitch は数秒でビジュアルを生成し、React コードとしてエクスポートできます。

ステップ 2: Rork にデザイン仕様を渡す

Stitch から生成した HTML/React コードを Rork Max のプロンプトに貼り付けます。Rork はこれを読み取り、Expo（React Native）のコンポーネントに変換します。

Rork へのプロンプト例:

以下の Web 向け React コードを参考に、
Expo (React Native) のホーム画面コンポーネントを実装してください。

[Stitch のコードを貼り付け]

要件：
- iOS / Android 両対応
- NativeWind（Tailwind CSS）でスタイリング
- react-native-reanimated でアニメーション
- ダークモード: useColorScheme() で切り替え

ステップ 3: Rork Max が実装・動作確認

Rork Max は Stitch のデザイン意図を理解しながら、React Native 向けに最適化されたコードを自動生成します。生成後はプレビューで即座に確認でき、デバイス実機でのテストも可能です。

MCP 連携でさらに効率化

Rork（Claude Code をバックエンドとして使用する場合）は MCP サーバーとの連携に対応しています。Stitch MCP サーバーを設定することで、デザイン → コード変換を一層スムーズにできます。

MCP 設定例（mcp_config.json）

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@google/stitch-mcp-server@latest"],
      "env": {
        "GOOGLE_API_KEY": "YOUR_GOOGLE_API_KEY"
      }
    }
  }
}

MCP 経由でのデザイン取得

@stitch create_component:
  type: "list_screen"
  description: "タスク管理アプリの一覧画面。カード形式、完了チェックボックス付き"
  style: "Material Design 3"
  platform: "react_native"

実践例: タスク管理アプリの開発

1. Stitch でデザイン生成

タスク管理アプリの画面セットを作成してください：
1. タスク一覧（フィルタータブ、スワイプ削除）
2. タスク追加モーダル（タイトル、期日、優先度）
3. 完了画面（アニメーション付き）

スタイル: ミニマル、ライト/ダーク両対応
カラー: プライマリ #6750A4（Material Purple）

2. Rork で実装

上記の Stitch デザインに基づいて Expo アプリを作成してください。

技術スタック：
- Expo SDK 52
- React Navigation v7（タブ + スタック）
- Zustand（状態管理）
- React Native Gesture Handler（スワイプ操作）
- expo-haptics（触覚フィードバック）

データは AsyncStorage でローカル保存。

Rork Max は数分でこれらすべてを実装し、動作するアプリを生成します。

Stitch × Rork が特に効果的なケース

プロトタイプの高速検証

スタートアップや個人開発者がアイデアを素早くプロトタイプ化したい場合に最適です。Stitch でデザインを試し、Rork ですぐに動くアプリに変換——ユーザーインタビューやピッチデモが当日中に準備できます。

デザインの一貫性維持

Stitch が Material Design 3 に準拠したコンポーネントを生成するため、デザインシステムの整合性が自然と保たれます。Rork もこのシステムを理解して実装するため、スタイルのブレが最小限になります。

非エンジニアとの協業

デザイナーや PM が Stitch でモックアップを作り、Rork が自動実装するフローにより、「コードを書けない人でもアプリ開発に参加できる」体制が整います。

よくある注意点

Web コードと React Native の差異

Stitch が出力するのは主に Web（React）向けのコードです。Rork への指示に「React Native（Expo）向けに変換してください」と明記する点が肝心です。特に以下の差異に注意：

div → View、p → Text
CSS ボックスシャドウ → shadow* props
flexbox の動作の違い
position: fixed → position: absolute + SafeAreaView

画像・アイコンの扱い

Stitch が生成した画像プレースホルダーは、Rork に具体的な素材（Unsplash URL や expo-vector-icons の名前）を指定するか、後から差し替えるよう指示しておくとスムーズです。

全体を振り返って

Google Stitch と Rork を組み合わせたワークフローは、モバイルアプリ開発のあり方を根本的に変えます。

Stitch: 美しい UI を言葉で生成
Rork: React Native コードとして実装
結果: デザインから動くアプリまで、最短数時間

個人開発者にとってこの組み合わせは、かつてエンジニア+デザイナーのチームが数週間かけていた作業を、1人で1日で完成させる可能性をもたらします。ぜひ次のプロジェクトで試してみてください。