企业官网建设流程全解析

从零写一个 Stitch 技能：Agent 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

你让编码助手"设计一个设置页"，出来的界面总差点意思；想把本地 HTML 原型塞进 Stitch 项目，每次都得从头解释上传步骤。开源项目 stitch-skills 就是为此而生：它遵循 Agent Skills 开放标准，把 Google Stitch 的界面生成、编辑与管理流程打包成一堆技能，让 Claude Code、Cursor、Gemini CLI 等编码助手开箱即用。这篇文章带你边做边学，最后产出一个能跑的技能。

先把一个概念说透：技能就像一张递给 AI 的菜谱卡——一个文件夹，里面是写给 AI 的任务说明书SKILL.md，再按需附上脚本、词表和范例。AI 遇到相关任务时读取卡片，照着执行。仓库按三个插件组织技能，分工如下：

先读一遍现成技能，摸透节奏

先别写代码。打开官方技能 generate-design，它负责"从文本或图片生成新界面、编辑已有界面"。三个值得抄的写法：

• 流程先行：正文以"提示词增强管线"开场——调用任何生成工具前，先查项目、查设计系统，再把含糊词替换成专业 UI/UX 描述。
• 知识外置：对照表和关键词库放在同目录references/下的 design-mappings.md 与 prompt-keywords.md，正文只指路，不抄内容。
• 会委托："上传素材"这一步不自己写，交给 upload-to-stitch 技能完成。

💡 官方技能的共性：SKILL.md 只管"何时调用什么"，细节下沉到references/和scripts/，模型上下文才留得下重点。

拆解标准技能的四件套

仓库里每个技能目录都遵循同一套四件套：

skills/export-theme/ ├── SKILL.md # AI 读取的任务说明书（核心，必备） ├── scripts/ # 可执行脚本（校验、网络请求） ├── references/ # 知识库（对照表、风格指南） └── examples/ # 金标准范例（标准输出）

分工很明确，SKILL.md 是主体，其余三个是可选弹药：

以 upload_to_stitch.py 为例：文件做 base64 编码会超出模型输出 token 上限，走 MCP 直接传文件行不通，所以该技能带了一个 Python 脚本，把文件直接走 HTTP 发出去，绕过限制。这就是scripts/席位的典型用法。

frontmatter 三字段怎么填

翻开任何 SKILL.md，顶部都有一段 YAML frontmatter，它是技能的"身份证"。以 generate-design 的开头为参照：

--- name: stitch::generate-design description: 从文本或图片生成新界面，编辑现有界面…… allowed-tools: - "stitch*:*" - "Read" - "Write" ---

三个字段逐个说：

• name：技能标识。部分助手（如 OpenCode）要求小写短横线格式（kebab-case），且与目录名一致。
• description：AI 判断"何时用这个技能"的唯一依据。要写清"做什么 + 何时触发"。看 extract-static-html 的写法：明确写出"即使用户只说'保存 HTML'或'mock 视图'，也要用它"。
• allowed-tools：工具白名单，写得越收敛，行为越可控。

四步建好你自己的 Stitch 技能

挑个小选题：把 Stitch 项目的当前主题导出为 JSON。全程四步。

第 1 步：建好技能目录。在plugins/<你的插件>/skills/下新建export-theme/。

第 2 步：填好 frontmatter。name 与目录名保持一致；description 里塞进用户会说的原话，比如"导出主题""获取设计令牌"。

第 3 步：按四模块写正文。结构直接对照官方技能抄：

1. Overview：一句话说清目标。
2. Prerequisites：前置条件，比如"已配置 Stitch MCP 服务器"。
3. Steps：分步可执行流程，每步写清调用哪个工具、传什么参数。
4. Tips / References：经验小贴士，并链接references/与examples/里的文件。

第 4 步：配好辅助文件。要跑校验逻辑？放scripts/。要沉淀主题令牌的 JSON 字段说明？放references/。要固定输出格式？放一个标准样例进examples/。

正文还有两个细节决定技能好不好用：

• 步骤要"可决策"：写清分支条件，像 stitch-loop 那样给出"用户给了图片 → 走图片流程，否则走文本流程"，AI 才不会跑偏。
• 敏感操作设确认检查点：上传、覆盖这类动作，写明"必须用户确认后再执行"。upload-to-stitch 正文就有一段明确警告：先向用户列明文件路径、大小、类型，等批准后才跑脚本。

安装、触发与排错

先补前提：技能依赖Stitch MCP 服务器。没完成 Stitch MCP 的环境配置，stitch*:*工具就是空转。

安装三选一：

# 选择性安装单个技能 npx skills add <仓库> # 整插件安装（以 Claude Code 为例） npx plugins add <仓库> --scope project --target claude-code

也可以手动把技能文件夹拷进.claude/skills/或.agents/skills/。

装完用自然语言提示词验证，比如"把项目 XXX 的主题导出为 JSON"。出问题查这张表：

要交给团队使用，就把技能装进插件：在plugin.json写好 name、description、version、keywords，参考 stitch-design 的 plugin.json。队友一行命令即可安装整套。

下一个技能写什么：三个方向与贡献流程

没思路时，README 列了三个高价值方向：

技能做完就交上去：Fork 仓库 → 建功能分支 → 提交 → 发起 Pull Request。具体流程与 CLA 签署要求见 CONTRIBUTING.md。

发布前把这份自检清单过一遍：

• 目录里有 SKILL.md，三个辅助文件夹按需就位
• frontmatter 三字段填齐，name 与目录名一致
• description 读起来像"何时该用我"
• 步骤可决策，分支与确认检查点都写了
• Stitch MCP 前置条件已注明

下一步行动：从方向表里挑一个选题，今天就建好目录，把 frontmatter 写出来——最难的只是第一行name。

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