设计 · google-labs-code/stitch-skills
stitch-skills
Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities.
L5 严管 · 隔离环境与严格审计V2 已复核条款/合规执行命令安装依赖联网读写文件Dual-pass Audit
管控等级描述 skill 的能力与建议配套的管控措施，不代表质量或安全认证，也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同，请勿假定宿主一定会提供安全兜底。第三方 skill 版权归原作者，使用风险由使用者自行承担。
1实现原理 · 为什么它能做到
技能包不自带 Stitch 客户端，而是在运行时用宿主的 list_tools 动态发现 MCP 前缀，再以 [prefix]:工具名 调用——因此同一份指令能适配不同宿主。
plugins/stitch-build/skills/react-components/SKILL.md
1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.
仓库内没有任何 `mcp__stitch__` 字面量，前缀是占位符；这正是它跨 Claude Code / Codex / Gemini CLI 移植的方式。
设计稿由 MCP 返回签名 URL 后，强制用随包 curl 脚本下载，而不是用模型内置抓取——为了绕开 Google Cloud Storage 域上的抓取失败。
plugins/stitch-build/skills/react-components/SKILL.md
4. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains. You MUST use the provided script.
紧随其后给出 HTML 与截图两条 fetch-stitch.sh 命令（截图 URL 追加 =w{width}）。脚本本体是极简 curl 包装，不读凭证。
下载到的 HTML 里的 tailwind.config 被抽成设计 token 并**覆盖写回技能自带的** resources/style-guide.json，使该文件成为本轮组件的唯一配色来源。
plugins/stitch-build/skills/react-components/SKILL.md
2. **Sync `resources/style-guide.json`**: Overwrite the file with the extracted tokens from THIS project. The style guide MUST match the Stitch project being converted.
这是 Phase 2 的 GATE：沿用上一项目的旧 token 被视为失败——用『覆盖写』把 token 漂移变成可检测的硬错误。
生成结果用 AST 校验而不是正则：必须有以 Props 结尾的接口，且 className 中不得出现硬编码十六进制色值。
plugins/stitch-build/skills/react-components/scripts/validate.js
if (node.type === 'TsInterfaceDeclaration' && node.id.value.endsWith('Props')) hasInterface = true;
同文件定义 HEX_COLOR_REGEX 做配色来源检查；该脚本由 package.json scripts.validate 与 .github/workflows/validate-skills.yml 调起，是可自动执行的验收门。
上传刻意绕开 MCP 工具：base64 会把模型输出 token 撑爆，于是改由 Python 脚本在进程内编码后直接 HTTP POST 到 Stitch REST。
plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py
a 53KB PNG becomes ~71K chars of base64). The output gets truncated
注释明说 This script bypasses the model entirely；MIME 白名单限定 png/jpg/jpeg/webp/html/htm/md，超出即拒。
code-to-design 是纯编排型 skill：自身不做转换，只按序把活派给三个兄弟技能。
plugins/stitch-design/skills/code-to-design/SKILL.md
This skill orchestrates three other skills in sequence:
列出 extract-static-html → extract-design-md → upload-to-stitch；这解释了整包为何按『设计 / 构建 / 工具』三插件切分。
stitch-loop 用 .stitch/next-prompt.md 作接力棒文件实现无人值守的多页站点循环，且每轮必须更新接力棒。
plugins/stitch-utilities/skills/stitch-loop/SKILL.md
1. Reads the current task from a baton file (`.stitch/next-prompt.md`)
同文件另有硬约束 `You MUST update `.stitch/next-prompt.md` before completing.`——用文件状态替代会话记忆，使循环可在新会话续跑。
静态 HTML 抽取的主力是一个 Puppeteer 脚本：起 headless Chrome 抓渲染后的 DOM，再把 CSS 与图片内联成单文件。
plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts
* snapshot.ts — Production-grade Puppeteer-based full-page HTML snapshot
该脚本约 1470 行；puppeteer 未写进任何 package.json，靠 `npx tsx` 解析依赖——即依赖由 npx 在运行时解析，而非锁文件。
设计系统的单一事实源是 DESIGN.md：上传后由项目级持有 token，因此生成提示被要求不要再写颜色与字体。
plugins/stitch-design/skills/manage-design-system/SKILL.md
After generating `.stitch/DESIGN.md`, make sure to also create or update the
同文件随后要求先获用户确认再上传，并调用 create_design_system_from_design_md——把设计系统写进 Stitch 项目而非只留在本地。
2核心能力
01由文本或图片生成 / 编辑 Stitch 屏幕并产出设计变体
02把已有前端代码迁移进 Stitch（抽静态 HTML + 抽设计系统 + 上传）
03把 Stitch 设计稿转成 React/Vite 组件，并做 AST 校验与 token 一致性检查
04把 Stitch HTML 转成 React Native 组件与 StyleSheet 主题
05从 Stitch 项目生成 Remotion 走查视频
06抽取或合成 DESIGN.md 设计系统并作为后续提示的事实源
07把运行中的 web 应用抓成自包含静态 HTML（内联 CSS、图片、canvas、iframe）
08把模糊 UI 想法改写成 Stitch 优化提示词
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| api | Stitch API 默认 base URL |
| api | BatchCreateScreens 端点 |
| cli | curl 下载 MCP 返回的签名资产 |
| network | 远程 Stitch MCP（URL 由用户填） |
| cli | npx tsx 运行 TypeScript 脚本 |
| cli | python3 运行上传脚本 |
| package | puppeteer（未在任何 package.json 声明，由 npx tsx 运行时解析） |
| package | @swc/core（已声明依赖，用于 AST 解析） |
| cli | npx shadcn CLI 拉取组件源码 |
| package | @google/design.md linter |
| cli | npm 安装 Remotion 依赖 |
| cli | npx remotion render 出片 |
4管控建议与判定依据
建议配套管控措施
面向 Agent
隔离环境，逐次授权
面向管理者
严格授权、全量审计、合规确认
判定依据（文件路径与关键语句摘要）
- SKILL.md: 触及合规与平台服务条款严格管控面
- scripts/: 执行本地脚本或命令: `bash scripts/fetch-stitch.sh` 下载 HTML/截图（指令点：react-components/SKILL.md 与 r
- scripts/ 或 SKILL.md: 声明动态安装外部语言包依赖
- 网络端点: 声明外部网络访问: curl 拉取 MCP 返回的签名 URL（域名属 Google Cloud Storage）：fetch-stitch.sh 的 curl 行；re
- 本地工作目录: 文件读写与工件输出: 写 .stitch/designs/{page}.html 与 .png（fetch-stitch.sh 的两条命令）。
审计说明： 🔴 红色：严格管控。本 skill 同时命中两条红线且都有源码证据：①任意代码执行面——extract-static-html 的 snapshot.ts 通过 `const authModule = await import(authPath);` 执行由 `--auth-script` 指定的任意本地 JS/TS 模块，参数由 agent 填写、没有任何路径或内容校验；同一技能还以 `npx tsx` 运行随包 TS 脚本（puppeteer 依赖甚至未写进任何 package.json，由 npx 在运行时解析）。②凭证读取与明文外传——upload-to-stitch/SKILL.md 指示 agent 去 ~/.claude.json、~/.gemini/settings.json、.gemini/antigravity/mcp_config.json 等宿主 MCP 配置里抠出 Google API key，然后以 `--api-key <API_KEY>` 明文命令行参数传给子进程，密钥会出现在进程参数与可能的命令日志中。之所以仍要强调『这不是恶意软件』：本包来自 Google Labs，护栏密度高于同类（下载/上传/起服务前强制用户确认、上传 MIME 白名单、AST 校验、CI 验收、Apache-2.0、无 hooks、无 postinstall），两条红线都是能力设计使然；但用户在使用前应明确知晓上面两件事，尤其是密钥的命令行暴露与任意模块执行入口。
5第二遍独立确认
- [ok] skill.path 的选取 — 重读 .agents/plugins/marketplace.json 与三个 plugin.json：仓库根与 plugins/ 直属层都没有 SKILL.md 或 manifest，故条目只能落在插件级或插件内的具体技能上。根 README 与 marketplace 都把它当『库』对待（displayName=Stitch Skills、三条 source.path），而 brief 要求 official_desc 取 SKILL.md frontmatter 原文——plugins/stitch-design 本身没有 SKILL.md，故选其中承载设计主流程的入口技能目录 plugins/stitch-design/skills/generate-design（name: stitch::generate-design，frontmatter 有完整 description）。
- [ok] official_desc 逐字与折行 — 重读 generate-design/SKILL.md L1-9：description 用 YAML 折叠符 `>-`，跨 5 行；已按折叠后单行逐字收录，未改动用词。另注意 plugins/stitch-design/plugin.json 的插件级 description 与 .codex-plugin/plugin.json 的文案不同（前者用破折号、后者更短），属两处清单不一致，非本 skill 的 description。
- [ok] external_deps：Stitch REST 端点与请求头 — 重读 upload_to_stitch.py：默认 base 为 https://stitch.googleapis.com，URL 拼接为 `{api_url}/v1/projects/{project_id}/screens:batchCreate`，请求头 `X-Goog-Api-Key` 与 `--api-key required=True` 均在位；三处行号与首遍一致。
- [ok] external_deps：curl 调用点与两处重复脚本 — 对 plugins 全量二次检索 curl：react-components 与 react-native 的 fetch-stitch.sh 是同一语句的两个副本，remotion 的 download-stitch-asset.sh 额外做 mkdir -p 与失败 rm -f。三处均为极简包装，不读凭证。
- [ok] security.credential_reads 的三条配置路径 — 重读 upload-to-stitch/SKILL.md 的『Get the API Key』段：Antigravity / Gemini CLI / Claude Code 三条配置路径、X-Goog-Api-Key 取值说明、找不到时必须向用户索要的强约束，以及脚本调用处的 `--api-key <API_KEY>`，逐字与首遍一致。
- [ok] security：任意模块执行分支 — 重读 snapshot.ts 的 auth-script 分支：打印 Running authentication script from 后 `path.resolve(process.cwd(), opts.authScript)` 再 `await import(authPath)`，若导出为函数则以 page 调用。确认这是无校验的本地模块执行入口，参数由调用方（agent）填入。
- [ok] security：SSL 处理是否属安全降级 — 重读 upload_to_stitch.py 的 ssl 相关行与 SKILL.md 的 Troubleshooting 段：脚本用 certifi 提供的 CA 建默认上下文，SKILL.md 建议通过 SSL_CERT_FILE 指定 CA——是修正缺失根证书，不是 disable verification；故未把它计入降级行为。
- [ok] security.file_writes 的路径清单 — 重读 react-components/SKILL.md 与 stitch-loop/SKILL.md 的写入段：.stitch/designs、.stitch/metadata.json、resources/style-guide.json 覆盖写、site/public 迁移、.stitch/next-prompt.md 强制更新均有原文；另补 post_process.ts 与 snapshot.ts 的脚本级写入。写入目标全部位于当前项目或技能自身目录。
6结论
适合： 适合已经在用 Google Stitch（或准备接入其 MCP）的产品/前端团队，尤其是想打通『设计稿 ↔ 代码』双向流程的工作流：把现有前端迁进 Stitch、把 Stitch 设计稿转成 React/RN 组件并保持 token 一致、从项目生成走查视频、以及用接力棒文件跑多页站点循环。也适合研究『如何把外部 SaaS 的 MCP 能力包成一套渐进式披露 skill』的作者参考其插件切分与 GATE 设计。
不适合： 不适合对密钥暴露敏感或不允许在命令行出现凭证的环境（--api-key 明文传参）。不适合禁止执行非受信脚本的受限环境（--auth-script 的任意模块 import 与 npx tsx 运行时依赖解析都不受锁文件约束）。不适合没有 Stitch MCP 的用户：全部生成能力都是硬前置，缺 MCP 时这些 skill 只剩文档价值。也不适合期望纯本地、零第三方 CLI 的场合（curl、python3、npx、npm、shadcn、remotion 都在执行链上）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload stitch-skills.tar.gz
sha256:
Option B · Copy Guide for Agent88df56fdbec37bb5…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0337446dad.