Stitch MCP工具集完整指南list_projects等14个核心工具速查【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skillsstitch-skills是一套为 Google Stitch 打造的 Agent Skills 技能库让 Claude Code、Gemini CLI、Cursor 等编程 Agent 能够通过Stitch MCP服务器生成、编辑和管理 UI 设计。本文带你速查list_projects、generate_screen_from_text等 14 个 Stitch MCP 核心工具的用途、关键参数与调用场景帮你快速上手这套设计工具集。为什么你需要了解 Stitch MCP 工具集stitch-skills 的每个技能Skill本质上都是任务手册指导 AI Agent 按正确顺序调用 Stitch MCP 工具。理解这些工具你就看懂了整个项目的工作流工具一句话用途关键参数出处技能list_projects列出你的 Stitch 项目拿到projectIdfilter: viewowneddesign-mdcreate_project创建新项目项目标题stitch-loopget_project获取项目详情screenInstances、designTheme项目nameprojects/{id}manage-design-systemlist_screens列出项目内的所有屏幕纯数字projectIdremotionget_screen获取屏幕的 HTML、截图下载链接与尺寸projectIdscreenIdreact-componentsgenerate_screen_from_text 用文本提示词生成新屏幕prompt、deviceTypegenerate-designedit_screens按提示词修改已有屏幕selectedScreenIdspromptgenerate-designgenerate_variants一次生成 1–5 个设计变体variantOptions数量/创意范围/维度generate-designlist_design_systems查项目的设计系统返回assets/{assetId}projectIdmanage-design-systemcreate_design_system基础创建设计系统designSystem主题对象tool-schemaupdate_design_system设置/更新主题字体、颜色、圆角theme必填colorMode、roundness等tool-schemacreate_design_system_from_design_md从上传的 DESIGN.md 一键建设计系统selectedScreenInstancetool-schemaapply_design_system把设计系统批量应用到多个屏幕assetId 屏幕实例列表manage-design-systemupload_design_md直接上传小型 DESIGN.mdbase64designMdBase64约 5KB 以内manage-design-system项目与屏幕一切调用链的起点几乎所有工作流都从list_projects开始——先找到projectId再逐层深入list_projects → list_screens → get_screen → 下载 HTML / 截图list_projects技能中反复出现的第一步可用filter: viewowned只查自己拥有的项目。get_screen返回的 JSON 包含htmlCode.downloadUrl、screenshot.downloadUrl、width/height和deviceType是 Stitch API 参考 里定义的核心数据结构。generate_screen_from_text生成屏幕前generate-design 技能 会先把模糊的口语提示词增强成专业 UI 描述参考 examples/enhanced-prompt.md。generate_variants的三个创意档位值得记住REFINE微调、EXPLORE均衡、REIMAGINE彻底重构可指定只变LAYOUT或COLOR_SCHEME。设计系统让 10 个页面长得像同一个产品设计系统工具是 stitch-skills 的重头戏典型调用链为上传 DESIGN.md—— 大文件推荐用 upload_to_stitch.py 脚本脚本内做 base64 编码绕开模型的输出 token 限制小文件可直接用upload_design_md工具create_design_system_from_design_md—— 从 DESIGN.md 的 YAML 头自动填充全部主题 tokenapply_design_system—— 批量应用到屏幕注意selectedScreenInstances里只能放id和sourceScreen两个字段多了会报 invalid argument。完整的designSystem主题对象 schema字体枚举、颜色变体、圆角档位见 reference/tool-schema.md。实战视角技能是如何编排这些工具的design-md 技能先用list_tools发现 Stitch 前缀再按list_projects → list_screens → get_screen → get_project逐级拉取元数据最终合成一份语义化 DESIGN.md。stitch-loop 技能create_project → get_project建库并持久化 ID 到.stitch/metadata.json每轮生成页面后再次get_project更新屏幕映射——这就是接力棒自动建站循环的底座。remotion 技能list_projects → list_screens → get_screen三连为每个屏幕截取素材后生成走查视频。最快上手方法3 步安装 stitch-skills⚠️ 前提所有技能都依赖Stitch MCP 服务器需先在 Agent 环境中完成 Stitch MCP 的注册与凭据配置。# 1. 克隆仓库 git clone https://gitcode.com/GitHub_Trending/st/stitch-skills # 2. Claude Code装到当前项目 npx plugins add google-labs-code/stitch-skills --scope project --target claude-code # 3. 或用技能级安装只挑需要的技能 npx skills add google-labs-code/stitch-skills两个插件的定位stitch-design负责设计工作流生成、提取、上传见 plugin.jsonstitch-utilities负责提示词增强与 DESIGN.md 生成见 plugin.json。新手避坑清单❌ 把projects/{id}全路径传给list_screens——它只接受纯数字projectId❌ 在生成提示词里写死颜色、字体——设计系统已在项目级应用 token重复指定会冲突编辑提示词除外❌apply_design_system中混入x/y/width/height字段——请求会直接失败✅ 上传 DESIGN.md 优先走 Python 脚本而非 MCP 工具避开 base64 输出 token 上限。小结list_projects只是入口真正撑起 stitch-skills 的是查询 → 生成 → 设计系统 → 应用这条完整工具链。对照上表速查 14 个工具、结合各技能的 SKILL.md 阅读调用编排你就能让 Agent 在 Stitch 里独立完成从 0 到 1 的 UI 设计甚至批量生成整套多页面网站。注仓库经检索确认不含任何图片文件为遵守行内图片必须是真实存在的图片文件规则本文未插入图片。【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
