Design & Motion · 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 Restricted · Isolated sandbox & strict auditV2 Human-AuditedTerms / ComplianceExecute CommandInstall DepsNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
The skill package does not include a Stitch client; instead, it dynamically discovers the MCP prefix at runtime using the host's list_tools and invokes tools via [prefix]:tool_name—allowing the same instruction set to adapt across different hosts.
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.
There is no literal `mcp__stitch__` anywhere in the repository, as the prefix is a placeholder; this is precisely how it is ported across Claude Code / Codex / Gemini CLI.
Once the MCP returns signed URLs for design assets, downloading is forced via a bundled curl script rather than using the model's built-in fetch—in order to bypass fetch failures on the Google Cloud Storage domain.
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.
Two fetch-stitch.sh commands are immediately provided for HTML and screenshots (the screenshot URL appends =w{width}). The script itself is a minimal curl wrapper that does not read credentials.
The tailwind.config extracted from the downloaded HTML is turned into design tokens and **overwritten back into the skill's bundled** resources/style-guide.json, making this file the single color palette source of truth for this component generation run.
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.
This is Phase 2's GATE: reusing old tokens from a previous project is treated as a failure—turning token drift into a detectable hard error via an 'overwrite'.
Generated results are validated using AST parsing rather than regex: an interface ending with Props is strictly required, and no hardcoded hex color values are permitted inside className.
plugins/stitch-build/skills/react-components/scripts/validate.js
if (node.type === 'TsInterfaceDeclaration' && node.id.value.endsWith('Props')) hasInterface = true;
The same file defines HEX_COLOR_REGEX to verify color sourcing; this script is triggered by package.json scripts.validate and .github/workflows/validate-skills.yml, serving as an automated acceptance gate.
Uploading deliberately bypasses MCP tools: base64 encoding would exhaust the model's output tokens, so a Python script encodes assets in-process and performs a direct HTTP POST to the Stitch REST API.
plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py
a 53KB PNG becomes ~71K chars of base64). The output gets truncated
The comments explicitly state 'This script bypasses the model entirely'; the MIME whitelist is restricted to png/jpg/jpeg/webp/html/htm/md, rejecting anything outside.
code-to-design is a pure orchestration skill: it performs no conversions itself, solely dispatching tasks sequentially to three sibling skills.
plugins/stitch-design/skills/code-to-design/SKILL.md
This skill orchestrates three other skills in sequence:
It lists extract-static-html → extract-design-md → upload-to-stitch; this explains why the entire package is partitioned into the three plugins: 'design / build / tools'.
stitch-loop uses .stitch/next-prompt.md as a baton file to achieve an unattended multi-page site loop, strictly requiring the baton to be updated in every iteration.
plugins/stitch-utilities/skills/stitch-loop/SKILL.md
1. Reads the current task from a baton file (`.stitch/next-prompt.md`)
The same file enforces a hard constraint: `You MUST update `.stitch/next-prompt.md` before completing.`—replacing session memory with file state so the loop can resume across new sessions.
Static HTML extraction is primarily driven by a Puppeteer script: it launches headless Chrome to capture the rendered DOM and inlines CSS and images into a single self-contained file.
plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts
* snapshot.ts — Production-grade Puppeteer-based full-page HTML snapshot
The script is approximately 1,470 lines long; puppeteer is not listed in any package.json, relying on `npx tsx` for dependency resolution at runtime rather than via a lockfile.
The single source of truth for the design system is DESIGN.md: once uploaded, tokens are maintained at the project level, so generation prompts are instructed not to hardcode colors or fonts.
plugins/stitch-design/skills/manage-design-system/SKILL.md
After generating `.stitch/DESIGN.md`, make sure to also create or update the
The same file subsequently requires user confirmation before uploading and invokes create_design_system_from_design_md—writing the design system into the Stitch project rather than keeping it solely local.
2Core Capabilities
01Generate or edit Stitch screens from text or images and produce design variants
02Migrate existing frontend code into Stitch (extract static HTML + extract design system + upload)
03Convert Stitch designs into React/Vite components with AST validation and token consistency checks
04Convert Stitch HTML into React Native components and StyleSheet themes
05Generate Remotion walkthrough videos from Stitch projects
06Extract or synthesize DESIGN.md design systems to serve as the ground truth for subsequent prompts
07Capture running web applications into self-contained static HTML (inlining CSS, images, canvas, and iframes)
08Refine vague UI concepts into Stitch-optimized prompts
3External Dependencies
| 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 出片 |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Isolated environment, per-use explicit authorization
For Administrators
Strict authorization, full audit, compliance signoff
Evidence & Triggers (File Paths & Excerpts)
- SKILL.md: Touches areas strictly regulated by compliance and platform Terms of Service
- scripts/: Executes local scripts or commands: `bash scripts/fetch-stitch.sh` to download HTML/screenshots (instruction locations: react-components/SKILL.md and r
- scripts/ 或 SKILL.md: Declares dynamic installation of external language package dependencies
- 网络端点: Declares external network access: curl fetches signed URLs returned by MCP (domain belongs to Google Cloud Storage): the curl command in fetch-stitch.sh; re
- 本地工作目录: File read/write and artifact output: writes .stitch/designs/{page}.html and .png (two commands in fetch-stitch.sh).
Audit Notes: 🔴 Red: Strictly Controlled. This skill simultaneously triggers two red lines supported by source code evidence: ① Arbitrary code execution surface—extract-static-html's snapshot.ts executes arbitrary local JS/TS modules specified via `--auth-script` using `const authModule = await import(authPath);`, with arguments supplied by the agent without any path or content validation; the same skill also executes bundled TS scripts via `npx tsx` (the puppeteer dependency is not even listed in any package.json and is resolved by npx at runtime). ② Credential extraction and plaintext exfiltration—upload-to-stitch/SKILL.md instructs the agent to extract Google API keys from host MCP configuration files such as ~/.claude.json, ~/.gemini/settings.json, and .gemini/antigravity/mcp_config.json, subsequently passing them to child processes as plaintext command-line arguments via `--api-key <API_KEY>`, exposing the secret in process argument lists and potential command logs. To clarify, 'this is not malware': this package originates from Google Labs and features higher guardrail density than peers (mandatory user confirmation before download/upload/service startup, upload MIME whitelist, AST validation, CI acceptance, Apache-2.0, no hooks, no postinstall), with both red lines arising from intentional capability designs; however, users must be explicitly aware of both aspects before use, particularly command-line secret exposure and the arbitrary module execution entry point.
5Second-Pass Verification
- [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 的脚本级写入。写入目标全部位于当前项目或技能自身目录。
6Verdict & Scenarios
Best for: Ideal for product and frontend teams already using Google Stitch (or preparing to integrate its MCP), especially for workflows seeking a bidirectional bridge between 'design ↔ code': migrating existing frontends into Stitch, converting Stitch designs to React/RN components while preserving token consistency, generating walkthrough videos from projects, and running multi-page site loops via baton files. Also suitable for authors researching how to package external SaaS MCP capabilities into a suite of progressive-disclosure skills, serving as a reference for plugin slicing and GATE design.
Not for: Not suitable for environments sensitive to secret exposure or where credentials must not appear in the command line (--api-key passed as plaintext arguments). Not suitable for restricted environments that prohibit executing untrusted scripts (--auth-script arbitrary module import and npx tsx runtime dependency resolution are not bound by a lockfile). Not suitable for users without Stitch MCP: all generation capabilities strictly depend on it, reducing these skills to documentation-only value in its absence. Also unsuitable for pure-local, zero-third-party-CLI scenarios (curl, python3, npx, npm, shadcn, and remotion are all in the execution chain).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload stitch-skills.tar.gz
sha256:
Option B · Copy Guide for Agent88df56fdbec37bb5…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0337446dad.