google-labs-code/stitch-skills：Stitch Agent Skills 是一个为 Stitch MCP 服务器设计的 AI 代理技能库，提供设计提示增强、设计系统文档生成、St本页整理它解决什么问题、适用场景、安装方式和使用方法。
Stitch Agent Skills 是一个为 Stitch MCP 服务器设计的 AI 代理技能库，提供设计提示增强、设计系统文档生成、Stitch 屏幕到 React 组件转换等模块化能力，通过 npx skills CLI 与 Claude Code、Cursor 等编码代理无缝集成，自动化设计到代码流程以提升 UI 开发效率。
Stitch Agent Skills 是一个模块化的开源技能库，定位为 Stitch MCP 服务器的扩展生态，旨在为 AI 编码代理提供标准化的设计系统交互能力。它遵循 Agent Skills 开放标准，确保与多种主流编码代理（如 Claude Code、Cursor）兼容。库中每个技能都是一个独立的功能单元，涵盖从设计提示增强、设计系统文档生成，到设计屏幕转换为 React 组件、完整网站生成、演示视频制作等全链路场景。其核心用途是作为桥梁，将 Stitch 的设计能力（如高保真屏幕生成、设计系统管理）无缝嵌入到 AI 代理的代码生成工作流中，使代理能够理解设计意图、执行设计转换并产出符合设计规范的代码资产，从而加速产品开发周期。
传统设计到代码的转换高度依赖手动操作，容易产生不一致、效率低下且难以维护。Stitch Agent Skills 直接解决了这一痛点：它自动化了设计提示的优化过程，将模糊的 UI 想法转化为 Stitch 引擎可理解的高质量提示；自动分析 Stitch 项目并生成结构化的 DESIGN.md 文档，解决设计系统知识散落的问题；将 Stitch 屏幕转换为类型安全的 React 组件，确保设计令牌的一致性和代码可维护性；还能从单一提示生成完整的多页面网站结构，避免重复搭建。此外，通过提供 shadcn/ui 集成指南和 Remotion 视频生成，它扩展了设计资产的复用场景。总之，该库通过标准化、自动化的技能，减少了人工干预，提升了设计系统与代码库之间的同步效率和可靠性。
该技能库适用于多种前端与设计工程场景：1) 设计系统团队需要将 Stitch 设计规范自动转化为可执行的代码文档和组件库；2) 开发人员希望从 Stitch 高保真原型快速生成 React/TypeScript 组件，并保持设计令牌一致性；3) 产品经理或设计师能用单一提示词通过 stitch-loop 技能快速生成完整网站原型，用于概念验证或演示；4) 开发者在编写 UI 代码时，使用 enhance-prompt 技能优化设计提示，提升 AI 生成界面的质量；5) 营销或产品团队需要基于 Stitch 项目自动生成带过渡动画的演示 walkthrough 视频；6) 团队在 React 项目中集成 shadcn/ui 组件库时，需要最佳实践指导和质量检查。总之，任何使用 Stitch 进行 UI 设计并借助 AI 代理进行开发的组织，都能从这些技能中受益。
项目提供基于 npx 的 CLI 安装流程，无需本地安装依赖。用户首先使用 `npx skills add google-labs-code/stitch-skills --list` 命令查看仓库中所有可用技能列表。随后，通过指定 `--skill` 参数安装特定技能，例如安装 stitch-design 技能到全局：`npx skills add google-labs-code/stitch-skills --skill stitch-design --global`。对于 react-components 技能，可使用 `--skill react:components`。CLI 工具会自动检测当前环境中激活的 AI 编码代理（如 Claude Code），并将技能文件放置到代理对应的技能目录中，完成自动集成。所有安装命令均基于 npm 生态，确保跨平台一致性。注意，具体安装路径和代理检测逻辑由 `skills` CLI 工具内部处理，仓库中未详细披露其实现细节。
根据仓库信息，技能的使用方式高度依赖于所集成的 AI 编码代理。安装完成后，技能通常由代理在特定上下文或命令下自动触发，无需用户手动执行额外命令。例如，在 Claude Code 中，当用户请求与 Stitch 设计相关操作时，代理可能会自动调用 stitch-design 或 enhance-prompt 技能来处理请求。对于 react-components 技能，代理在需要将 Stitch 屏幕转换为 React 代码时会自动应用该技能，并参考 examples/gold-standard-card.tsx 中的“金标准”模板生成符合规范的组件。remotion 技能则用于生成视频合成文件，可能通过代理指令触发。仓库中未提供独立的手动运行脚本或命令行接口来直接调用单个技能的功能；其设计哲学是让技能作为代理的“能力”透明地工作。用户主要通过与代理的自然语言交互来间接使用这些技能。具体触发条件和参数传递方式取决于各代理的实现，详情需参考对应代理的文档。
本项目最显著的实现特点是其严格的标准化技能目录结构和开放的互操作性标准。每个技能（位于 `skills/[category]/` 下）必须包含四个关键部分：`SKILL.md` 作为代理的“任务控制”文件，定义技能的目标、输入输出和少样本示例；`scripts/` 目录存放可执行验证器和网络操作脚本，用于自动化质量检查；`resources/` 提供知识库，如清单、风格指南和参考文档；`examples/` 包含“金标准”示例，展示语法正确且高质量的参考输出。这种结构确保 AI 代理能够进行有效的少样本学习并执行自动化验证。项目遵循 Agent Skills 开放标准，规定了技能与代理之间的指令格式和文件布局，从而实现与多种代理的兼容。此外，技能模块完全独立，通过 `--skill` 参数实现按需安装，避免不必要的依赖。示例文件（如 DESIGN.md、gold-standard-card.tsx）不仅作为参考，还充当了测试契约，确保生成内容的质量和一致性。
使用 npx 命令：先 `npx skills add google-labs-code/stitch-skills --list` 查看可用技能，然后 `npx skills add google-labs-code/stitch-skills --skill <技能名> --global` 安装，例如 `--skill stitch-design`。CLI 会自动检测并配置到活跃的 AI 代理。
所有技能遵循 Agent Skills 开放标准，因此与支持该标准的编码代理兼容，包括 Claude Code、Cursor、Gemini CLI 和 Antigravity 等。安装后即可在对应代理中自动使用。
技能作为代理的内置能力被自动加载。当您在代理（如 Claude Code）中提出与 Stitch 屏幕转换相关的请求时，代理会自动调用 react-components 技能，并依据 examples/gold-standard-card.tsx 等金标准示例生成组件。无需手动运行额外命令。
新技能需遵循仓库中规定的标准化目录结构：包含 SKILL.md（任务控制）、scripts（验证器）、resources（知识库）和 examples（金标准参考）。具体规范请参考 CONTRIBUTING.md 文件。确保技能符合 Agent Skills 开放标准以实现互操作性。
该技能输出符合“金标准”的 TypeScript React 组件，包含明确的接口定义、使用 Tailwind CSS 的样式类，以及详细的注释说明。示例参考 skills/react-components/examples/gold-standard-card.tsx，确保组件类型安全、设计令牌一致且可直接用于生产环境。