コードとデザインのラウンドトリップ

React アプリを Stitch にインポートし、デザインをビジュアルに編集して、更新されたコンポーネントをエクスポートします — 完全なラウンドトリップ。

ラウンドトリップワークフローは、コードベースと Stitch を双方向につなぎます。React アプリから始めて、そのデザインシステムと画面を Stitch に抽出し、クラウド上で視覚的な編集を行い、更新されたデザインをクリーンな React コンポーネントとしてエクスポートし直します。

構築するもの

既存の React + Vite アプリケーションから始めて、デザイントークンを抽出し、画面を静的 HTML としてキャプチャし、すべてを Stitch にアップロードし、デザインを編集して、React コンポーネントに変換し直します。

前提条件

  • スキルを始めるを完了している（スキルがインストール済みで、MCP が接続済み）
  • 開発サーバーが動作する既存の React アプリケーション
  • Node.js 18 以降と puppeteer がインストールされている

ステップ 1：ソースからデザイントークンを抽出する

ソースファイルをスキャンしてデザインシステム文書を逆算します。ビルドステップは不要です。

PROMPT
Extract the design system from ./my-app/src and write it to .stitch/DESIGN.md

extract-design-md スキルは、コンポーネント、スタイルシート、Tailwind 設定、テーマファイルを読み取ります。カラー、タイポグラフィ、余白、コンポーネントパターンを特定します。

生成された .stitch/DESIGN.md を開くと、次のものが確認できます：

  • YAML frontmatter — 機械可読なカラートークン
  • Markdown セクション — 視覚的雰囲気、パレット、タイポグラフィ、レイアウトを説明
  • 生の hex コードではなく、「Deep Ocean Blue (#1a365d)」のような説明的な名前

ステップ 2：静的 HTML スナップショットをキャプチャする

開発サーバーを起動し、実行中のアプリを自己完結型の HTML としてキャプチャします：

PROMPT
Extract static HTML from http://localhost:5173 and save to .stitch/designs/home.html

スキルはヘッドレス Chrome を起動し、完全にレンダリングされた DOM をキャプチャし、すべての CSS をインライン化し、画像を base64 データ URI に変換します。各出力ファイルは完全に自己完結しており、外部依存はありません。

複数ページの場合は、各ルートについて繰り返します：

PROMPT
Also extract http://localhost:5173/about to .stitch/designs/about.html

ステップ 3：Stitch にアップロードする

1 つのコマンドで、すべてを新しい Stitch プロジェクトにプッシュします：

PROMPT
Upload .stitch/DESIGN.md and all HTML files in .stitch/designs/ to a new Stitch project called “My App Migration”

スキルはプロジェクトを作成し、DESIGN.md をデザインシステムとしてアップロードし、各 HTML ファイルを画面としてインポートします。Stitch を開くと、アップロードされたすべての画面がデザインシステムに従ってスタイル設定されたプロジェクトを確認できます。

ステップ 4：デザインを編集する

コードに触れずに、狙いを定めた視覚的な変更を加えます：

PROMPT
Edit the home screen: add a testimonial section between the features and the footer with three customer quotes in a horizontal card layout.

スキルは既存のデザインシステムを保ちながら、あなたの指示で edit_screens を呼び出します。一度に 1 つの変更を行うことで、最良の結果が得られます。すべてを 1 つのプロンプトにまとめるのではなく、追加の編集でイテレーションしてください。

ステップ 5：React にエクスポートし直す

更新された Stitch の画面をコンポーネントコードに変換し直します：

PROMPT
Convert the screens in my Stitch project to React components.

react-components スキルは、最新の画面 HTML をダウンロードし、Tailwind テーマの値を抽出し、デザインをモジュール式のコンポーネントに分解し、型安全なインターフェースを作成し、静的データを src/data/mockData.ts に移動し、すべてを AST 経由で検証します。

開発サーバーを起動してください。React コンポーネントには、新しいお客様の声セクションを含め、Stitch で行ったデザイン変更が反映されています。

完全なラウンドトリップ

ここまでで完了した内容は次のとおりです：

ステップ方向内容
トークンの抽出コード → DESIGN.mdソースからデザインシステムを逆算
HTML のキャプチャコード → 静的ファイル実行中のアプリを自己完結型 HTML としてスナップショット
アップロードファイル → Stitchアセットとデザインシステムをクラウドにインポート
編集Stitch → 更新されたデザイン狙いを定めた視覚的変更を実施
エクスポートStitch → Reactデザインから更新されたコンポーネントを生成

次のステップ

原文: https://stitch.withgoogle.com/docs/skills/roundtrip/

本ページは Google Stitch 公式ドキュメントの翻訳です。原文の著作権は Google LLC に帰属します。本サイトは独立した非公式の翻訳です。

← 前へAgent Skills をはじめる次へ →ループで構築する