缝合工具包——为AI编码代理设计超能力|谷歌缝合MCP插件
我创建这个是因为我厌倦了看着Claude Code生成看起来像2004年政府表单的UI。灰色盒子，蓝色按钮，毫无味道。与此同时，谷歌 史迪奇 从文本生成真正美丽、像素完美的屏幕——但它只是一个原始的MCP工具，没有编码代理知道如何正确使用它。
所以我教他们。
缝合工具包是35种技能，为AI编码代理提供实际的设计智能。不是“这是一个提示，祝你好运”——真正的构思、视觉研究、产生高质量输出的提示工程、多屏幕批量生成、设计系统、迭代循环和转换为生产框架组件。从“我有一个模糊的想法”到可交付代码的整个流程。
你的代理人从设计盲变成了设计能干。你描述你想要什么（或者只是大声头脑风暴），代理研究趋势，提出3个具有真实调色板和排版的设计方向，生成一个完整的PRD，在Stitch中一次创建多达10个屏幕，迭代直到看起来正确，并转换为Next.js、Svelte、React、React Native、SwiftUI或HTML。
适用于Claude Code、Codex CLI和任何使用MCP的代理。
______________________________________________________________________
安装
快速安装（推荐）
npx @booplex/stitch-kit一个命令。它自动检测您的设置（Claude Code、Codex CLI或两者兼有），安装代理+技能，配置Stitch MCP，并在缺少任何东西时告诉您。
npx @booplex/stitch-kit update # update to latest
npx @booplex/stitch-kit status # check what's installed安装后，在登录 stitch.withgoogle.com 完成谷歌身份验证。
Claude Code插件（可选，添加技能）
NPX安装程序设置代理和MCP。对于完整的技能集（构思、快速工程、设计系统、迭代、转换），也可以在Claude Code中安装插件：
/plugin marketplace add https://github.com/gabelul/stitch-kit.git
/plugin install stitch-kit@stitch-kit该代理与MCP工具独立工作，但技能添加了结构化的工作流程，使输出明显更好。
手动设置（如果您愿意）
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-kitCodex 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 对于整个管道。
______________________________________________________________________
当你使用它时，实际会发生什么
如果没有缝合工具包，你的代理会向stitch发送一个半生不熟的提示，对ID格式感到困惑，生成一个屏幕，递给你原始HTML，然后结束一天的工作。带缝合套件：
- 先想想 —
stitch-ideate做一些你的编码代理实际上做不到的事情：设计研究。它获取趋势，分析竞争对手的UI，并提出3个不同的设计方向，包括真正的十六进制颜色、排版配对和情绪描述。这是你的经纪人失踪的设计伙伴。
- 生成智能 --编排器检测您的请求是需要构思还是可以直接生成（有一个特定的评分系统——十六进制颜色和布局细节跳过构思，模糊的请求会触发它）。它设计了一个结构化的提示，将整个PRD发送给Stitch，并在一次调用中批量生成多达10个屏幕。如果有更多，它会自动继续。
- 迭代而不重新开始 --使用文本提示编辑屏幕，生成设计变体，在多个屏幕上应用设计系统以实现视觉一致性。代理知道要使用哪个Stitch工具（更重要的是，每个人都期望使用哪种ID格式——因为显然谷歌无法选择一种）。
- 船舶真实代码 --转换为具有暗模式、TypeScript、设计令牌和ARIA的生产组件。不是“这里有一些JSX，弄清楚”——适当的服务器/客户端组件拆分、主题集成、可访问性。
还有一个代理定义(agents/stitch-kit.md)对于Claude Code和Codex来说，这是一个具有Stitch意识的代理，它知道全部技能，不会产生MCP工具名称的幻觉（这种情况比你想象的要多）。
______________________________________________________________________
建筑
五层。我并不是为了好玩而构建35种技能——每一层都存在，因为代理在Stitch的特定任务上总是失败。
ID格式的东西值得一提。 generate_screen_from_text 想要 "3780309359108792857". list_screens 想要 "projects/3780309359108792857".传递错误的一个，你会得到一个神秘的错误。这是代理使用原始Stitch MCP失败的第一个原因，也是我构建14个包装器技能而不是让代理直接调用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配置后，我很难理解这一点。）
______________________________________________________________________
与官方谷歌缝合技能
谷歌发布 6技能。它们涵盖了基础知识——增强提示、转换为React、制作视频演练。有用的起点。
针线包有35针。它涵盖了整个流程：与网络研究的对话式思维、多屏幕批处理生成、设计系统管理、迭代循环以及转换为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集成 |
react-components | stitch-react-components | MCP本地检索，可选DESIGN.md对齐 |
remotion | stitch-remotion | 常见模式（幻灯片、功能亮点、用户流）、画外音、动态文本 |
shadcn-ui | stitch-shadcn-ui | 初始化样式支持、自定义注册表、验证清单 |
什么是全新的（在官方回购中不存在）：
stitch-ideate--对话式设计代理，研究趋势、提出方向、生成PRD并批量生成所有屏幕stitch-orchestrator--具有智能构思路由的端到端协调器stitch-mcp-*wrappers-所有14个Stitch API工具都使用ID格式安全包装（仅此一项就节省了数小时的调试时间）stitch-mcp-edit-screens--迭代现有设计，无需从头开始stitch-mcp-generate-variants--具有创造力控制的本地变体生成stitch-mcp-upload-screens-from-images--导入重新设计工作流的屏幕截图stitch-mcp-create/update/list/apply-design-system--完整的缝合设计系统生命周期stitch-ui-design-spec-generator--提示前的结构化规范（比纯提示增强更好的输出）- 移动目标：
stitch-react-native-components+stitch-swiftui-components stitch-design-system--令牌提取→ 带暗模式的CSS自定义属性stitch-a11y--WCAG 2.1 AA审计+自动修复stitch-animate--有目的的运动prefers-reduced-motion处理stitch-skill-creator--扩展插件的元技能
______________________________________________________________________
运送到任何框架
一旦你的设计准备就绪，选择你的目标：
| 目标 | 技能 | 你得到了什么 |
|---|---|---|
| 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磅目标 |
______________________________________________________________________
完整技能参考
所有35项技能，包括描述、层次和ID格式表→ docs/skills-index.md
MCP API模式（适用于所有14个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。