代码转设计
将您现有的前端代码（React + Vite、Next.js、Angular、Vue 等）转换为 Stitch 设计，以便您可以使用 Stitch 进行迭代和改进。
此技能按顺序编排其他三个技能：
extract-static-html：从构建输出或运行中的开发服务器（例如 Vite 开发服务器或 Angular CLIng serve）中提取单个自包含的 HTML 文件。extract-design-md：分析源代码（包括 Angularangular.json、外部.html模板、主题文件和组件）以创建设计系统（DESIGN.md）。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 中的屏幕名称/标题清晰标识其在应用程序中的路由。