コードからデザインへ (Code to Design)

コードからデザインへ

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

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

1. extract-static-html: ビルド出力または実行中の開発サーバー（例：Vite dev サーバー、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 キー（手順4で使用したものと同じキー）。
• ターゲットの projectId。
• --generated-by 引数に 'stitch::extract-static-html' を設定。
• --title 引数にページのルートパス（例：'/dashboard'、'/settings/profile'、'/inbox'）を設定。これにより、Stitch 内の画面名/タイトルがアプリケーション内のルートを明確に識別できます。