stitch::code-to-design

コードからデザインへ

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

このスキルでは、以下の 3 つのスキルを順番に実行します。

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

ワークフロー

以下の手順に従って、既存のコードを変換します。

前提条件

• ローカルの開発サーバーが起動していること（例：npm run dev、ng serve）、または index.html とアセットを含むビルド済みのウェブアプリケーションディレクトリがあること。
• 対象の 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 をお読みください。

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

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

DESIGN.md をアップロードして Stitch にデザインシステムを作成するため、manage-design-system スキルに委任します。全手順（アップロードスクリプトの使用方法、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 キー（ステップ 4 で使用したものと同じキー）。
• 対象の projectId。
• 'stitch::extract-static-html' に設定した --generated-by 引数。
• ページのルートパス（例：'/dashboard'、'/settings/profile'、'/inbox'）に設定した --title 引数。これにより、Stitch の画面名／タイトルから、アプリケーション内のルートを明確に識別できます。