google-labs-code/stitch-skills · 上手攻略

• 仓库：google-labs-code/stitch-skills
• 链接：https://github.com/google-labs-code/stitch-skills
• 分类：AI Agent Skills / 设计工具集成 / 官方插件套件
• 作者：spark
• 更新：2026-08-08

是什么

stitch-skills 是 Google Labs 为自家 Stitch 产品（AI 设计生成平台）发布的官方 Agent Skills 集合，遵循 Agent Skills 开放标准。仓库本身不是单一插件，而是一个 marketplace：下面挂了三组共 13 个 skills，分别负责设计生成、构建出码、辅助工具。

它解决的是「把 Stitch 装进各种 coding agent」的问题——同样的 skills 描述文件，能同时被 Codex、Antigravity、Gemini CLI、Claude Code、Cursor、OpenCode 加载。Stitch Skills 是 Google 在 2026 年中前后主推的「设计 → 代码」流水线入口之一。

解决什么问题

设计稿转代码这件事，传统路径是「设计师出 Figma → 工程师对像素」。Stitch 本身能文生 UI，但工程师和 Stitch 之间缺一层「能被我手头的 Claude Code / Cursor 直接调用」的桥。stitch-skills 就是这个桥。

具体场景：

• 把一个 React 项目反向喂给 Stitch 做设计还原（stitch::code-to-design）
• 让 Stitch 改一张现有设计稿（stitch::generate-design）
• 从前端代码里抽 DESIGN.md 设计系统文件，再批量套用主题（stitch::extract-design-md + stitch::manage-design-system）
• 把 Stitch 的设计稿编译成 React / React Native / shadcn/ui 组件（stitch::react-components、stitch::react-native、shadcn-ui）
• 直接生成 Remotion 走查视频（remotion skill）

快速安装

⚠️ 必须先完成 Stitch MCP 设置：拿到 MCP endpoint URL，并把它对应的环境变量/凭据配好。skills 本身不带 MCP 服务，缺这一步所有 skill 都会失败。

按你的 coding agent 选择路径：

Codex CLI（推荐路径，最快）

# 添加 marketplace
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

# 按需安装三个子插件
/codex plugin install stitch-design
/codex plugin install stitch-build
/codex plugin install stitch-utilities

Claude Code / Cursor（npx plugins）

# 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

# 只装 skill 子集
npx skills add google-labs-code/stitch-skills

OpenCode（手动，因为不支持 plugins CLI）

mkdir -p .opencode/skills
cp -R plugins/stitch-design/skills/generate-design .opencode/skills/
# 按需复制其他 skill 子目录

然后在 opencode.json 里挂上 Stitch MCP：

{
  "mcp": {
    "stitch": {
      "type": "remote",
      "url": "YOUR_STITCH_MCP_URL",
      "enabled": true
    }
  }
}

注意：OpenCode 要求 skill 目录名与 name frontmatter 都是 lowercase kebab-case；带 stitch:: 命名的 skill 要先把 name 字段和目录重命名。skill 里的工具名（web_fetch、run_command 等）也要替换成 OpenCode 的 webfetch / bash，否则 agent 找不到对应工具。

核心用法

1. 文生 / 编辑设计稿

在配好 MCP 的 agent 里直接说：

"Make a browse tab for a mobile app for romance and date night ideas." "Edit the login screen to add a 'Remember Me' checkbox and change the button color to blue." "Generate 3 design variants of the home screen with dark mode and high-density layouts."

对应 skill：stitch::generate-design。Agent 会调 Stitch MCP 完成设计生成 / 编辑 / 变体输出。

2. 已有代码 → Stitch 设计

"Upload the frontend code at /path/to/dashboard into a Stitch project named 'Dashboard-Migration-2026'."

对应 skill：stitch::code-to-design。流程：HTML 抽取 → 设计系统抽取 → 上传到指定 Stitch project。

3. 抽取设计系统 + 应用主题

"Scan /src and extract the design system into .stitch/DESIGN.md." "Upload our design system from .stitch/DESIGN.md and apply it to all screens."

对应 skill 链：stitch::extract-design-md → stitch::manage-design-system。

4. Stitch 设计 → React 组件

"Convert all screens in Stitch project projects/123 to React components." "Sync the app to the last updates of the Stitch project 13039335308618232534."

对应 skill：stitch::react-components，会做自动校验和 design token 一致性检查。

5. Stitch 设计 → React Native / shadcn / Remotion

• stitch::react-native：生成 StyleSheet + 平台特定代码（iOS / Android）
• shadcn-ui：和 shadcn 生态对接
• remotion：把 Stitch 项目渲染成带转场和缩放的走查视频

6. 最小可跑命令（验证链路）

# 1) 装上 marketplace + 三个插件
codex plugin marketplace add google-labs-code/stitch-skills --ref main
codex plugin install stitch-design
codex plugin install stitch-build
codex plugin install stitch-utilities

# 2) 确认 Stitch MCP 已经按官方 setup 配好
#    (stitch.withgoogle.com/docs/mcp/setup/ 拿 endpoint + creds)

# 3) 在 Codex 里跑一次最小文生设计
#    "Create a single screen for a 3-step onboarding flow for a finance app."
#    预期：Stitch MCP 返回设计，agent 把截图链接回传

典型适用场景

• 设计 ↔ 代码双向流动：从 React 反推 Stitch 设计、审完设计再生成新组件，stitch-skills 是端到端入口。
• 多端复用同一设计稿：一次 Stitch 出图，靠 react-components / react-native / remotion 三个 skill 同时生成 Web、Mobile、视频走查，链路最短。
• 设计系统治理：把 .stitch/DESIGN.md 作为单一真源，新项目按它生成设计稿。
• 设计资产归档：把运行中的 web app 用 extract-static-html 冻成静态 HTML 快照再上传 Stitch，便于后续修改。

坑与注意

1. 必须配 Stitch MCP：skills 只是「操作 Stitch 的指令集」，不含 MCP 服务。endpoint 拿不到就什么也跑不起来——这是仓库 README 反复强调的点。
2. plugins 之间有依赖：stitch-design 内部 skill 经常互相引用。选装时 README 明确警告 "if you choose to install skills selectively, ensure you include all required dependencies"，漏一个就触发未定义引用。
3. OpenCode 不走 npx：npx skills / npx plugins 路径在 OpenCode 完全无效，必须手动 cp -R + 写 opencode.json。OpenCode 对 skill frontmatter 命名也更严格（lowercase kebab-case）。
4. 工具名差异：skill 内部写的工具名（webfetch、bash）和 OpenCode 内置名（web_fetch、run_command）不一致，迁移时必须手动改。
5. MCP 凭据安全：mcp.json 里 env 块可能含密钥。stitch-skills 依赖 Stitch MCP 服务读取，但仓库 README 没承诺帮你加密存储，落地时建议用 secret manager。
6. 稀疏检出的 --sparse：是「加速克隆」，不是必需；省略它会拉整个仓库（仓库当前体量不大，但未来不可知）。

与同类对比

如果团队已经在用 Stitch 且希望把设计流程接进 coding agent，stitch-skills 是目前最完整的官方方案；如果设计源头是 Figma，stitch-skills 不适用。

一句话推荐

Google Labs 给 Stitch 配的官方 Agent Skills 全家桶——一次性装上 marketplace + 三个子插件，配合 Stitch MCP 即可在 Claude Code / Codex / Cursor 里完成「设计 � 代码」双向流动；适合已用 Stitch 的设计/前端协作团队，注意先配 MCP 再用 skill。

原始 commit 链接： - 仓库主分支最新 commit：535b0889a468（2026-07-30，Merge PR #89） - 完整链接：https://github.com/google-labs-code/stitch-skills/commit/535b0889a468 - README 源文件：https://github.com/google-labs-code/stitch-skills/blob/main/README.md