stitch::code-to-design

代码转设计

将现有前端代码（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 Key（与步骤 4 使用的密钥相同）。
• 目标 projectId。
• 将 --generated-by 参数设为 'stitch::extract-static-html'。
• 将 --title 参数设为页面的路由路径（例如 '/dashboard'、'/settings/profile'、'/inbox'），以便 Stitch 中的屏幕名称/标题清晰标明其在应用中的路由。