编写 Stitch 技能实战指南用 stitch-skills 读懂 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-skillsstitch-skills 是一个为 Google Stitch 打造的技能库每个技能都遵循 Agent Skills 开放标准教会 Claude Code、Cursor、Gemini CLI 这些 AI 编码助手如何生成、编辑和管理 UI 设计。如果你想让自己的助手多会一样本事读这篇就够了你还能直接上手编写 Stitch 技能。先拆解一个现成技能动手之前先打开仓库看看官方技能是怎么写的。Agent Skills 是一套开放标准把一项技能打包成一个文件夹里面放一份给 AI 看的说明书SKILL.md助手遇到相关任务时会自动加载它并按步骤执行。同一份技能可以喂给多个助手Claude Code、Cursor、Gemini CLI 都能用不用改一行代码——这就是它值得学的原因。以 generate-design 技能 为例它的说明书定义了文/图生成界面的完整流程需要上传图片时它把这一步委托给 upload-to-stitch 技能处理自己不管上传。技能之间就是这样委托耦合的一个技能专注一件事复杂流程拆开走。一个技能文件夹就是自包含的工具箱 仓库里所有技能都遵循同一套四件套结构skills/技能名/ ├── SKILL.md # 说明书AI 的操作手册核心 ├── scripts/ # 可执行脚本校验、网络请求 ├── references/ # 知识库清单、框架对照表 └── examples/ # 高质量示例金标准参考目录职责仓库实例SKILL.md正文定义何时用、怎么用每个技能根目录scripts/干模型干不了的事比如绕过 MCP 的 base64 上传限制upload_to_stitch.pyreferences/沉淀可查阅的领域知识angular.md 框架对照表examples/给 AI 一份金标准输出样本metadata.jsonscripts 最容易被忽略。以 upload_to_stitch.py 为例模型输出 token 装不下 base64 文件内容干脆让脚本直接走 HTTP 上传。这类活儿交给脚本别让 AI手搓。frontmatter技能的身份证决定生死SKILL.md 分两段顶部 frontmatter 和正文。frontmatter 就三个字段--- name: stitch::generate-design description: 从文本或图片生成新界面编辑现有界面生成设计变体... allowed-tools: - stitch*:* - Read - Write ---name技能标识部分助手要求小写短横线格式kebab-case且与目录名一致descriptionAI 判断何时该用这个技能的唯一依据要同时写清做什么 何时触发allowed-tools可调用工具的白名单越收敛越安全正文则是给 Agent 的操作手册扎实的四段结构Overview一句话说清目标、Prerequisites前置条件、Steps分步流程每步写明调哪个工具、传什么参数、Tips / References经验小贴士加知识文件链接。taste-design 技能 就是标准示范照着读一遍就明白节奏。四步搭出你自己的技能按顺序来四步就能拿到一个合规的 Stitch 技能建目录在plugins/你的插件/skills/下新建skills/export-theme/这类目录写 SKILL.md按frontmatter 四段正文的写法步骤写到 AI 能照单执行的程度配辅助文件要跑脚本放scripts/专业对照表放references/标准输出格式放examples/本地验证✅把技能文件夹拷进助手能发现的路径.agents/skills/或.claude/skills/用一句自然语言提示词测触发效果提醒一个前提技能依赖 Stitch MCP 服务器。没先配好 Stitch MCPstitch*:*工具在技能里就是空话验证时务必先确认这一项。好技能和差技能差在四个细节description 要可触发把用户可能说的原话写进去。taste-design 把严格字体、校准配色、反对平庸 UI写进描述用户说给我一份不 AI 味的设计规范就能命中它步骤要可决策给明确分支条件比如 stitch-loop 的用户给了图片 → 走图片流程没给 → 走文本流程AI 才不会跑偏敏感操作设确认检查点涉及上传、覆盖写明先列文件清单等用户确认后再执行脚本upload-to-stitch 就是这么约束的控制粒度一个技能只做一件事复杂流程委托给别的技能把技能接进插件分发链技能写好后归入插件统一分发两条注册信息缺一不可插件元信息在plugin.json看 stitch-design 的name、description、version、keywords市场注册在 marketplace.json声明插件名、本地来源路径、安装策略用户侧一行命令装整套也能用npx skills add挑单个技能装。仓库主插件分工清晰stitch-design 管核心设计工作流stitch-build 是设计转代码插件React 组件、Remotion 视频、shadcn/uistitch-utilities 管辅助工具。接下来写什么选题没想法就看 README 给的三个高价值方向方向说明校验转换把 Stitch HTML 转成其他 UI 框架Vue/Svelte 等并校验语法数据解耦把静态设计内容拆成外部 mock 数据文件设计生成从给定数据在 Stitch 中生成新设计界面贡献流程见 CONTRIBUTING.mdFork 仓库 → 建分支 → 提交 → 发起 Pull Request需要签 CLA。收个尾技能 文件夹SKILL.md 是说明书其余三个目录是武装frontmatter 决定技能会不会被触发正文决定它跑不跑得通模型干不了的事交给 scripts 里的脚本归入插件后分发就是一行命令的事质量差距在细节可触发的 description、可决策的步骤、确认检查点【免费下载链接】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），仅供参考 编写 Stitch 技能实战指南：用 stitch-skills 读懂 Agent Skills 标准
编写 Stitch 技能实战指南用 stitch-skills 读懂 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-skillsstitch-skills 是一个为 Google Stitch 打造的技能库每个技能都遵循 Agent Skills 开放标准教会 Claude Code、Cursor、Gemini CLI 这些 AI 编码助手如何生成、编辑和管理 UI 设计。如果你想让自己的助手多会一样本事读这篇就够了你还能直接上手编写 Stitch 技能。先拆解一个现成技能动手之前先打开仓库看看官方技能是怎么写的。Agent Skills 是一套开放标准把一项技能打包成一个文件夹里面放一份给 AI 看的说明书SKILL.md助手遇到相关任务时会自动加载它并按步骤执行。同一份技能可以喂给多个助手Claude Code、Cursor、Gemini CLI 都能用不用改一行代码——这就是它值得学的原因。以 generate-design 技能 为例它的说明书定义了文/图生成界面的完整流程需要上传图片时它把这一步委托给 upload-to-stitch 技能处理自己不管上传。技能之间就是这样委托耦合的一个技能专注一件事复杂流程拆开走。一个技能文件夹就是自包含的工具箱 仓库里所有技能都遵循同一套四件套结构skills/技能名/ ├── SKILL.md # 说明书AI 的操作手册核心 ├── scripts/ # 可执行脚本校验、网络请求 ├── references/ # 知识库清单、框架对照表 └── examples/ # 高质量示例金标准参考目录职责仓库实例SKILL.md正文定义何时用、怎么用每个技能根目录scripts/干模型干不了的事比如绕过 MCP 的 base64 上传限制upload_to_stitch.pyreferences/沉淀可查阅的领域知识angular.md 框架对照表examples/给 AI 一份金标准输出样本metadata.jsonscripts 最容易被忽略。以 upload_to_stitch.py 为例模型输出 token 装不下 base64 文件内容干脆让脚本直接走 HTTP 上传。这类活儿交给脚本别让 AI手搓。frontmatter技能的身份证决定生死SKILL.md 分两段顶部 frontmatter 和正文。frontmatter 就三个字段--- name: stitch::generate-design description: 从文本或图片生成新界面编辑现有界面生成设计变体... allowed-tools: - stitch*:* - Read - Write ---name技能标识部分助手要求小写短横线格式kebab-case且与目录名一致descriptionAI 判断何时该用这个技能的唯一依据要同时写清做什么 何时触发allowed-tools可调用工具的白名单越收敛越安全正文则是给 Agent 的操作手册扎实的四段结构Overview一句话说清目标、Prerequisites前置条件、Steps分步流程每步写明调哪个工具、传什么参数、Tips / References经验小贴士加知识文件链接。taste-design 技能 就是标准示范照着读一遍就明白节奏。四步搭出你自己的技能按顺序来四步就能拿到一个合规的 Stitch 技能建目录在plugins/你的插件/skills/下新建skills/export-theme/这类目录写 SKILL.md按frontmatter 四段正文的写法步骤写到 AI 能照单执行的程度配辅助文件要跑脚本放scripts/专业对照表放references/标准输出格式放examples/本地验证✅把技能文件夹拷进助手能发现的路径.agents/skills/或.claude/skills/用一句自然语言提示词测触发效果提醒一个前提技能依赖 Stitch MCP 服务器。没先配好 Stitch MCPstitch*:*工具在技能里就是空话验证时务必先确认这一项。好技能和差技能差在四个细节description 要可触发把用户可能说的原话写进去。taste-design 把严格字体、校准配色、反对平庸 UI写进描述用户说给我一份不 AI 味的设计规范就能命中它步骤要可决策给明确分支条件比如 stitch-loop 的用户给了图片 → 走图片流程没给 → 走文本流程AI 才不会跑偏敏感操作设确认检查点涉及上传、覆盖写明先列文件清单等用户确认后再执行脚本upload-to-stitch 就是这么约束的控制粒度一个技能只做一件事复杂流程委托给别的技能把技能接进插件分发链技能写好后归入插件统一分发两条注册信息缺一不可插件元信息在plugin.json看 stitch-design 的name、description、version、keywords市场注册在 marketplace.json声明插件名、本地来源路径、安装策略用户侧一行命令装整套也能用npx skills add挑单个技能装。仓库主插件分工清晰stitch-design 管核心设计工作流stitch-build 是设计转代码插件React 组件、Remotion 视频、shadcn/uistitch-utilities 管辅助工具。接下来写什么选题没想法就看 README 给的三个高价值方向方向说明校验转换把 Stitch HTML 转成其他 UI 框架Vue/Svelte 等并校验语法数据解耦把静态设计内容拆成外部 mock 数据文件设计生成从给定数据在 Stitch 中生成新设计界面贡献流程见 CONTRIBUTING.mdFork 仓库 → 建分支 → 提交 → 发起 Pull Request需要签 CLA。收个尾技能 文件夹SKILL.md 是说明书其余三个目录是武装frontmatter 决定技能会不会被触发正文决定它跑不跑得通模型干不了的事交给 scripts 里的脚本归入插件后分发就是一行命令的事质量差距在细节可触发的 description、可决策的步骤、确认检查点【免费下载链接】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），仅供参考