Stitch 设计技能库
面向 Google Stitch 的 Agent 技能与插件集合,遵循 Agent Skills 开放标准,支持 Codex、Claude Code、Cursor 等编码代理。
- Star 数
- ★ 8.5k
- 最近更新
- 2 个月前
- License
- Apache-2.0
- 主语言
- TypeScript
- FA 评分
- 0/100 · 缺口较多
30 秒速览
- 运行形态
- 可在哪里用
- 平台专用ChatGPT · Codex · Claude Code
- 费用
- 软件免费,模型调用费用自付
- 上手难度
- 中 · 需要几步配置
- 开始前需要
- 典型场景
- 前端开发人员希望将现有 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 强制高端设计标准。
- 前端开发人员希望将现有 React 或 Vue 代码迁移到 Stitch 设计项目中,使用 code-to-design 技能自动化转换。
- 设计师使用 generate-design 从文本描述快速生成多屏设计变体,用于探索不同方案。
- 开发团队希望将 Stitch 设计转换为生产级 React 组件,使用 react-components 技能并验证设计令牌。
- 产品经理通过 stitch-loop 从一个提示词生成完整的多页面营销网站。
- 希望在编码代理中集成 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?
查看各维度的扣分理由
证据仅包含 README、LICENSE、SECURITY.md 和 CI 工作流,未提供技能内部指令或脚本内容,无法评估权限最小化、用户确认、数据流透明性、敏感数据处理、依赖安全、外部影响、回滚或来源归属。所有标准均因证据不足而评为 0。
未提供技能内部指令或脚本,无法评估自洽性、依赖可用性或失败消息。所有标准均因证据不足而评为 0。
README 描述了目标受众和使用场景,但未提供技能内部指令,无法评估能力边界、触发精度或环境适配。所有标准均因证据不足而评为 0。
README 提供了信息架构和安装说明,但未提供技能内部文件,无法评估命名稳定性、示例、已知限制、版本变更日志或维护责任。许可证存在但未评估。所有标准均因证据不足而评为 0。
未提供技能内部指令或脚本,无法评估输出可用性、边际价值或成本效益。所有标准均因证据不足而评为 0。
未提供技能内部指令或脚本,无法评估声明可追溯性、跨来源佐证或事实推断分离。所有标准均因证据不足而评为 0。
- 源码中未见:最小权限约束只授予完成任务所需的权限:用专用账号或只读令牌,并限定可访问的目录和仓库。
- 源码中未见:执行前用户确认开启或自行加上执行前确认;先在沙箱或测试环境跑通,确认行为后再接入真实数据。
- 源码中未见:数据流向说明运行时观察它连接了哪些外部服务(代理或防火墙日志);弄清数据去向之前不要输入敏感数据。
- 源码中未见:敏感信息处理使用专用、低权限、可随时吊销的 API 密钥,不要复用生产凭据,也不要让密钥出现在日志里。
- 源码中未见:依赖安全审查安装前固定版本并做一次依赖扫描(如 npm audit、pip-audit);优先放在容器里运行。
- 源码中未见:外部影响披露先弄清它会写入、发送或修改哪些外部系统,用测试账号或测试仓库验证后再接入正式环境。
- 源码中未见:回滚或恢复路径运行前先备份,或在 git 分支、快照上操作,确保改动可以撤销。
- 源码中未见:来源归属可核验从官方仓库或包源安装,核对发布者和仓库地址,避免同名仿冒包。
- 静态审查仅基于仓库根文件,未包含技能内部指令或脚本,无法评估实际安全性和可靠性。
- 发布者身份未验证,但未发现恶意迹象。
- 建议在安装前审查技能内部指令和脚本,并验证依赖安全性。
最近版本
来自该项目 GitHub Releases 的最新发布记录,说明为上游原文摘录,未经本站改写或测试。
-
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 查看 ↗ -
v0.1 v0.1 release