设计与前端

Stitch 设计系统管家

在 Stitch 中创建、更新并应用统一的界面设计系统。

45/ 100
不推荐

当前收益不足以覆盖风险或不确定性。

查看评分依据 ↓
可直接使用于
Codex · Claude Code
Star 数
★ 8.5k
最近更新
2 个月前
License
Apache-2.0
design-systemgoogle-stitchmcpdesign-tokens
+1ui-consistency

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

该技能用于通过 Stitch MCP 管理项目级设计系统。它可以检索项目屏幕和资源,从现有界面或文字描述中整理设计语言,并生成或更新 DESIGN.md。上传前必须获得用户确认,之后才能在 Stitch 中创建设计系统。它还可以将设计系统应用到现有屏幕,并维护 .stitch/metadata.json。

使用 list_projects 查找项目,使用 list_screens 选择代表性屏幕,再通过 get_screen 获取截图和 HTML 下载地址,并使用 read_url_content 读取 HTML。对于已有屏幕,它依赖 stitch-utilities 中的 design-md 技能提取设计系统;对于新项目或直接描述,则映射颜色、字体和圆角等具体值并生成 .stitch/DESIGN.md。用户确认后,上传 DESIGN.md,调用 create_design_system_from_design_md 创建 Stitch 设计系统;还可通过 get_project 和 list_design_systems 获取屏幕及设计系统标识,并调用 apply_design_system 应用主题。最后创建或更新 .stitch/metadata.json。

适合
  • 负责 Stitch 项目的设计师,需要从现有首页或仪表板界面整理可复用的设计语言。
  • 维护多屏幕产品的前端团队,需要把统一的颜色、字体和圆角规则应用到已有屏幕。
  • 启动新 Stitch 项目的产品团队,已经有“深色主题、蓝紫色、圆角、Inter 字体”等文字方向。
  • 需要把已有 .stitch/DESIGN.md 上传到 Stitch,并在项目级别建立设计系统的开发者。

如何安装这个 Skill?

使用前请注意
  • 核心功能依赖已配置且可访问的 Stitch MCP 服务、外部凭据和其他技能;源文件未证明中国大陆网络可达性。
  • 上传流程要求 API key,但未说明安全注入、日志暴露风险或最小权限配置。
  • 应用设计系统会产生外部项目变更,文档未提供回滚、变更预览或完整的应用前确认流程。
  • 关键路径缺少针对本技能的自动化测试和明确的异常处理说明。
开始前你需要
Agent 需要具备
  • Shell / 命令行
  • 网络访问
  • 本地文件系统
  • MCP Server
需要预先安装
  • Stitch MCP server

先按仓库 README 安装 Stitch Skills 集合:npx skills add google-labs-code/stitch-skills。也可以通过 Codex marketplace 添加仓库,或使用 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。安装后使用 plugins/stitch-design/skills/manage-design-system/。使用前必须配置并运行 Stitch MCP server;具体 MCP 配置步骤未在本资料中展开。

通用方式:手动安装到 Claude Code(macOS / Linux)
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/stitch-design/skills/manage-design-system" ~/.claude/skills/
rm -rf "$tmp"

根据源仓库地址和 Skill 路径自动生成,只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式,请优先按作者说明操作;想只在当前项目中使用,把 ~/.claude/skills 换成项目里的 .claude/skills。

如何使用这个 Skill?

试试这样说

安装后,把下面任意一句发给 Agent 即可触发:

  • Upload our design system from `.stitch/DESIGN.md` and apply it to all screens.

确保 Stitch MCP server 已配置并运行,然后触发:"Upload our design system from .stitch/DESIGN.md and apply it to all screens." 也可以请求分析指定 Stitch 项目、根据文字描述创建 DESIGN.md,或将设计系统应用到选定屏幕。上传前技能必须暂停并展示设计系统摘要,等待明确确认;未获确认不得上传。

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

优点
  • 覆盖从项目和屏幕检索、设计系统文件生成,到 Stitch 上传和屏幕应用的完整流程。
  • 包含用户确认检查点,降低未经批准上传设计系统的风险。
  • 支持从现有屏幕提取,也支持从文字描述生成具体颜色、字体和圆角值。
  • 提供明确的 Stitch MCP 工具调用流程和屏幕实例参数约束。
局限
  • 必须依赖已配置并运行的 Stitch MCP server,以及网络、Shell 和本地文件读写能力。
  • 设计系统提取依赖 stitch-utilities 中的 design-md 技能,单独安装时需要处理技能依赖。
  • 上传前需要人工确认,无法完全无人值守地完成创建流程。
  • README 未提供该技能的测试套件或平台验证记录。

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

与相关 Skills 并排比较;分数均按同一 FSRS 标准得出。

Skill FS 评分 Star 数 最近更新 License
Stitch 设计系统管家 本页 45 · 不推荐 ★ 8.5k 2 个月前 Apache-2.0
Stitch 提示词增强器 49 · 谨慎使用 ★ 8.5k 2 个月前 Apache-2.0
Stitch 前端设计系统提取器 42 · 不推荐 ★ 8.5k 2 个月前 Apache-2.0
Stitch 品味设计系统 42 · 不推荐 ★ 8.5k 2 个月前 Apache-2.0
VS Code 设计哲学 ✓ Microsoft · 官方 58 · 推荐 ★ 194k 12 天前 MIT

FollowSkills 如何评估这个 Skill?

FollowSkills 评估 · FSRS-2.0
不推荐
45/ 100 五分制 2.3 / 5
上游仓库在本次评估后已有新提交;当前评分仍对应所示审查版本,可能尚未覆盖最新改动。
1信任安全12 / 25 · 2.4/5

技能明确要求上传前取得用户确认,且限制在 Stitch MCP、Bash、Read、Write 和 web_fetch;但授权范围较宽,允许写入本地文件并执行脚本,API key 通过命令行参数传递,未说明敏感数据处理、最小权限、上传数据流、回滚或应用设计系统前的再次确认,因此扣分。

2可靠稳定7 / 20 · 1.8/5

检索、上传、创建和应用流程较具体,包含参数格式及部分错误规避说明;但依赖其他技能、Stitch MCP 和外部脚本,未提供针对本技能关键路径的测试或异常输入处理,脚本参数示例前后不完全一致,失败反馈也不充分,因此扣分。

3适用触发8 / 15 · 2.7/5

目标场景和主要输入输出较清晰,覆盖已有屏幕、新项目、直接描述和应用到屏幕;但未充分定义不适用范围、触发边界、不同环境要求或中文使用支持,也没有证据证明 Stitch 服务在中国大陆网络中的可达性,因此扣分。

4规范维护8 / 15 · 2.7/5

文档有分节、渐进式流程、示例 metadata、工具 schema、依赖提示和已知参数限制;仓库提供 Apache-2.0、Security Policy、版本支持范围和 CI,但未明确本技能维护责任人、更新路径、变更记录或稳定版本策略,且部分关键内容依赖未包含在本技能路径中的其他技能,因此扣分。

5有效结果6 / 15 · 2.0/5

该技能能组织 DESIGN.md 上传、创建项目级设计系统并应用到屏幕,预期可减少重复设计提示;但静态材料未验证代表性输出,强依赖 Stitch MCP、API 凭据及其他技能,元数据更新和恢复流程不完整,直接可用性与相对手工方案的收益证据有限,因此扣分。

6证据核验4 / 10 · 2.0/5

本技能自身包含可审计的步骤、JSON 示例和 schema 说明,仓库还有 CI;但 CI 仅验证其他 React skill,未覆盖本技能关键路径,也没有第三方执行记录、测试套件或交叉来源,因此静态证据有限,按上限保守评分。

1 2 3 4 5 6

点击维度查看打分理由

评估于 2026年7月20日 审查版本 ad4b8bc8c519 评估证据[1][2][3][4][5][6][7]

证据充分度:低 — 主要依赖静态检查、作者材料或有限演示;适合发现线索,不适合做高风险决策。

查看完整评分方法 →

常见问题

它能脱离 Stitch MCP server 单独运行吗?
不能。SKILL.md 明确要求通过 Stitch MCP 工具检索项目、上传 DESIGN.md、创建设计系统和应用设计系统。
上传设计系统前是否需要人工批准?
需要。技能要求先展示显示名称、关键颜色、字体和圆角等摘要,并等待用户明确确认。
它会自动修改所有屏幕吗?
不会默认无条件修改。应用设计系统时需要通过 get_project 获取屏幕实例,并传入要应用的真实屏幕;设计系统实例必须排除。
安装整个仓库后是否只得到这一个技能?
不是。仓库是包含 15 个技能的 monorepo;本资料中的目标技能位于 plugins/stitch-design/skills/manage-design-system/SKILL.md。

同仓库的其他 Skills

均来自 google-labs-code/stitch-skills

设计与前端

Stitch 提示词增强器

把模糊的界面想法整理成更具体、更适合 Stitch 生成的提示词。

★ 8.5k FS 49 谨慎使用 2 个月前
设计与前端

Stitch 前端设计系统提取器

从前端源代码提炼可供 Stitch 使用的 DESIGN.md。

★ 8.5k FS 42 不推荐 2 个月前
设计与前端

Stitch 品味设计系统

为 Google Stitch 生成严格、非模板化且可执行的 DESIGN.md 设计规范。

★ 8.5k FS 42 不推荐 2 个月前
设计与前端

Stitch 代码转设计

将现有前端代码提取为可上传到 Stitch 的设计与设计系统。

★ 8.5k FS 38 不推荐 2 个月前
设计与前端

Stitch 资产上传助手

将本地图片、HTML 和设计文档可靠上传到 Google Stitch 项目。

★ 8.5k FS 38 不推荐 2 个月前
设计与前端

Stitch 设计系统文档生成器

分析 Stitch 项目并生成可复用的 DESIGN.md 设计规范。

★ 8.5k FS 45 不推荐 2 个月前
设计与前端

Stitch 界面生成器

用文字或图片生成、编辑并探索 Stitch 界面设计。

★ 8.5k FS 45 不推荐 2 个月前
设计与前端

Stitch React 组件构建器

将 Stitch 设计屏幕转换为模块化、可维护且经过验证的 React 组件。

★ 8.5k FS 45 不推荐 2 个月前
开发与工程

Stitch React Native 构建器

将 Stitch HTML 设计转换为可维护的 React Native 组件,并同步现有原生界面。

★ 8.5k FS 38 不推荐 2 个月前
设计与前端

Stitch 静态 HTML 提取器

把运行中的网页应用转换为可独立分享和上传的静态 HTML。

★ 8.5k FS 49 谨慎使用 2 个月前
开发与工程

Stitch Remotion 演示视频生成器

将 Stitch 应用界面编排成带转场、缩放和文字说明的专业演示视频。

★ 8.5k FS 43 不推荐 2 个月前
设计与前端

Stitch 网站构建循环

用 Stitch 按迭代循环持续生成、整合和推进网站页面。

★ 8.5k FS 41 不推荐 2 个月前
开发与工程

Stitch React 仪表盘构建器

将 Stitch 设计屏幕转换为生产级 React + Vite 数据密集型仪表盘。

★ 8.5k FS 40 不推荐 2 个月前
设计与前端

shadcn/ui 前端组件集成助手

帮助开发者发现、安装、定制并验证 shadcn/ui 组件。

★ 8.5k FS 42 不推荐 2 个月前

相关 Skills