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外部依赖
| 类型 | 依赖 |
|---|---|
| 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风险提醒 风险提醒：红色 · 谨慎使用
风险提醒：红色 · 谨慎使用
- 任意本地模块执行入口（--auth-script） — snapshot.ts 会 `await import()` 由参数指定的任意 JS/TS 模块并在 Node 进程执行，路径只做 resolve，无白名单、无沙箱；参数由 agent 填写，一旦指令被误导或参数被注入，等价于在开发者机器上执行任意代码。
- API key 从宿主配置里被读出并以明文命令行传递 — SKILL.md 要求到 ~/.claude.json、~/.gemini/settings.json、.gemini/antigravity/mcp_config.json 等位置抠 X-Goog-Api-Key，再以 `--api-key <API_KEY>` 传给 Python 子进程；密钥因此出现在进程参数里，可能被 ps、shell 历史或 agent 日志留存。
- 外部内容未做数据/指令隔离 — MCP 返回的 Stitch HTML、DESIGN.md，以及抓取的本地页面 DOM，都被原样交给模型解析并据此写代码或改配置；全包没有『页面文本视为数据』的限定，只有动作层的人工确认兜底。
- 依赖解析不锁定 — snapshot.ts 依赖 puppeteer，但该依赖未出现在任何 package.json 中，由 npx tsx 在运行时解析；@google/design.md、shadcn、Remotion 等也走 npx/npm 最新版，版本可漂移。
- 文档与仓库实际不一致 — README 的 utilities 表与结构图漏列 site-md，且宣称每个 skill 都含 scripts/resources/examples 与实测不符；插件级 description 在 plugin.json 与 .codex-plugin/plugin.json 两处文案不同；命名空间 stitch::xxx 非 kebab-case，README 自承在 OpenCode 下需改名。
- 存在未接线资产 — shadcn-ui/scripts/verify-setup.sh 随包发货但 SKILL.md 无调用点，只被 README 目录树提及。
🔴 红色：谨慎使用。按统一分档，本 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 都在执行链上）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 stitch-skills.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent88df56fdbec37bb5…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库google-labs-code / google-labs-code/stitch-skills
原始 GitHubgoogle-labs-code/stitch-skills ↗
Stars8316
最近推送2026-08-17
本 skill commit
0337446dad许可Apache-2.0（仓库根 LICENSE：L1 'Apache License'、L2 'Version 2.0, January 2004'；plugins/*/plugin.json 的 license 字段均为 Apache-2.0）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。