コードからStitchデザインへの変換

コードからデザインへ

既存のフロントエンドコード（React + Vite、Next.js、Angular、Vueなど）をStitchデザインに変換し、Stitchを使って反復・改善できるようにします。

このスキルは、3つの他のスキルを順番にオーケストレーションします：

1. extract-static-html：ビルド出力または実行中の開発サーバー（例：Vite dev serverやAngular CLI ng serve）から、自己完結型の単一HTMLファイルを抽出します。
2. extract-design-md：ソースコード（Angular angular.json、外部 .html テンプレート、テーマファイル、コンポーネントを含む）を分析し、デザインシステム（DESIGN.md）を作成します。
3. upload-to-stitch：そのHTMLファイルとデザインシステムをStitchプロジェクトにアップロードします。

ワークフロー

既存のコードを変換するには、以下の手順に従ってください。

前提条件

• 実行中のローカル開発サーバー（例：npm run dev、ng serve）、または index.html とアセットを含むビルド済みのWebアプリケーションディレクトリ。
• ターゲットのStitch projectId（不明な場合は list_projects を使用）。

手順

1. 自己完結型HTMLの抽出

extract-static-html スキルに委任して、スタンドアロンのHTMLファイルを生成します。 詳細な手順とスクリプトの使用法については、skills/extract-static-html/SKILL.md をお読みください。

期待される出力：/path/to/extracted/standalone.html のような単一ファイル。

2. HTMLの検証（オプション — ユーザー主導）

抽出後、出力ファイルのパスをユーザーに通知し、必要に応じてブラウザで手動確認できるようにします。検証をブロックしないでください — 直接ステップ3に進みます。

ユーザーが確認後に問題を報告した場合は、続行する前に修正してください。

3. デザインシステムの抽出（ファイル）

extract-design-md スキルに委任して、プロジェクトのソースファイル（コンポーネント、スタイルシート、テーマ設定）を分析し、デザインシステムを生成します。完全な分析ワークフローについては、skills/extract-design-md/SKILL.md をお読みください。

.stitch/DESIGN.md に、extract-design-md スキルの出力構造に従って書き込みます。

4. DESIGN.mdのアップロードとStitchでのデザインシステムの作成

manage-design-system スキルに委任して、DESIGN.md をアップロードし、Stitchでデザインシステムを作成します。完全なワークフロー（アップロードスクリプトの使用法、create_design_system_from_design_md の呼び出し、必要なスキーマ）については、skills/manage-design-system/SKILL.md をお読みください。アップロード時には --generated-by 'stitch::code-to-design' を渡します。

5. HTMLをStitchにアップロード

同じ upload-to-stitch スキルのスクリプトを使用して、抽出されたHTMLファイルをアップロードします。詳細な手順とスクリプトの使用法については、skills/upload-to-stitch/SKILL.md をお読みください。

必要なもの：

• ステップ1で生成されたスタンドアロンHTMLファイルへのパス。
• Stitch API Key（ステップ4で使用したものと同じキー）。
• ターゲットの projectId。
• --generated-by 引数に 'stitch::extract-static-html' を設定。
• --title 引数にページのルートパス（例：'/dashboard'、'/settings/profile'、'/inbox'）を設定し、Stitch内の画面名/タイトルがアプリケーション内のルートを明確に識別できるようにします。