使用说明
针线包
你的编码代理编写了不错的代码，设计了糟糕的UI。缝合套件固定了后半部分——它将试剂连接到 谷歌缝合线 （文本提示→ 真正漂亮的屏幕），并教他们正确驾驶。
我创建这个是因为我厌倦了看着Claude Code生成看起来像2004年政府表单的UI。灰色盒子，蓝色按钮，毫无味道。与此同时，Stitch从文本中生成像素完美的屏幕，但它是一个原始的MCP工具，没有编码代理知道如何很好地使用它。
所以我教他们。
这四件都是从针线包里拿出来的。不同的内裤，真正不同的结果——不是一个色调旋转的模板。
| Ops console · monospace, dense tables, industrial light | Compliance SaaS · serif on warm cream, generous whitespace |
| Astrology app · midnight and gold, serif + CJK type | Mobile capture · dark UI over live camera, orange framing |
生成设计需要Google Stitch。 登录地址： stitch.withgoogle.com 使用任何Google帐户，然后从获取API密钥 设置.截至2026年7月：没有候补名单，没有邀请，免费使用-但有每月的发电限制，谷歌已经表示了付费等级，因此将津贴视为慷慨但有限的。在依赖任何这些之前，请先查看Stitch自己的网站；改变的是他们的定价，而不是我的。
转换为代码不会。 框架转换技能就像Stitch屏幕一样愉快地使用本地HTML文件或URL。如果你已经有了标记，只想去掉生产组件，那么你根本不需要谷歌帐户。
安装
npx @booplex/stitch-kit
检测您安装的每个受支持的客户端——Claude Code、Codex CLI、OpenCode、Crush、Cursor、VS Code、Gemini CLI——并连接每个客户端支持的任何内容。看 适用于 这对每个客户意味着什么。
然后，在Claude Code中添加以下技能：
/plugin marketplace add https://github.com/gabelul/stitch-kit.git
/plugin install stitch-kit@stitch-kit
两个步骤，而不是一个——npx安装程序处理代理和MCP接线，插件增加了36项技能。代理在没有它们的情况下工作，但技能是使输出良好的关键。
npx @booplex/stitch-kit update # update to latest
npx @booplex/stitch-kit status # check what's installed
Claude Code — manual steps
# 1. Add Stitch MCP (remote HTTP server — needs API key from stitch.withgoogle.com/settings)
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
--header "X-Goog-Api-Key: YOUR-API-KEY" -s user
# 2. Install the plugin (inside Claude Code)
/plugin marketplace add https://github.com/gabelul/stitch-kit.git
/plugin install stitch-kit@stitch-kit
Codex CLI — manual steps
git clone https://github.com/gabelul/stitch-kit.git
cd stitch-kit && bash install-codex.sh
然后将缝合MCP添加到 ~/.codex/config.toml:
[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"
[mcp_servers.stitch.headers]
X-Goog-Api-Key = "YOUR-API-KEY"
获取API密钥： stitch.withgoogle.com/settings.
使用 $stitch-kit 激活代理或 $stitch-orchestrator 对于整个管道。
压实回弹性（可选）： 为了使您的项目、屏幕和PRD草稿在上下文压缩中保持一致，缝合套件需要 stitch-session PATH上的助手-- npm i -g @booplex/stitch-kit 提供它，以及 install-codex.sh 符号链接它。要在压缩后自动重新定位，请将缝合套件安装为Codex插件(codex plugin add)相信它的钩子。细节： docs/抗压强度.md.
适用于
安装程序会检测您所拥有的内容，并连接客户端支持的任何内容。并非每个代理人都需要技能，所以这里是诚实的细分，而不是一堵标志墙：
| 客户 | 缝合MCP | 代理 | 技能 |
|---|---|---|---|
| 克劳德代码 | ✅ | ✅ | ✅ 通过插件 |
| Codex CLI | ✅ | ✅ | ✅ |
| OpenCode | ✅ | ✅ | ✅ |
| 粉碎 | ✅ | — | ✅ |
| 光标 | ✅ | — | — |
| VS代码 | ✅ | — | — |
| Gemini CLI | 通过扩展 | -- | -- |
技能 是结构化的工作流程——构思、快速工程、ID安全的MCP包装器、框架转换。 代理人 是知道完整工具集的Stitch感知角色。 仅限MCP 这意味着你可以将Stitch连接到客户端，并手动驱动它，但没有设计智能——这是最重要的，所以前三个是它真正发光的地方。
Gemini CLI通过其自己的扩展系统而不是配置文件来处理MCP，因此安装程序会向您指出 gemini extensions list 而不是为你编写配置。
检查你有什么 npx @booplex/stitch-kit status.
当你使用它时，实际会发生什么
如果没有缝合工具包，你的代理会向stitch发送一个半生不熟的提示，对ID格式感到困惑，生成一个屏幕，递给你原始HTML，然后结束一天的工作。带缝合套件：
-
三思而后行 —
stitch-ideate做一些你的编码代理实际上做不到的事情：设计研究。它获取趋势，分析竞争对手的UI，并提出3个不同的设计方向，包括真正的十六进制颜色、排版配对和情绪描述。这是你的经纪人失踪的设计伙伴。 -
生成智能 --编排器检测您的请求是需要构思还是可以直接生成（有一个特定的评分系统——十六进制颜色和布局细节跳过构思，模糊的请求会触发它）。它设计了一个结构化的提示，将整个PRD发送给Stitch，并在一次调用中批量生成多达10个屏幕。如果有更多，它会自动继续。
-
迭代而不重新开始 --使用文本提示编辑屏幕，生成设计变体，在多个屏幕上应用设计系统以实现视觉一致性。代理知道要使用哪个Stitch工具（更重要的是，每个人都期望使用哪种ID格式——因为显然谷歌无法选择一种）。
-
船舶真实代码 --转换为具有暗模式、TypeScript、设计令牌和ARIA的生产组件。不是“这里有一些JSX，弄清楚”——适当的服务器/客户端组件拆分、主题集成、可访问性。
运送到任何框架
适用于任何HTML，而不仅仅是Stitch输出。 每种转换技能都需要一个Stitch屏幕、一个本地HTML文件或一个URL——将其指向您购买的模板、您已经构建的页面或其他工具生成的内容。只有“缝合”路由需要API密钥。
每个目标都会获得黑暗模式和设计令牌。其余的取决于你在哪里发货：网络目标上的TypeScript和ARIA，SwiftUI上的Swift和原生可访问性API，HTML目标上没有构建步骤的纯语义HTML。
选择你的目标：
| 目标 | 技能 | 你得到了什么 |
|---|---|---|
| Next.js 15应用路由器 | stitch-nextjs-components |
服务器/客户端拆分， next-themes，TypeScript严格 |
| Svelte 5/SvelteKit | stitch-svelte-components |
Runes API、作用域CSS、内置转换 |
| Vite+反应 | stitch-react-components |
useTheme() 挂钩，顺风，无应用路由器开销 |
| HTML5+CSS | stitch-html-components |
无需构建步骤——PWA、WebView、电容器就绪 |
| shadcn/ui | stitch-shadcn-ui |
基元，标记与缝合调色板对齐 |
| React Native/Expo | stitch-react-native-components |
iOS+安卓， useColorScheme，安全区域 |
| SwiftUI | stitch-swiftui-components |
iOS 16+， @Environment(\.colorScheme)44磅目标 |
建筑学
五层，36种技能。每一层的存在都是因为代理在Stitch的特定任务上失败了，而且失败的程度足够不同，以至于一种技能无法覆盖它们。
ID格式的东西值得一提。 generate_screen_from_text 想要 "3780309359108792857". list_screens 想要 "projects/3780309359108792857".传递错误的一个，你会得到一个神秘的错误。这是代理使用原始Stitch MCP失败的第一个原因，也是为什么每个API工具都有专门的包装技能，而不是让代理直接调用API。
技能解剖学
skills/[skill-name]/
├── SKILL.md — what it does, when to use it, step-by-step workflow
├── examples/ — real examples so the agent copies patterns instead of guessing
├── references/ — design contracts, checklists (loaded only when needed)
└── scripts/ — fetch helpers, validators, code generators
示例文件夹是秘密武器。当代理有真实的模式可以复制，而不是从训练数据中产生幻觉时，它们会产生更好的输出。（在看到Claude连续15次生成相同的坏Tailwind配置后，我很难理解这一点。）
与官方谷歌缝合技能
谷歌的 官方回购 在三个插件中提供15种技能-- stitch-design, stitch-build, stitch-utilities（2026年7月检查；它们进展很快，因此在将此比较视为最新比较之前请先进行验证。）这是一个真正的工具包，而不是存根，它完成了缝合工具包所没有的一件事（见下面的空白）。
原始技能数并不是一个公平的比较：谷歌将生成/编辑/变体合并为一种技能，将四种设计系统操作合并为另一种技能。不同的粒度，而不是更多的能力。以下是两者覆盖相同领域的地方：
| 官方 | 针线包 | 有什么不同 |
|---|---|---|
design-md |
stitch-design-md |
添加第6节——设计系统注释，这些注释反馈到Stitch提示中，以实现一致的多屏幕输出 |
enhance-prompt |
stitch-ui-prompt-architect |
两种模式：（A）模糊→ 增强，与官方相同；（B）设计规范→ 结构化的 [Context][Layout][Components] 提示。模式B产生了明显更好的结果。 |
stitch-loop |
stitch-loop |
视觉验证步骤，显式MCP命名，DESIGN.md集成 |
stitch::react-components |
stitch-react-components |
还接受本地HTML文件或URL，而不仅仅是Stitch屏幕 |
stitch::react-native |
stitch-react-native-components |
还接受本地HTML文件或URL；他们为现有的本机组件添加了重新同步路径 |
stitch::generate-design |
stitch-mcp-generate-screen-from-text + -edit-screens + -generate-variants |
每个MCP工具分为一项技能，每项技能都强制使用正确的ID格式 |
stitch::manage-design-system |
stitch-mcp-create/update/list/apply-design-system |
按操作方法划分相同 |
remotion |
stitch-remotion |
常见模式（幻灯片、功能亮点、用户流）、画外音、动态文本 |
shadcn-ui |
stitch-shadcn-ui |
初始化样式支持、自定义注册表、验证清单 |
缝合套件增加了什么：
stitch-ideate--对话式设计代理，研究趋势、提出方向、生成PRD并批量生成所有屏幕。没有等效物。stitch-orchestrator--具有智能构思路由的端到端协调器。没有等效物。stitch-ui-design-spec-generator--在提示之前使用结构化规范，这击败了纯粹的提示增强。没有等效物。stitch-swiftui-components--SwiftUI根本不是官方回购的目标。stitch-design-system--令牌提取→ 带有暗模式的CSS自定义属性。他们的manage-design-system处理缝合侧设计系统；这个为你的代码库发出CSS。stitch-a11y--一个专门的WCAG 2.1 AA审核和修复通行证。它们涵盖了作为个人转换技能指导的可访问性，但没有审核技能。stitch-animate--在组件中实现运动。他们的taste-design在DESIGN.md中指定运动原理；这将编写实际的动画代码prefers-reduced-motion处理。stitch-skill-creator--扩展插件的元技能。没有等效物。- 每种转换技能都需要一个本地HTML文件或URL，因此其中一半可以在没有Stitch帐户的情况下使用。
谷歌有什么针线包没有 --在你选择之前值得知道：
stitch::upload-to-stitch--将屏幕截图或模型上传到Stitch项目中。针线包上有个包装(upload_screens_from_images)，但谷歌从实时MCP API中删除了该工具——API侧没有留下图像部署路径，因此包装器技能也消失了。改为从文本提示重新创建设计，或者如果您已经有标记，则使用转换技能的本地文件路由之一。stitch::code-to-design--拉一个 现有的 通过链接下面的两个技能，将web应用程序导入Stitch。针线包只做设计→ code;这就是代码→ 设计。stitch::extract-static-html--从正在运行的应用程序中提取自包含的静态HTML、内联资产stitch::extract-design-md--从前端生成DESIGN.md 源代码.sitch kit的版本读取的是stitch项目，因此输出相同，输入不同。taste-design--更严格的反通用DESIGN.md变体（校准颜色、不对称布局、故意运动）react-vite-dashboard--Vite仪表板生成器，Web3/DeFi风格
如果您的工作流程从您已经构建的应用程序开始，并且您想要它 在 Stitch，使用官方仓库——这是缝合套件无法覆盖的方向。
完整技能参考
所有36项技能，包括描述、层次和ID格式表→ docs/skills-index.md
MCP API模式（用于15个Stitch工具的JSON模式，全部包装）→ docs/mcp模式/
先决条件
- 缝合MCP-- 安装指南 （需要Google帐户+API密钥）
- 用于web框架转换的Node.js
- Xcode 15+用于SwiftUI，Expo CLI用于React Native
相关
其他关注质量的代理工具：
- 污水清除器 --AI文本更人性化。100多种模式，两次通过审核，三级评分。使人工智能生成的散文、代码注释和学术写作听起来更人性化。
- 像素列表 --设计质量扫描仪。在Playwright中打开真实页面，测量实际像素，捕捉视觉AI斜率。视觉上与slopbuster相对应。
- 像素驯服器 --AI编码代理的图像生成技能。两个后端（OpenAI API或codex CLI登录到ChatGPT订阅），三种模式（生成、编辑、撰写多达16个引用），提示gpt-image-2原则和六个生产配方。
- 克劳德代码技能激活器 --克劳德代码的技能自动检测。AI只提取一次关键字，然后快速离线匹配会在您键入时提示技能。
由Gabi建造@ Booplex.com --因为看着AI代理在有漂亮工具的情况下产生丑陋的UI让我抓狂。Apache 2.0。