beavon2010/claude-skills

程式碼轉設計

將您現有的前端程式碼（React + Vite、Next.js、Angular、Vue 等）轉換為 Stitch 設計，以便您能使用 Stitch 進行迭代和改進。

此技能依序編排三個其他技能：

1. extract-static-html：從您的建置輸出或執行中的開發伺服器（例如 Vite 開發伺服器或 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 以了解完整的分析工作流程。

遵循 extract-design-md 技能的輸出結構撰寫 .stitch/DESIGN.md。

4. 上傳 DESIGN.md 並在 Stitch 中創建設計系統

委派給 manage-design-system 技能以上傳 DESIGN.md 並在 Stitch 中創建設計系統。請閱讀 skills/manage-design-system/SKILL.md 以了解完整的工作流程（上傳腳本用法、create_design_system_from_design_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 中的畫面名稱/標題能清楚標識其在應用程式中的路由。