stitch-skills四目录结构揭秘：SKILL.md、scripts、resources与examples
stitch-skills四目录结构揭秘SKILL.md、scripts、resources与examples【免费下载链接】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 技能库每个技能都遵循 Agent Skills 开放标准可无缝配合 Antigravity、Gemini CLI、Claude Code、Cursor 等编码智能体使用。今天就带你拆解它最核心的四目录结构——SKILL.md、scripts/、resources/仓库中常写作references/与examples/看懂它们你就能轻松读懂甚至自己编写 Agent 技能。先看全局stitch-skills 的仓库布局 ️项目按「插件 → 技能」两级组织所有技能都位于plugins/之下插件定位代表技能stitch-design核心设计工作流代码转设计、生成界面、设计系统管理generate-design、code-to-design、upload-to-stitchstitch-utilities设计辅助工具生成设计规范、增强提示词、多页建站循环design-md、enhance-prompt、stitch-loop每个技能文件夹内部则遵循统一的「四件套」标准结构skills/skill-name/ ├── SKILL.md — 智能体的任务控制中心Mission Control ├── scripts/ — 可执行脚本校验、网络请求等强制动作 ├── references/ — 知识库检查清单、风格指南标准中称 resources └── examples/ — 黄金标准参考样例四大目录逐一拆解1️⃣ SKILL.md智能体的任务控制中心每个技能都必须有一个 SKILL.md 文件它是智能体读取入口和唯一说明书。文件顶部是 YAML frontmatter声明技能名、描述和允许使用的工具allowed-tools正文则是分步骤的操作指令。以 generate-design 的 SKILL.md 为例它要求智能体在生成界面前必须先走提示词增强流水线先查项目、再查设计系统、最后按模板组织最终提示词——指令之细致决定了技能的可复现性。 判断技巧SKILL.md 的description字段直接决定智能体何时想起这个技能是写给 AI 看的路由信息。2️⃣ scripts/可执行的强制执行者AI 模型有天然短板——比如无法直接上传二进制文件base64 编码会撑爆输出 token 上限。scripts/目录就是补这块短板的用确定性脚本替代模型记忆。典型例子upload_to_stitch.py绕过 MCP 的 token 限制通过 HTTP 直传图片、HTML 资产到 Stitch 项目extract_inline_html.ts、snapshot.ts用 Puppeteer 抓取渲染后的页面把 CSS 内联、图片转 base64产出可独立打开的静态 HTML。这类脚本通常由 SKILL.md 中的run_command步骤触发是技能里不许出错的关键环节。3️⃣ references/即 resources技能的知识库 Agent Skills 标准中该目录称为resources本仓库实际多命名为references/个别技能用reference/内容是可被按需加载的领域知识避免把这些内容塞进 SKILL.md 撑大上下文。文件作用references/design-mappings.md把好看的头部这类模糊描述映射为毛玻璃效果的粘性导航栏等专业术语references/prompt-keywords.mdUI 组件名词、形容词、色彩角色、形状描述的关键词库references/KEYWORDS.md提示词增强用的 UI/UX 关键词清单references/angular.md、vue.md按前端框架分门别类的设计系统提取指南4️⃣ examples/黄金标准参考样例examples/存放语法正确、可直接模仿的范例输出相当于给 AI 的标准答案examples/DESIGN.md一份完整的 DESIGN.md 设计规范样例智能体生成设计系统文档时对齐此结构examples/enhanced-prompt.md增强后提示词的成品示例examples/metadata.json设计系统元数据的格式样例stitch-loop/examples/next-prompt.md多页建站循环中接力棒任务文件的模板。实战对照generate-design 技能的全家桶 以 plugins/stitch-design/skills/generate-design/ 为例四目录如何协作一目了然SKILL.md定义流程分析上下文 → 增强提示词 → 生成界面需要术语映射时SKILL.md 指向references/design-mappings.md按需查阅需要参考成品效果对照examples/enhanced-prompt.md该技能偏指令型没有scripts/——并非每个技能都四件套齐全SKILL.md 是唯一必需项其余按需要裁剪。各技能目录覆盖情况速查技能SKILL.mdscripts/references/examples/generate-design✅—✅✅upload-to-stitch✅✅——extract-static-html✅✅——extract-design-md✅—✅✅taste-design✅———快速上手三步跑起来 克隆仓库git clone https://gitcode.com/GitHub_Trending/st/stitch-skills配置 Stitch MCP 服务器技能依赖它提供list_projects、generate_screen_from_text等工具按需求安装整插件安装推荐stitch-design设计流stitch-utilities辅助流也可用npx skills add只挑单个技能。⚠️ 注意技能间存在依赖选择性安装时要带全依赖项。写在最后stitch-skills 的四目录结构本质上是一种**提示词工程 确定性脚本 可检索知识 参考样例的组合拳**SKILL.md 管流程、scripts 管执行、references 管知识、examples 管质量标准。理解了这套约定你不仅可以更好地使用这些技能还能照着 CONTRIBUTING.md 的规范为自己团队的智能体编写新的 Agent 技能。【免费下载链接】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），仅供参考