企业官网建设流程全解析

如何从零创建 stitch-skills 技能：写给新手的完整教程

【免费下载链接】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 技能总差点意思？本文带你打开 stitch-skills 仓库，照着标杆样板从零开始创建属于自己的 Stitch 技能，全程落到真实文件，看完就能动手。🧵

Agent Skills 标准速览：组件对照表

Agent Skills是一个开放标准：把一项技能打包成一个文件夹，AI 编码助手（Claude Code、Cursor、Gemini CLI 等）遇到相关任务时会自动加载其中的说明并按步执行。stitch-skills 仓库里所有技能都遵循同一套标准结构：

光记住组件名还不够，下面拿仓库里最典型的样本拆开看。

拆解标杆样本：generate-design 的目录形态

选 generate-design：它是核心设计工作流的入口，四个组件占了三个。

plugins/stitch-design/skills/generate-design/ ├── SKILL.md # 主文件：提示词增强流水线 + 四条执行流程 ├── references/ │ ├── design-mappings.md # 模糊词 → 专业 UI 术语的映射表 │ └── prompt-keywords.md # 组件命名、形容词、色彩角色词库 └── examples/ └── enhanced-prompt.md # 提示词增强前后的完整对比

SKILL.md的正文把流程切成"从文本生成、从图片生成、编辑、变体"四条，每步都写明调哪个工具、传什么参数；design-mappings.md与prompt-keywords.md是执行时要翻查的术语知识；enhanced-prompt.md则演示合格输出长什么样。它没有scripts/目录——不需要就不建，目录按需生长。看懂了目录，下一步看主文件内部怎么写。

SKILL.md 逐段讲解：元数据三字段与正文四模块

元数据三字段怎么写

打开任何SKILL.md，开头是 frontmatter 元数据，相当于菜谱卡上"适用菜品"那一栏：

--- name: stitch::generate-design description: >- Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens... allowed-tools: - "stitch*:*" - "Bash" - "Read" - "Write" ---

• name：技能标识。部分助手（如 OpenCode）要求小写短横线格式（kebab-case），且与目录名一致
• description：AI 判断"何时该用这个技能"的唯一依据，像店门口的招牌——要写清做什么 + 何时触发，把用户可能说的原话也写进去
• allowed-tools：工具白名单，像一串钥匙，只开列出的门。对比taste-design只开放了StitchMCP、Read、Write三项，越收敛越安全

正文四模块的组织建议

1. Overview：一句话说清技能目标，参考taste-design的开篇
2. Prerequisites：写明前置条件，如"已配置 Stitch MCP 服务器"
3. Steps：编号步骤，每步指明"调哪个工具、传什么参数"，这是 AI 照单执行的部分
4. Tips / References：踩坑经验收尾，并链到references/与examples/里的知识文件

💡 正文不必贪长：generate-design 把大段术语表拆进references/，主文件只保留"执行时要做的动作"。

结构都清楚了，现在动手。

从零开始：五步搭出并本地验证你的第一个技能

1. 建目录：在 plugins/stitch-design/skills/ 下新建export-theme/（也可放进你自建的插件）
2. 写主文件：按"三字段 + 四模块"写SKILL.md，流程部分对照 generate-design
3. 配辅助文件（可选）：脚本放scripts/（参考upload_to_stitch.py，它用脚本绕过 base64 上传的 token 限制）；知识放references/；标准输出放examples/（参考metadata.json）
4. 放入可发现路径：把整个技能文件夹复制到.claude/skills/或.agents/skills/（OpenCode 用户放.opencode/skills/）
5. 触发测试 ✅：在助手里说一句技能场景内的自然语言（如"把当前主题配置导出成文件"），看它是否加载你的技能、按步骤执行；没触发就回头改description，把触发词写得更具体

跑通只是及格线，再补几条仓库里的实战经验。

避坑与进阶：五条仓库里的真实经验

• description 要写"用户原话"：extract-static-html 在描述里明确"用户只说'保存 HTML'时也要用"，高频口语写进去，触发率立刻上来
• 分支条件要可决策：stitch-loop 给出"用户给了图片 → 走图片流程"这类明确分支，AI 才不会在两条路上犹豫
• 敏感操作设确认检查点：upload-to-stitch在上传步骤前用 WARNING 写明"必须先向用户展示文件清单，确认后才执行"
• 一个技能只干一件事：generate-design 把上传环节直接"委托"给 upload-to-stitch，复杂流程靠委托拆开
• 专业知识下沉到 references/：vue.md、angular.md这类框架对照表独立成文件，主文件保持精简

技能自己用没问题后，再想想怎么给别人用。

分发与生态：安装方式与前置依赖

单个技能文件夹归入 stitch-skills 的插件体系后，才能被统一分发：插件元信息写在plugin.json（name、description、version、keywords等字段），marketplace.json再声明每个插件的来源路径与安装策略。你的技能合入对应插件的skills/目录后，用户一行命令装整包，或挑单个技能：

# 整插件安装（装到当前项目） npx plugins add google-labs-code/stitch-skills --scope project --target claude-code # 单技能选择式安装 npx skills add google-labs-code/stitch-skills

💡 所有技能都依赖Stitch MCP 服务器：先完成 MCP 注册与 API Key 配置，stitch:** 工具才能被真正调用；技能之间还有依赖，选择式安装时记得把依赖项一起带上。

分发的事说完了，回头看你该写什么。

起步指南：三个推荐选题方向与贡献流程

不知道你的 stitch-skills 技能选题写什么？README.md列了三个高价值方向：

贡献流程按CONTRIBUTING.md走：Fork 仓库 → 建功能分支 → 提交推送 → 发起 Pull Request（需签署 CLA）。

今晚就从上面三个方向里挑一个，clone 仓库写下你第一个 Stitch 技能的 frontmatter，本地验证跑通后把 PR 发出去。

【免费下载链接】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