Stitch 设计技能库

面向 Google Stitch 的 Agent 技能与插件集合,遵循 Agent Skills 开放标准,支持 Codex、Claude Code、Cursor 等编码代理。

Star 数
★ 8.5k
最近更新
2 个月前
License
Apache-2.0
主语言
TypeScript

30 秒速览

运行形态
Agent 插件 / 技能命令行工具
可在哪里用
平台专用ChatGPT · Codex · Claude Code
费用
软件免费,模型调用费用自付
上手难度
中 · 需要几步配置
开始前需要
Stitch MCP 服务器Node.js(用于 npx 命令)Shell / 命令行网络访问本地文件系统MCP Server
典型场景
前端开发人员希望将现有 React 或 Vue 代码迁移到 Stitch 设计项目中,使用 code-to-design 技能自动化转换。
不适合
  • 不使用 Stitch MCP 服务器或不接受平台绑定的开发者
  • 只想安装单个技能、不愿处理技能间依赖关系的用户

这个 Agent 能做什么,适合哪些场景?

Stitch Design Skills 是一个遵循 Agent Skills 开放标准的技能与插件库,用于与 Google Stitch 设计协作平台交互。它提供三个插件:stitch-design(设计工作流)、stitch-build(代码生成)和 stitch-utilities(设计辅助工具)。每个技能通过 SKILL.md、scripts、resources 和 examples 目录构成,依赖 Stitch MCP 服务器运行。安装方式包括 Codex 插件市场、Claude Code/Cursor 的 npx plugins 命令,以及 OpenCode 的手动安装。该库覆盖从设计生成、代码转换到设计规范提取的完整流程,特别适合将 Stitch 设计集成到编码代理工作流中的开发者。

该库提供了一系列技能,通过与 Stitch MCP 服务器交互来执行设计任务。具体包括:stitch::code-to-design 从前端代码提取 HTML 并生成 Stitch 设计;stitch::generate-design 根据文本或图片生成新屏幕、编辑现有屏幕并创建设计变体;stitch::manage-design-system 上传设计系统(DESIGN.md)并应用到屏幕;stitch::extract-design-md 从源代码提取设计规范;stitch::upload-to-stitch 上传本地资源到 Stitch 项目。构建方面,stitch::react-components 将 Stitch 屏幕转换为 React 组件,stitch::react-native 生成 React Native 组件,remotion 生成视频,shadcn-ui 提供 shadcn/ui 集成指导,react-vite-dashboard 构建 React+Vite 仪表盘。实用技能包括 design-md 生成 DESIGN.md、enhance-prompt 优化提示词、stitch-loop 生成多页面网站、taste-design 强制高端设计标准。

  1. 前端开发人员希望将现有 React 或 Vue 代码迁移到 Stitch 设计项目中,使用 code-to-design 技能自动化转换。
  2. 设计师使用 generate-design 从文本描述快速生成多屏设计变体,用于探索不同方案。
  3. 开发团队希望将 Stitch 设计转换为生产级 React 组件,使用 react-components 技能并验证设计令牌。
  4. 产品经理通过 stitch-loop 从一个提示词生成完整的多页面营销网站。
  5. 希望在编码代理中集成 Stitch 设计工作流,并通过插件市场快速安装技能套件的开发者。

如何安装或部署这个 Agent?

对于 Codex,使用 CLI 安装插件市场: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 和 Cursor,使用 npx plugins add google-labs-code/stitch-skills --scope project --target claude-code 或 --target cursor。对于 OpenCode,需要手动复制技能文件夹和配置 MCP。安装前需完成 Stitch MCP 设置。

如何使用这个 Agent?

安装插件后,选择所需技能(如 stitch-design 或 stitch-build)。每个技能支持特定的提示词,例如使用 stitch::generate-design 时输入“为移动应用制作浪漫约会创意的浏览标签”。确保 Stitch MCP 服务器已配置并运行。技能通过代理执行,如 Codex 或 Claude Code,使用提供的提示词即可。

这个 Agent 有哪些优点和局限?

优点
  • 与 Google Stitch 深度集成,提供官方支持的设计工作流。
  • 遵循 Agent Skills 标准,兼容多种编码代理(Codex、Claude Code、Cursor)。
  • 提供插件化安装,方便选择性安装技能。
  • 包含从设计到代码的完整流程,覆盖设计、构建和实用工具。
局限
  • 依赖 Google Stitch 专用 MCP 服务器,具有平台锁定性。
  • 技能间存在依赖,选择性安装时需注意完整性问题。
  • OpenCode 安装需要手动适配技能名称和工具映射,可能无法直接运行。
  • 部分技能(如 react-vite-dashboard)针对特定框架(React+Vite),适用范围有限。

这个 Agent 与同类方案有什么区别?

与相关度最高的同类 agent 并排比较关键指标。

Agent 源码审查 形态 / 费用 Star 最近更新 主语言 完整支持的平台
Stitch 设计技能库 当前 0 · 缺口较多 Agent 插件 / 技能免费 + 模型费 ★ 8.5k 2 个月前 TypeScript ChatGPT · Codex · Claude Code
Appllama 移动应用设计技能 50 · 缺口较多 Agent 插件 / 技能免费版 + 付费版 ★ 2.9k 1 个月前 — Codex · Claude Code
XIAS · UX/UI Agent Skills 70 · 存在缺口 Agent 插件 / 技能免费 + 模型费 ★ 2.3k 8 天前 JavaScript Claude Code
UIZZE · 让编码智能体产出更好的界面 47 · 缺口较多 Agent 插件 / 技能免费版 + 付费版 ★ 63 6 天前 JavaScript Codex · Claude Code

FollowAgents 如何评估这个 Agent?

FollowAgents 源码审查 · FARS-2.1
缺口较多
0/ 100 五分制 0.0 / 5
信任安全 0/29
可靠稳定 0/14
适用触发 0/18
规范维护 0/18
有效结果 0/13
证据核验 0/8
查看各维度的扣分理由
信任安全0 / 29 · 0.0/5

证据仅包含 README、LICENSE、SECURITY.md 和 CI 工作流,未提供技能内部指令或脚本内容,无法评估权限最小化、用户确认、数据流透明性、敏感数据处理、依赖安全、外部影响、回滚或来源归属。所有标准均因证据不足而评为 0。

可靠稳定0 / 14 · 0.0/5

未提供技能内部指令或脚本,无法评估自洽性、依赖可用性或失败消息。所有标准均因证据不足而评为 0。

适用触发0 / 18 · 0.0/5

README 描述了目标受众和使用场景,但未提供技能内部指令,无法评估能力边界、触发精度或环境适配。所有标准均因证据不足而评为 0。

规范维护0 / 18 · 0.0/5

README 提供了信息架构和安装说明,但未提供技能内部文件,无法评估命名稳定性、示例、已知限制、版本变更日志或维护责任。许可证存在但未评估。所有标准均因证据不足而评为 0。

有效结果0 / 13 · 0.0/5

未提供技能内部指令或脚本,无法评估输出可用性、边际价值或成本效益。所有标准均因证据不足而评为 0。

证据核验0 / 8 · 0.0/5

未提供技能内部指令或脚本,无法评估声明可追溯性、跨来源佐证或事实推断分离。所有标准均因证据不足而评为 0。

风险与缓解建议
  • 源码中未见:最小权限约束只授予完成任务所需的权限:用专用账号或只读令牌,并限定可访问的目录和仓库。
  • 源码中未见:执行前用户确认开启或自行加上执行前确认;先在沙箱或测试环境跑通,确认行为后再接入真实数据。
  • 源码中未见:数据流向说明运行时观察它连接了哪些外部服务(代理或防火墙日志);弄清数据去向之前不要输入敏感数据。
  • 源码中未见:敏感信息处理使用专用、低权限、可随时吊销的 API 密钥,不要复用生产凭据,也不要让密钥出现在日志里。
  • 源码中未见:依赖安全审查安装前固定版本并做一次依赖扫描(如 npm audit、pip-audit);优先放在容器里运行。
  • 源码中未见:外部影响披露先弄清它会写入、发送或修改哪些外部系统,用测试账号或测试仓库验证后再接入正式环境。
  • 源码中未见:回滚或恢复路径运行前先备份,或在 git 分支、快照上操作,确保改动可以撤销。
  • 源码中未见:来源归属可核验从官方仓库或包源安装,核对发布者和仓库地址,避免同名仿冒包。
  • 静态审查仅基于仓库根文件,未包含技能内部指令或脚本,无法评估实际安全性和可靠性。
  • 发布者身份未验证,但未发现恶意迹象。
  • 建议在安装前审查技能内部指令和脚本,并验证依赖安全性。
证据充分度:低 评估于 2026年8月9日 审查版本 535b0889a468 评估后仓库已有新提交,评分可能未覆盖最新改动
查看完整评分方法 →

最近版本

来自该项目 GitHub Releases 的最新发布记录,说明为上游原文摘录,未经本站改写或测试。

  1. v1.0 Stitch Skills Plugins Release
    发布说明摘录
    Major Launch for Stitch Skills plugins 1. Features: new Skills added, including code-to-design, manage-design-system, extract-static-html, extract-design-md, upload-to-stitch 2. Refactor: merge several design related skills to generate-design 3. Reorg: structure all skills into three plugins: stitch-design, stitch-build, stitch-utilities
    在 GitHub 查看 ↗
  2. v0.1 v0.1 release

常见问题

安装时是否需要先完成 Stitch MCP 设置?
是的,所有技能都要求 Stitch MCP 服务器已配置并运行,请参考官方文档完成设置。
我可以只安装部分技能而不是整个插件吗?
可以,使用 npx skills add 或插件市场的选择性安装,但需注意技能间的依赖关系,确保安装所有必需的依赖。
在 OpenCode 中使用是否有额外步骤?
OpenCode 需要手动复制技能文件夹,并可能需要将技能名称改为小写 kebab-case 以匹配目录名,同时需要配置 Stitch MCP 远程服务。
这些技能是否支持除 Stitch 之外的设计平台?
技能专门针对 Stitch,不涉及其他设计平台,且依赖于 Stitch 的 API。
在 GitHub 查看 ↗ 安装 ↓

对比同类 Agent

用同一套 FARS 评审,横向比较这个 Agent 所属的短名单。

相关 Agents