Stitch Skills

这是什么？适合谁？

Stitch Skills 是 Google Labs 维护的 Agent Skills 库，为 Google Stitch（stitch.withgoogle.com，Google 的实验性 AI 设计工具）提供官方技能集。它把”在 Stitch 里生成/编辑设计、上传设计系统、把设计转成 React/React Native 代码、生成演示视频”等能力，打包成 15 个技能，分属 3 个插件（stitch-design、stitch-build、stitch-utilities），遵循 Agent Skills 开放标准，兼容 Codex、Gemini CLI、Claude Code、Cursor、Antigravity、OpenCode 等编码代理。截至 2026 年 8 月，仓库 8k+ Stars、1k+ Forks（Apache-2.0 协议）。

它解决的痛点是：设计师在 Stitch 里画好界面后，从设计到代码仍要人工搬运；而 Stitch Skills 让编码代理直接读懂 Stitch 项目，一键生成屏幕、编辑现有设计、产出 React/React Native 组件，甚至把界面变成可运行的 App 或 Remotion 演示视频。相比 Figma 生态（需要 Figma MCP + 各种插件拼装），Stitch Skills 是官方维护、与 Stitch MCP 深度绑定的”开箱即用”技能包。

横向对比：Figma（成熟但 AI 能力靠插件/MCP 拼装，官方技能不全）、Vercel v0 与 Builder.io（“文字 → 界面 → 代码”，但绑定自家运行时/平台）、Anthropic 的 canvas-design 技能（通用设计流程，不针对具体设计工具）。Stitch Skills 的独特之处在于：它是 Google Stitch 这个具体设计工具的第一方技能库，且明确走 Agent Skills 标准、跨代理兼容。

适合谁：前端/全栈开发者（设计转代码提速）、用 Stitch 的设计师与产品经理（把设计管起来）、做 AI 应用 demo 的团队（快速出多页网站/演示视频）。

使用前提：必须先在 stitch.withgoogle.com 完成 Stitch MCP 服务器的注册与凭据配置（这是硬性前置），再装技能。注意：这是 Google Labs 实验项目，不是”官方支持”的 Google 产品。

准备工作

在动手前，确认下面几项就绪：

1. Stitch MCP 服务器（硬性前置）：按官方指引配置并运行，拿到 MCP 端点 URL 与凭据。https://stitch.withgoogle.com/docs/mcp/setup/

2. 编码代理（必选）：Codex（推荐，插件支持最完整）、Claude Code、Cursor、Gemini CLI、Antigravity、OpenCode 均可。

3. Node.js + npx：npx skills / npx plugins 安装器需要 Node 运行时。

4. 前置知识：理解 Agent Skills 概念与 MCP（Model Context Protocol）基础；OpenCode 用户还需会手动拷贝技能目录 + 配置 opencode.json。

5. 替代方案：不用 Stitch 的话，用 Figma + Figma MCP，或 Vercel v0 / Builder.io；只想做通用设计流程可用 Anthropic 官方 anthropic-canvas-design 技能。

安装 → 配置 → 首次使用

第一步：注册 Stitch MCP 服务器

按 https://stitch.withgoogle.com/docs/mcp/setup/ 完成注册，拿到 MCP 端点 URL 与环境变量/凭据。

预期结果：代理环境里能连上 Stitch MCP，这是所有技能干活的前提。

第二步：安装技能（Codex，推荐）

codex plugin marketplace add google-labs-code/stitch-skills --ref main \
  --sparse .agents/plugins \
  --sparse plugins/stitch-design \
  --sparse plugins/stitch-build \
  --sparse plugins/stitch-utilities

预期结果：marketplace 注册成功，随后可按需 install stitch-design / stitch-build / stitch-utilities 三个插件。

第三步：Claude Code / Cursor 安装

# Claude Code（装进当前项目）
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

# Cursor（装进当前 workspace）
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

或按需选择性安装单个技能：

npx skills add google-labs-code/stitch-skills

预期结果：技能进入对应代理的技能目录，可被自动识别。

第四步：验证首次使用

在代理里说：

"Make a browse tab for a mobile app for romance and date night ideas."

预期结果：触发 stitch::generate-design 技能，代理通过 Stitch MCP 生成屏幕。或：

"Convert all screens in Stitch project projects/123 to React components."

预期结果：触发 stitch::react-components，产出带校验的 React 组件。

常见踩坑

踩坑 1：技能装好了但代理不动作——MCP 没配

• 现象：装完技能，代理一直提示找不到 Stitch 或工具不可用。
• 原因：Stitch Skills 是”技能”，真正干活靠 Stitch MCP；README 明确把 MCP 配置列为 Prerequisites。
• 解决：先完成 https://stitch.withgoogle.com/docs/mcp/setup/ 注册，确认端点/凭据到位再装技能。

踩坑 2：Antigravity 安装失败

• 现象：想给 Antigravity 装，npx plugins 报 unrecognized target。
• 原因：npx plugins 不识别 antigravity 目标（closed #76 建议改走 agy plugin install 或 npx skills；#53/#70 均为 Antigravity 安装问题）。
• 解决：Antigravity 用户用 agy plugin install 或 npx skills add，别用 --target antigravity。

踩坑 3：OpenCode 装不上/技能不加载

• 现象：OpenCode 里技能不被识别（历史 issue #63 “Opencode integration missing”）。
• 原因：OpenCode 不用 npx plugins 布局，且要求 skill name 为小写 kebab-case 并与目录名一致；stitch::… 命名不符合。
• 解决：手动拷贝技能目录到 .opencode/skills/，把 name 字段与文件夹改成 kebab-case，并在 opencode.json 里配置 Stitch MCP remote 条目。

踩坑 4：generate-design 的 Edit 流程无效

• 现象：让代理”编辑登录页加个按钮”，结果没变化。
• 原因：上游 stitch-sdk 的 edit_screens 不持久化（open issue #68，指向 stitch-sdk#361）。
• 解决：改用”重新生成整个屏幕/生成变体”绕过单点编辑，并跟踪上游修复。

踩坑 5：文档链接跳转错误

• 现象：点 stitch.withgoogle.com/docs 里的链接跳到错误页。
• 原因：官方文档站点存在重定向问题（closed #69）。
• 解决：把目标路径拼回同域名下打开（如 /docs/learn/device-types/）。

踩坑 6：npx skills 升级后坏掉

• 现象：npx skills 命令在 v1.0 之后报错。
• 原因：npx skills 工具的回归 bug（closed #66）。
• 解决：升级到最新版本，或改用 npx plugins / 直接 git clone + 手动拷贝。

踩坑 7：这不是官方支持产品

• 现象：以为能获得 Google 官方 SLA/支持。
• 原因：README 明确声明”not an officially supported Google product”，且不参与 Google 开源软件漏洞奖励计划。
• 解决：按实验项目对待，问题走 GitHub Issues（社区），别指望官方支持通道。

初级用法

1. 文字生成界面："Generate a browse tab for a mobile app for romance and date night ideas." —— 触发 generate-design。
2. 设计转 React："Convert all screens in Stitch project projects/123 to React components." —— 触发 react-components。
3. 上传设计系统："Upload our design system from .stitch/DESIGN.md and apply it to all screens." —— 触发 manage-design-system。
4. 代码转设计："Upload the frontend code at /path/to/dashboard into a Stitch project named 'Dashboard-Migration-2026'." —— 触发 code-to-design。
5. 提示词增强："Enhance this prompt: 'make a settings page'." —— 触发 enhance-prompt。

高级玩法

1. 前端代码 → DESIGN.md → Stitch 全链路：extract-design-md（从源码抽设计系统）→ upload-to-stitch（上传）→ generate-design（生成/编辑）。
2. 单提示词生成完整多页网站：stitch-loop “Build a 5-page portfolio website with Stitch” —— 自动校验。
3. 设计出演示视频：remotion 技能把 Stitch 项目渲染成带平滑转场/缩放的 walkthrough 视频。
4. 生产级 React Native：react-native 把 Stitch HTML 设计转成带 StyleSheet + 平台差异代码的 RN 组件。
5. 强制”去 AI 味”的设计规范：taste-design 生成强制高级排版/校准配色的 DESIGN.md，对抗 AI 生成界面的”通用感”。

小技巧

1. 先跑通 Stitch MCP 再加技能——90% 的”技能不工作”其实是 MCP 没配好。
2. 选择性安装时注意技能间有依赖（README 明确警告），尽量整插件装而非零散挑。
3. 用 --sparse 参数只拉需要的插件目录，加速 clone。
4. OpenCode 用户记住三条：kebab-case 命名、.opencode/skills/ 目录、opencode.json 配 remote MCP。
5. 把 .stitch/DESIGN.md 当设计系统单一事实源，配合 manage-design-system / taste-design 统一全站设计 token。

常见问题 FAQ

Q1：Stitch Skills 收费吗？Stitch 本身呢？

A：技能库是 Apache-2.0 开源免费。Stitch 是 Google Labs 实验性设计工具，处于 preview 阶段、未公开商业定价；Stitch MCP 的注册与配额见官方文档。来源：https://github.com/google-labs-code/stitch-skills

Q2：和 Figma（Figma MCP）有什么区别？

A：Figma 是成熟商用设计工具，生态庞大但 AI/代码生成靠第三方 MCP 与插件拼装；Stitch Skills 是 Google 官方为自家 Stitch 设计工具维护的第一方技能库，与 Stitch MCP 深度绑定、开箱即用，但 Stitch 本身仍是实验产品，成熟度不及 Figma。

Q3：和 Vercel v0 / Builder.io 有什么区别？

A：v0/Builder.io 是”提示词 → 界面 → 代码”的托管平台，绑定各自运行时与平台；Stitch Skills 只负责把设计转成 React/React Native 等代码，代码与运行时完全在你手里，无平台锁定。

Q4：支持哪些编码代理？

A：官方声明兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor、OpenCode（手动安装）。注意各代理安装方式不同，Antigravity 与 OpenCode 有特殊步骤。

Q5：这是 Google 官方支持的产品吗？

A：不是。它是 Google Labs 开源项目，README 明确”not an officially supported Google product”，不参与 Google 漏洞奖励计划；问题与支持走 GitHub Issues 社区。

进阶学习建议

• 研究 stitch::code-to-design 的”HTML 抽取 + 设计系统 + 上传”流程——它示范了如何把既有前端代码反向工程成设计资产。
• 读 stitch::react-components 里的”自动化校验 + 设计 token 一致性”实现，学习技能里 scripts/（可执行校验器）+ resources/（检查清单）+ examples/（黄金范例）三段式结构。
• 对比 extract-design-md（从源码抽 DESIGN.md）与 design-md（从 Stitch 项目抽 DESIGN.md）两个互补技能，理解”设计系统单一事实源”的双向抽取。
• 真实案例：react-vite-dashboard 技能内置了 DeFi 组合看板模板（TanStack Query + Web3 读模式），是官方给的”设计 → 生产级 App”落地范本。
• 进阶路线：先吃透 generate-design + react-components 主链路 → 用 stitch-loop 做端到端多页站 → 再研究 shadcn-ui / react-native 的技能写法 → 最后按 Adding New Skills 指南（校验类、解耦数据类、生成类）贡献新技能。

参考链接

• Stitch Skills GitHub 仓库
• Google Stitch 官网
• Stitch MCP 配置指引
• Agent Skills 开放标准
• OpenCode 技能文档

免责声明

本文基于官方文档和公开资料整理，AI 辅助生成，MagicNetWorld 尚未完成独立实测。社区指标（Stars/Forks）采集自 GitHub 公开 API（2026-08-22），Stitch 为 Google Labs 实验项目，功能以官方文档为准。