3 个文件、5 个坑：stitch-skills 教程，写出你自己的 Stitch 技能（Agent Skills 与 SKILL.md 上手指南）

3 个文件、5 个坑stitch-skills 教程写出你自己的 Stitch 技能Agent Skills 与 SKILL.md 上手指南【免费下载链接】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 助手把登录页做得更专业一点它却端来一个灰扑扑的默认版——差距往往不在模型而在它还没装上设计技能。stitch-skills 正是这样一个技能库每个技能都遵循 Agent Skills 开放标准核心是一份写给 AI 执行的 SKILL.md。下面先装好一个现成技能看效果再带你从零写出自己的第一个。先跑通安装并触发一个现成技能前置先把 Stitch MCP 接上。MCPModel Context Protocol是 AI 助手调用外部工具的统一通道技能里出现的stitch*:*工具都由 Stitch MCP 服务器承载。没配好它技能装上也只是空有一纸流程。按 Stitch 官方文档完成服务器注册与环境变量配置后再继续。仓库根目录的 marketplace.json 登记了三个插件stitch-design核心设计流、stitch-build设计转代码、stitch-utilities辅助工具各自声明了名称、来源路径与安装策略。想整套安装就按插件路径走只想要单个技能直接运行npx skills add然后交互式挑选即可。需要本地翻源码的话先克隆仓库git clone https://gitcode.com/GitHub_Trending/st/stitch-skills。装好后在对话里输入一句自然语言比如分析 Stitch 项目 projects/123生成一份 DESIGN.md。对应的技能会被自动加载它先调 Stitch MCP 拉取屏幕与主题信息再按内置结构落盘一份 DESIGN.md。 技能没被唤起时十有八九是措辞没命中它的 description。对着该技能的描述改改说法触发率会明显不同。拆开一个技能31 文件体系 一个技能目录里是1 个必需件 3 个可选件的组合以官方的 generate-design 为例skills/generate-design/ ├── SKILL.md # 唯一必需AI 的完整执行流程 ├── references/ │ ├── design-mappings.md # 通俗需求 → 专业 UI 描述的对照表 │ └── prompt-keywords.md # 提示词关键词库 └── examples/ └── enhanced-prompt.md # 提示词增强前后的完整对照各部分对 AI 来说扮演不同角色SKILL.md唯一必需的入口文件AI 加载技能时读的就是它。references/需要随时查的专业资料design-mappings.md 能把做个好看的头部翻译成带毛玻璃效果的粘性导航栏这类 Stitch 听得懂的表达。examples/可直接模仿的成品样本enhanced-prompt.md 给出增强前后的对照写法。scripts/模型自己搞不定的活交给代码如 upload_to_stitch.py 直接走 HTTP 发文件绕开 MCP 的 base64 token 上限。技能之间还能互相委托generate-design 的 SKILL.md 里图片上传这一步就整个交给了 upload-to-stitch 技能去做各管一段。读懂说明书frontmatter 与正文SKILL.md 开头由两行---包住的元信息头frontmatter通俗讲就是决定助手要不要打开这个技能和打开后给多大权限的门面牌。三个字段各司其职name技能标识。部分助手要求 kebab-case全小写、单词间用连字符且与目录名一致官方技能还常用stitch::前缀如stitch::generate-design。descriptionAI 判断当前任务用不用得上它的唯一依据。把做什么 何时该用写足最好带上用户口语里会出现的说法。allowed-tools权限白名单逐条列出允许调用的工具圈得越小越安全。正文则是 AI 逐行执行的动作序列成熟的结构通常分四个模块可对照 design-md 的 SKILL.md 阅读目标一句话说明这个技能最终产出什么。前置先确认哪些条件已就绪MCP 已接通、项目里至少有一个已设计屏幕。步骤编号分步每步写清楚调哪个工具、参数怎么填。贴士踩过的坑与经验值帮 AI 少走弯路。从零写一个完整走查流程拿一个虚构小技能导出现有主题export-theme完整走一遍建目录在plugins/你的插件/skills/export-theme/下开工。写 SKILL.md先落 frontmatter——--- name: export-theme description: 从当前 Stitch 项目导出主题配色与字体为 JSON 文件 allowed-tools: - stitch*:* - Read - Write ---正文再按目标 / 前置 / 步骤 / 贴士四模块补齐例如调list_projects定位项目 → 用get_project取 designTheme → 写入theme.json。按需补辅助件想固定输出格式就在examples/放一份标准主题的 JSON 样例。放进可发现路径并验证把整个文件夹挪到助手会扫描的位置如.claude/skills/或.agents/skills/再用自然语言说导出当前项目的主题——技能被加载且成功产出文件就算跑通了。避坑与分发 发布前先对照下表自查五个高频坑问题对策description 写得抽象技能总触发不了用用户原话补场景词连什么时候不该用一并写明步骤缺少分支条件AI 执行跑偏明确写出分流规则如给了图片 → 走图片流程要求修改 → 走编辑流程参考 stitch-loop 的 SKILL.md上传、覆盖等敏感操作没有确认点在对应步骤写死执行前必须列出文件清单并等待用户确认一个技能又生成又上传又校验保持单一职责复杂环节委托给其他技能用到的工具没写进 allowed-tools把实际调用的每个工具都补进白名单技能定型后装进插件体系分发在 plugin.json 里写清name、description、version、keywords即可整套打包用户一行npx skills add装全套也可挑着装单个。想贡献进上游仓库流程见 CONTRIBUTING.mdFork 仓库 → 建功能分支 → 提交 → 发起 Pull Request且贡献需签署 Google CLA。README 同时推荐了三个高价值的新技能方向校验转换把 Stitch HTML 转成 Vue/Svelte 等其他框架组件并做语法校验。数据解耦把静态设计里的文案、图表数据拆成外部 mock 数据文件。设计生成给定一份数据在 Stitch 中批量生成新的设计界面。技能说到底就是告诉 AI 何时动手、按什么顺序动手的一个文件夹。去仓库里把十几个现成技能再读上三五个挑一个离你日常工作最近的选题今天就能写出第一个属于自己的 Stitch 技能。【免费下载链接】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），仅供参考