Stitch 代码转设计
将现有前端代码提取为可上传到 Stitch 的设计与设计系统。
技能明确要求读取前端代码、写入.stitch/DESIGN.md并上传HTML和设计系统，且允许Bash、Write、web_fetch及Stitch工具；数据流部分可见，但权限范围较宽。未要求上传前逐次确认、未说明敏感数据处理、API密钥保护、回滚或撤销机制；“不要阻塞验证”也削弱了用户复核，因此扣分。未发现恶意外传、凭据窃取或破坏性默认行为。
流程顺序和前置条件基本清楚，但关键依赖技能、脚本、参数模式和异常处理未在目标文件中展开，且步骤3称调用extract-design-md、步骤4改称manage-design-system，依赖关系需要用户自行解析。没有静态测试覆盖该技能，也没有失败反馈、重试或部分完成恢复说明，因此仅给出有限的静态可行性分数。
目标场景、输入（构建目录、index.html、assets、projectId）和主要输出较明确；但“对save、migrate或upload总是触发”的规则过宽，未定义非适用场景、框架边界、动态应用限制或中文使用条件。核心功能依赖Stitch MCP、API密钥和外部服务，面向中国网络的可达性未提供证据，因而扣分。
目标文件采用较清晰的前置条件、步骤和依赖技能链接；仓库README提供安装方式，仓库有Apache-2.0许可证和安全策略。目标技能本身缺少版本、变更记录、维护责任、故障排查、参数稳定性说明和完整示例；依赖脚本细节不在给定证据中，因此未接近满分。
链式流程覆盖静态HTML提取、设计系统提取和上传，理论上能完成从前端代码到Stitch设计的核心任务；但没有目标技能专属的可复用输出样例或执行证据，验证被设为可选且不阻塞，上传结果、资源完整性和失败后的可用状态仍需人工检查，因此按静态校准限制给出中低分。
目标文件提供了可审计的步骤、路径和参数要求，README也给出技能定位与示例；但给定CI仅验证react-components的示例，不覆盖code-to-design关键路径，也没有该技能的测试、第三方复现记录或结果证据。结论主要依赖单一静态文档，故分数有限。
- 上传前应明确展示将发送到Stitch的文件、资源和可能包含的敏感内容，并要求用户确认；API密钥不应通过命令行参数或日志暴露。
- 应补充依赖技能和脚本的固定版本、失败诊断、重试、回滚及部分上传清理流程。
- “始终触发”规则应收窄，并说明动态运行时、私有依赖、非Vite/React项目和Stitch服务不可达时的非适用条件。
- 应为code-to-design关键路径增加可复现测试和真实CI覆盖。
这个 Skill 能做什么，适合哪些场景？
这是 google-labs-code/stitch-skills 集合中的一个 Agent Skill，专门把现有前端应用或组件转换为 Stitch Design。它先从构建产物提取自包含 HTML，再分析源代码生成 DESIGN.md，随后将设计系统和 HTML 上传到指定 Stitch 项目。适合已经有前端代码、希望在 Stitch 中继续迭代设计的团队。使用前需要配置并运行 Stitch MCP server。
读取包含 index.html 和资源文件的构建应用目录，并委托相关技能生成单文件、自包含的 standalone.html；读取组件、样式表和主题配置等源文件，生成 .stitch/DESIGN.md；使用 Stitch MCP 及上传流程，将 DESIGN.md 和 HTML 上传到目标 Stitch projectId。流程要求使用 Stitch API key，并为上传操作传递指定的 generated-by 标识。
- 前端开发者希望把 Vite 或 React 应用的现有界面迁移到 Stitch 中继续设计迭代。
- 设计与工程团队需要从已有组件、样式表和主题配置中提取设计系统文档。
- 项目维护者需要将构建后的网页快照及其设计系统上传到指定 Stitch 项目。
- 正在进行网页重构的团队希望先保留现有界面结构，再在 Stitch 中改进设计。
这个 Skill 有哪些优点和局限？
- 覆盖 HTML 提取、设计系统提取和 Stitch 上传的完整迁移流程。
- 同时处理构建产物与源代码中的设计信息。
- 明确支持 Vite、React 等前端代码场景。
- 遵循 Agent Skills 开放标准，并与多个编码代理兼容。
- 依赖正在运行的 Stitch MCP server、API key 和有效 projectId。
- 要求输入的是已构建的应用目录，且其中包含 index.html 和资源文件。
- 依赖 extract-static-html、extract-design-md、manage-design-system 和 upload-to-stitch 等相关技能，选择性安装时需要额外配置。
- 提供的材料没有记录测试套件、失败重试策略或不同前端框架的验证范围。
如何安装这个 Skill？
该技能属于 google-labs-code/stitch-skills 的 stitch-design 插件。可按 README 使用：npx skills add google-labs-code/stitch-skills。也可以先将 GitHub 仓库添加为 Codex marketplace，再安装 stitch-design 插件。选择性安装时需同时包含其依赖技能；README 未提供该单个技能的独立安装目录或版本信息。
如何使用这个 Skill？
先配置并运行 Stitch MCP server，并准备包含 index.html 和 assets 的构建应用目录、源代码、Stitch API key 及目标 projectId。可使用类似提示："Upload the frontend code at /path/to/dashboard into a Stitch project named 'Dashboard-Migration-2026'." 如果 projectId 未知，流程说明可使用 list_projects 查询。生成 standalone.html 后可以在浏览器中手动检查，但该检查是可选的，不会阻塞后续步骤。