尧图网站建设 
从零写一个 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 遇到相关任务时读取卡片照着执行。仓库按三个插件组织技能分工如下插件分工代表技能stitch-design核心设计工作流文/图生成界面、代码转设计stitch-build设计转代码React 组件、Remotion 视频、shadcn/uistitch-utilities辅助工具提示词增强、建站循环先读一遍现成技能摸透节奏先别写代码。打开官方技能 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 是主体其余三个是可选弹药文件职责什么时候需要SKILL.md目标、前置条件、分步流程必备scripts/AI 可直接执行的脚本需要跑代码时比如上传脚本references/AI 查阅的领域知识需要沉淀术语、规范时examples/输出的金标准参考需要固定输出格式时以 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且与目录名一致。descriptionAI 判断何时用这个技能的唯一依据。要写清做什么 何时触发。看 extract-static-html 的写法明确写出即使用户只说保存 HTML或mock 视图也要用它。allowed-tools工具白名单写得越收敛行为越可控。四步建好你自己的 Stitch 技能挑个小选题把 Stitch 项目的当前主题导出为 JSON。全程四步。第 1 步建好技能目录。在plugins/你的插件/skills/下新建export-theme/。第 2 步填好 frontmatter。name 与目录名保持一致description 里塞进用户会说的原话比如导出主题获取设计令牌。第 3 步按四模块写正文。结构直接对照官方技能抄Overview一句话说清目标。Prerequisites前置条件比如已配置 Stitch MCP 服务器。Steps分步可执行流程每步写清调用哪个工具、传什么参数。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。出问题查这张表症状排查点技能不触发description 里有没有用户说的那句话触发后跑不通Stitch MCP 环境是否配好助手加载失败name 是否与目录名一致、格式是否合法要交给团队使用就把技能装进插件在plugin.json写好 name、description、version、keywords参考 stitch-design 的 plugin.json。队友一行命令即可安装整套。下一个技能写什么三个方向与贡献流程没思路时README 列了三个高价值方向方向做什么示例校验转换把 Stitch HTML 转为其他 UI 框架并校验语法转 Vue/Svelte 组件数据解耦把静态设计内容拆成外部 mock 数据文件页面文案/图表数据外置设计生成从给定数据在 Stitch 中生成新设计界面从 JSON 批量生成列表页技能做完就交上去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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 从零写一个 Stitch 技能：Agent Skills 标准完整实战教程
从零写一个 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 遇到相关任务时读取卡片照着执行。仓库按三个插件组织技能分工如下插件分工代表技能stitch-design核心设计工作流文/图生成界面、代码转设计stitch-build设计转代码React 组件、Remotion 视频、shadcn/uistitch-utilities辅助工具提示词增强、建站循环先读一遍现成技能摸透节奏先别写代码。打开官方技能 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 是主体其余三个是可选弹药文件职责什么时候需要SKILL.md目标、前置条件、分步流程必备scripts/AI 可直接执行的脚本需要跑代码时比如上传脚本references/AI 查阅的领域知识需要沉淀术语、规范时examples/输出的金标准参考需要固定输出格式时以 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且与目录名一致。descriptionAI 判断何时用这个技能的唯一依据。要写清做什么 何时触发。看 extract-static-html 的写法明确写出即使用户只说保存 HTML或mock 视图也要用它。allowed-tools工具白名单写得越收敛行为越可控。四步建好你自己的 Stitch 技能挑个小选题把 Stitch 项目的当前主题导出为 JSON。全程四步。第 1 步建好技能目录。在plugins/你的插件/skills/下新建export-theme/。第 2 步填好 frontmatter。name 与目录名保持一致description 里塞进用户会说的原话比如导出主题获取设计令牌。第 3 步按四模块写正文。结构直接对照官方技能抄Overview一句话说清目标。Prerequisites前置条件比如已配置 Stitch MCP 服务器。Steps分步可执行流程每步写清调用哪个工具、传什么参数。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。出问题查这张表症状排查点技能不触发description 里有没有用户说的那句话触发后跑不通Stitch MCP 环境是否配好助手加载失败name 是否与目录名一致、格式是否合法要交给团队使用就把技能装进插件在plugin.json写好 name、description、version、keywords参考 stitch-design 的 plugin.json。队友一行命令即可安装整套。下一个技能写什么三个方向与贡献流程没思路时README 列了三个高价值方向方向做什么示例校验转换把 Stitch HTML 转为其他 UI 框架并校验语法转 Vue/Svelte 组件数据解耦把静态设计内容拆成外部 mock 数据文件页面文案/图表数据外置设计生成从给定数据在 Stitch 中生成新设计界面从 JSON 批量生成列表页技能做完就交上去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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考