Stitch 前端设计系统提取器
从前端源代码提炼可供 Stitch 使用的 DESIGN.md。
技能声明可读取前端源码并写入.stitch/DESIGN.md，同时允许Bash、web_fetch及所有stitch工具；未说明最小权限、用户确认、敏感数据处理、外部数据流、回滚或写入冲突保护，因此扣分。未见红线风险。
工作流、框架分支和质量清单较为一致，且提供多份参考文件；但没有针对关键路径的测试、异常输入处理、失败诊断信息或输出校验，静态评估按上限保守扣分。
目标用户、适用场景、输入目录和输出文件较清楚，覆盖多种前端框架；但非适用边界、触发排除条件、中文输出支持未明确，且核心可选集成功能依赖Stitch MCP，环境可达性证据不足。
文档结构清晰，包含前置条件、渐进式流程、示例模板、质量清单、Apache-2.0许可证和基础安全政策；但缺少该技能自身的版本、变更记录、维护责任人、更新路径、FAQ及系统化故障排查。
技能明确生成结构化、Stitch兼容的DESIGN.md，并覆盖颜色、排版、组件和布局等核心内容，预期输出可直接作为文档基础；但未提供该技能实际产物或关键路径验证，源码静态推断可能遗漏运行时样式，仍需人工审阅。
存在完整工作流、参考资料、示例DESIGN.md和仓库级CI，但CI仅验证另一个技能，未覆盖本技能；没有独立复现记录或第三方执行证据，因此证据可审计性有限。
- 允许Bash、web_fetch、Write和通配stitch工具，使用前应确认访问范围、外部数据流及写入目标。
- 源码分析可能遗漏运行时生成样式、主题切换、依赖默认值和动态类名；交付前应人工核对并验证生成的DESIGN.md。
- 核心Stitch集成依赖外部MCP服务；应确认目标网络、凭据和服务可用性，尤其是在中国大陆网络环境中。
- 仓库CI未覆盖该技能的关键路径，不能将仓库级验证视为本技能已测试。
这个 Skill 能做什么，适合哪些场景？
该技能面向已有前端代码库，直接从源文件逆向提取设计系统。它可分析 React、Vue、Svelte、Angular、纯 HTML/CSS 及其他 Web 框架中的组件、样式表、Tailwind 配置、主题定义和设计令牌。输出是一份位于项目 `.stitch/DESIGN.md` 的 Stitch 兼容设计系统文档。它适合在应用无法构建或渲染，或团队需要审计和迁移现有视觉语言时使用。
读取前端项目源目录，先检查 package.json、框架信号文件、样式目录、主题文件和 Tailwind 配置，再根据框架读取相应参考资料。它从源代码中提取视觉氛围、颜色及功能角色、字体与层级、按钮、卡片、导航、表单、布局、间距和响应式规则，并将这些信息整理为包含 YAML frontmatter、颜色映射和 Stitch 生成提示的 .stitch/DESIGN.md。技能可使用 Bash、Read、Write、web_fetch 以及 Stitch MCP 工具；不需要构建或运行应用。
- 前端工程师接手一个依赖缺失或构建损坏的 React 项目，需要先整理视觉系统。
- 设计团队准备把现有 Vue 或 Tailwind 项目的视觉身份迁移到 Stitch。
- 产品团队希望审计多个组件中的颜色、字体、间距和交互样式是否一致。
- 开发者想从已有代码生成 `.stitch/DESIGN.md`，供后续 Stitch 设计流程使用。
这个 Skill 有哪些优点和局限？
- 直接读取源代码，不要求先构建或渲染应用。
- 覆盖多种前端框架、纯 CSS 方案、Tailwind、主题文件和设计令牌。
- 输出包含结构化颜色 frontmatter，便于其他 Stitch 技能解析。
- 能够把颜色、字体、组件和布局整理成面向设计复用的自然语言说明。
- 依赖可访问的前端源目录，无法仅凭运行页面工作。
- README 要求配置并运行 Stitch MCP server，但提供的技能正文未展示具体 MCP 调用流程。
- 源材料没有提供测试套件、支持平台验证结果或失败恢复策略。
- 提取结果取决于源代码中实际存在的主题、组件和样式信息；文档没有说明对动态或缺失样式的处理边界。
如何安装这个 Skill？
该技能属于 google-labs-code/stitch-skills 集合。按仓库 README，可使用 npx skills add google-labs-code/stitch-skills 安装技能集合；也可将仓库作为 Codex 插件市场来源，或使用 README 中针对 Claude Code 和 Cursor 的插件命令。使用前需要配置并运行 Stitch MCP server。源材料没有规定单独复制该技能目录的安装步骤。
如何使用这个 Skill？
确保代理可以访问前端项目源目录，并已配置 Stitch MCP server。使用类似提示：Scan /src and extract the design system into .stitch/DESIGN.md. 技能会读取源文件并在项目中创建 .stitch/DESIGN.md。若只安装部分 Stitch 技能，应先确认所需依赖；README 明确提醒选择性安装可能存在技能间依赖。