stitch-skills：把 Stitch 设计转成 React 仪表盘的 Google MCP skills

在 Stitch 里做设计，再手工把屏幕转成 React / React Native，再手写仪表盘的数据接入——这条链路慢且有损。google-labs-code/stitch-skills 提供三个插件包（stitch-design、stitch-build、stitch-utilities），遵循 Agent Skills 开放标准，能装进 Claude Code、Codex、Gemini CLI 或 Cursor，把设计到代码的交接压缩成一条 prompt。

为什么这个 skill 重要

仓库提供 15 个 skill，分成三类：stitch-design 把代码搬进 Stitch（code-to-design、generate-design、manage-design-system、extract-design-md、extract-static-html、upload-to-stitch）；stitch-build 把 Stitch 屏幕搬回框架（react-components、react-native、remotion、shadcn-ui、react-vite-dashboard）；stitch-utilities 做分析与预处理（design-md、enhance-prompt、stitch-loop、taste-design）。同一套 skill 名在 Codex、Claude Code、Cursor、Gemini CLI 之间通用，OpenCode 走手工安装。

对已经在用 Stitch 的团队，这是「设计在 Stitch 里定稿 → 在自家 app 里跑起来」的最短路径。对刚接触 Stitch 的团队，code-to-design 是把现有前端迁进设计系统成本最低的入口。

安装

每种 agent 各有自己的安装方式。按你用的选。

Codex（Antigravity）—— 推荐，一次装齐三个插件：

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

Claude Code：

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

Cursor：

npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

按需安装（只装你需要的包）：

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

在这一切能跑之前，Stitch MCP server 必须先配上凭证和可达端点。OpenCode 用户需要手工把 skill 目录拷到 .opencode/skills/；OpenCode 还要求把任何 stitch::... 形式的 skill 名 frontmatter 重命名为 lowercase kebab-case，skill 指令里的工具名可能要重写成 OpenCode 的 webfetch / bash 风格。

真实工作流：把现有前端迁入 Stitch

你有一个跑得通的 React + Vite 仪表盘，路径 /path/to/dashboard，想让设计师能在不碰源码的前提下继续迭代。

第一步。确保 Stitch MCP server 已配置、stitch-design 已装好，在 agent 里打开项目并执行：

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

第二步。code-to-design 技能被激活。它会扫描仓库、抽取独立的静态 HTML、生成一份描述视觉体系的 DESIGN.md，再把素材上传到指定项目。

第三步。打开 Stitch，确认项目存在、屏幕已就位。设计师就可以通过 manage-design-system 改屏幕、做变体、应用主题，全程不碰源码。

第四步。当设计改完回流后，跑一次 extract-design-md 重新生成本地设计摘要，让下游的代码生成 skill（react-components、react-vite-dashboard）保持对齐。

真实工作流：从 Stitch 屏幕生成 React 仪表盘

你有一张在 Stitch 里定稿的 DeFi 组合页，以及一份记录设计令牌的 DESIGN.md。你想要一个跑得起来的 React + Vite 仪表盘，并接好 TanStack Query。

第一步。确认 stitch-build 已装好。提需求：

Build a DeFi portfolio dashboard from this Stitch screen using our DESIGN.md.
Use TanStack Query for data fetching and match the spacing scale from DESIGN.md.

第二步。react-vite-dashboard 技能被激活。它拉取 Stitch 屏幕，套上 DESIGN.md 里的令牌，搭好 Vite 工程、配上 TanStack Query，输出与原版对齐的组件文件。预期产出：

src/
├── components/
│   ├── PortfolioHeader.tsx
│   ├── HoldingsTable.tsx
│   └── AllocationChart.tsx
├── hooks/
│   └── usePortfolio.ts          ← TanStack Query
├── lib/
│   └── tokens.ts                ← DESIGN.md 取的值
└── App.tsx

第三步。pnpm dev 启动，对照 Stitch 屏幕检查，迭代时只需改屏幕再重跑 skill——设计变更沿同一通道回流。

• 三个插件最好一次装齐；skill 之间有依赖，按需安装时要算上完整闭包。
• 把 DESIGN.md 放在 app 代码同一仓库内做版本管理，让 react-vite-dashboard 与 manage-design-system 在团队里保持同步。
• 要给 Stitch 项目做演示视频时，先跑 react-components 再跑 remotion——后者依赖前者的 React 组件输出，不是原始 Stitch HTML。
• 在 agent 之间切换（Claude Code → Cursor），skill 名是稳定的，不必重写提示词。

何时不要用

如果你的团队不用 Stitch、未来也不打算用，这些 skill 不会带来任何价值——它们是某个特定设计工具的 MCP 包装。纯代码到代码的重构，应当用栈级 skill（比如 Jeffallan/claude-skills），不必绕一圈设计。

在 leaderboard 查看更多设计转代码 skill。