98.8K+ダウンロード
使い方ガイドへスキップ
stitch::react-native作者 Google Labs

Stitch React Native スキル。

Claude Code と Codex 向けのモバイルアプリデザインスキル：Stitch HTML デザインを React Native コンポーネントに変換または同期します。

  • Mobile Apps
  • UI コード
OpenDesign をダウンロード使い方ガイドを見る
google-labs-code/stitch-skills · plugins/stitch-build/skills/react-native/SKILL.mdSKILL.md
--- name: stitch::react-native description: - Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. --- ## Phase 1: Retrieval and networking ## Phase 2: Theme extraction ## Phase 3: Architectural rules and HTML mapping ## Phase 4: Execution steps
2026-09-14 にアップストリームファイルから読み取られたフロントマターとセクション見出し · 全体で 12,389 文字

01 できること

Claude Code と Codex における stitch::react-native スキルの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

このスキルは、Stitch の HTML/CSS Web デザインを StyleSheet を使った本番対応の React Native コンポーネントに変換し、既存のネイティブコンポーネントを最新の Stitch デザインに同期し直すこともできます。処理は4つの制御されたフェーズで進みます：scripts/fetch-stitch.sh で全画面をダウンロードして各スクリーンショットを視覚的に検査し、tailwind.config のトークンを src/theme.ts に抽出し、HTML 要素と CSS を厳格なアーキテクチャルールのもとで React Native のプリミティブにマッピングし、resources/component-template.tsx からコンポーネントを草案します。

コンポーネントは src/components/ 配下の Atomic Design のフォルダ構成に従い、ロジックは src/hooks/ に、コンテンツは src/data/mockData.ts に置かれ、各コンポーネントファイルは readonly な [ComponentName]Props インターフェースをエクスポートします。npm run validate と tsc --noEmit による検証は任意であり、ユーザーの許可が必要です。

生成されるもの

  • src/theme.ts は、デザインの tailwind.config から抽出された色、スペーシング、タイポグラフィを保持する TypeScript のトークンファイルです。
  • src/data/mockData.ts は、すべての静的テキスト、画像 URL、リストを保持し、コンポーネント内にコンテンツをハードコードしないようにします。
  • src/hooks/ 配下のカスタム hooks が、イベントハンドラ、API 呼び出し、ビジネスロジックを吸収し、コンポーネントは表示のみを担います。
  • アプリフォルダ内に書き込まれ、ワークスペースルートにも複製される .stitch/metadata.json ファイル。
プロンプト例を見る ↗

仕組み

  1. 01
    MCP名前空間を発見する

    list_tools を実行して Stitch MCP のプレフィックスを見つけ、そのセッション内の以降の呼び出しではそのプレフィックスを再利用します。

  2. 02
    スクリプトを通じてダウンロードする

    内部の取得ツールは Google Cloud Storage のドメインで失敗することがあるため、HTML とスクリーンショットは scripts/fetch-stitch.sh を通じて取得され、リダイレクトとセキュリティのハンドシェイクを処理します。

  3. 03
    各スクリーンショットを検査

    想像で済ませず、ダウンロードした PNG を開いて、デザイン意図とレイアウトの詳細を確認します。

  4. 04
    テーマを抽出

    各 HTML の head 内のスクリプトブロックにある tailwind.config オブジェクトから色、フォント、スペーシング、角丸、タイポグラフィを読み取り、TypeScript の定数として src/theme.ts に書き込みます。

  5. 05
    テンプレートから草案を作成

    各コンポーネントは resources/component-template.tsx から作成し、プレースホルダーのコンポーネント名をすべて検索して置き換えてください。

  6. 06
    同期メタデータを記録する

    プロジェクト設定を .stitch/metadata.json に保存し、現在の同期実行時刻と一致する Last Sync Time フィールドを設定してください。

02 適合性を確認

stitch::react-native スキルを使用する場合

このようなモバイルアプリデザイン作業の場合は、Claude Code または Codex で stitch::react-native スキルを使用してください。適用範囲と制限は、スキル自体のファイルから取得されています。

適している場合

  • コンポーネントが最新の Stitch デザインからずれてしまい、修正が必要な既存の React Native アプリ。
  • App.tsx にスタックまたはタブナビゲーターを組み込んだ NavigationContainer が必要な、複数画面の Stitch プロジェクト。
  • 両プラットフォームで正しく見える必要があるシャドウを持つデザイン。iOS のシャドウプロパティと Android の elevation を Platform.select で処理します。
  • 作業完了を宣言する前に、成果物を文書化されたアーキテクチャチェックリストに照らして実行させたいチーム。

境界を知る

  • CSS の hover、transition、animation エフェクトに依存するデザイン：hover と transition には対応する機能がなく、アニメーションは react-native-reanimated で扱う必要があります。
  • Web デザインのドロップダウンやセレクトフィールド。React Native には組み込みの select がなく、サードパーティ製の picker やカスタムモーダルが必要です。
  • Web の画像に関する前提。React Native の Image には固有のサイズがないため、width と height、または aspectRatio を必ず指定する必要があります。

提供すべきもの

  • Stitch プロジェクトとその MCP プレフィックスエージェントは list_tools を実行して Stitch MCP のプレフィックスを見つけ、以降のすべての get_screen および get_project 呼び出しでそれを再利用します。
  • 画面の width 値スクリーンショットの URL には画面メタデータの width を使って =w{width} を付加する必要があります。付加しないと Google の CDN が低解像度のサムネイルを返してしまいます。
  • 検証とアプリ実行の同意パッケージャーを起動したり、アプリがデバイス上で正しく表示されるかを確認するビジュアルシミュレーター監査を開始する前には、許可が必要です。

03 スキルの内部

stitch::react-native スキルが Claude Code と Codex に与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. 取得を省略しない

    フェーズ 1 は、すべての画面がスクリプトを通じてダウンロードされ、視覚的に監査された時点でのみ完了とみなされます。MCP の get_screen を先に呼び出さずにローカルのデザインファイルを読むことは禁止されています。

  2. デザインを再取得する前に確認する

    .stitch/designs/{page}.html と .png が既に存在する場合、エージェントは Stitch プロジェクトから再取得するかローカルファイルを再利用するかを尋ねる必要があり、確認が取れた場合のみ再ダウンロードしてください。

  3. コンポーネントに生の色を使わない

    カラーの16進コードや rgba 文字列はコンポーネントファイルで禁止されています。すべての色、スペーシング、フォントサイズの値は src/theme.ts から取得する必要があります。

  4. 読み取り専用の Props インターフェースをエクスポートする

    画面を含むすべてのコンポーネントファイルは、readonly 修飾子付きの [ComponentName]Props という名前のインターフェースをエクスポートする必要があります。そうでない場合、検証は失敗します。

  5. 適切なパッケージからのセーフエリア

    トップレベルの画面は、react-native が標準で提供するものではなく、react-native-safe-area-context の SafeAreaView でラップしてください。

  6. アトミックデザインファイルへの分割

    コンポーネントは src/components/atoms/、molecules/、organisms/ に配置します。UI全体を1つのページやスクリーンファイルにまとめることは禁止されています。

  7. Googleヘッダーを含めない

    生成されたコンポーネントは対象プロジェクトの規約に従い、Googleのライセンスヘッダーを含めてはいけません。

  8. テスト前に許可を得る

    検証スクリプト、パッケージャー、シミュレーターによる監査は一方的に開始してはならず、エージェントは事前にユーザーの許可を求める必要があります。

04 実際に使う

Claude Code または Codex で stitch::react-native をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

stitch::react-native を Claude Code、Codex、またはあなたのエージェントに追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-native

plugins/stitch-build/skills/react-native/SKILL.md 用の汎用skills CLI形式です。リポジトリごとに独自のパスが定められている場合があります。

スキルに最初のモバイルアプリデザインタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Convert the Stitch designs in project [project ID] to React Native. Download every screen with scripts/fetch-stitch.sh, visually audit the screenshots, extract the tailwind.config tokens into src/theme.ts, and build the components from resources/component-template.tsx using the atoms, molecules and organisms folders. Please hold off on starting the packager or a simulator audit for now.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • components と screens 内のすべての.tsxファイルに対してバリデーターを実行し、コンポーネントの妥当性を報告します。
  • no-emitモードでTypeScriptコンパイラを実行し、プロジェクトが問題なくコンパイルできることを確認します。
  • src/theme.ts内の色とフォントが、HTMLデザインから抽出された内容と本当に一致しているかを確認します。
  • 生のテキストがTextコンポーネントの外に置かれていないかを確認します。React Nativeはそれでクラッシュします。

OpenDesignではSKILL.mdのリンクからstitch::react-nativeをインポートします：Plugins → Add → Skill → Import from link。その後、トップバーで選択してください。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
スキルファイル
plugins/stitch-build/skills/react-native/SKILL.md 検証時に記録されたコンテンツチェックサム、コミット 0337446
License
Apache-2.0 LICENSE より。
リポジトリスター数
8,304 GitHub スナップショットは 2026-09-14 に google-labs-code/stitch-skills リポジトリ全体を対象に取得されました。このカタログには 12 のスキルが含まれています。stitch::react-native の評価や使用回数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

  1. フェーズ1：取得とネットワーキングMCPプレフィックスを見つけ、すべてのスクリーンを取得し、スクリプトでHTMLとスクリーンショットをダウンロードし、目視で監査し、メタデータを保存します。
  2. フェーズ2：テーマの抽出tailwind.configの色、フォント、スペーシング、角丸、タイポグラフィのトークンをsrc/theme.tsに取り込みます。
  3. フェーズ3：アーキテクチャルールとHTMLマッピングHTMLタグをプリミティブにマッピングし、CSSをStyleSheetに変換し、アトミックデザイン、フック、テーマ、アクセシビリティのルールに従います。
  4. フェーズ4：実行ステップ依存関係をインストールし、テンプレートからテーマ、データ、コンポーネントを構築し、ナビゲーションを結線し、必要に応じて許可を得た上で検証します。
  5. トラブルシューティングフェッチエラー、検証の失敗、Textでラップされていないテキスト、画像サイズの問題、VirtualizedListの警告への対処方法。
スキル自身による説明
Stitch HTML デザインを React Native コンポーネントに変換するか、既存のネイティブコンポーネントを最新の Stitch デザインに同期・更新します。StyleSheet を使用します。

SKILL.md のフロントマター説明です。完全なファイルは約 12,389 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

stitch::react-native スキルに関するよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

Stitch MCPをスキップして、ローカルのHTMLファイルをそのまま渡すことはできますか?

できません。フェーズ1では、何かを読み込む前に、すべてのスクリーンをget_screenで取得し、scripts/fetch-stitch.shでダウンロードすることが求められています。get_screenを呼ばずにローカルのデザインHTMLを直接読み込むことはアンチパターンとされています。

これは新規スクリーンのスキャフォールディング専用ですか、それとも既存のアプリを更新できますか?

両方に対応しています。新しいStitchのHTMLをコンポーネントに変換するだけでなく、このスキルは既存のネイティブコンポーネントを同期・更新し、最新のStitchデザインと一致させます。

結果を確認するために、シミュレーターやパッケージャーを自動的に起動しますか?

デフォルトでは起動しません。フェーズ4の検証、監査、シミュレーターやパッケージャーによるテストはオプションであり、エージェントは検証スクリプトの実行、パッケージャーの起動、シミュレーター監査の開始前に、あなたの許可を得る必要があります。

Stitch React Native

実際のモバイルアプリデザインタスクで stitch::react-native を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから stitch::react-native をインポートして、上記のプロンプトを貼り付け、結果の前にプランを確認してください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-native

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応