你是小阿巴,正在用 AI 开发网站。
为了让 AI 生成的效果更好,你告诉 AI:
界面不要使用蓝紫渐变色
不要生成一大堆没用的文档
你要遵循公司的代码规范
阿巴阿巴,洋洋洒洒几百字。
之后每次开发网站时,你都要写这么一段又臭又长的提示词,太麻烦了!
于是聪明的你开始想办法。
先把常用的提示词保存到单独的文件(比如prompts.md),每次手动投喂给 AI。
然后创建了资源文件夹,把公司的代码规范、设计素材都塞进去,告诉 AI 参考这些写。
接着你还写了一些脚本,让 AI 生成代码后自动执行格式化、运行测试、提交代码到 Git。
最后我再写个AGENTS.md文件,把所有规范和工作流程都写进去,让 AI 自动读取。
你沾沾自喜:嘿嘿,俺这套工作流,堪称完美!
但很快,你发现了问题,随着规范越写越多,文档越来越臃肿,每次对话都要占用很多 AI 上下文空间,浪费 tokens。
于是你找到号称 “没有人比他更不懂 AI” 的鱼皮求助:阿巴阿巴,俺还能咋办啊……
鱼皮:不是有 Agent Skills 么?为啥不直接用?
你一脸懵:啥玩意儿?
鱼皮:这可是最近 AI 圈儿爆火的技术,下面我来带你玩转 Agent Skills,让你知道它是什么、怎么用、有什么魔力、怎么自己开发。
点个收藏,我们开始~
⭐️ 推荐观看视频动画版,更通俗易懂:https://bilibili.com/video/BV1T7zzBQEaA
什么是 Agent Skills?
Agent Skills 是 Anthropic 推出的 一套开放标准,目的是让 AI 能够学习使用各种专业技能,而不用每次都重复输入提示词。
简单来说,它就是给 AI 装备的技能包。技能包里有精心设计的提示词、代码脚本、还有各种资源文件。
把 AI 想象成一个职场小白,给他装上文档处理技能,它就立刻知道怎么生成 PPT、处理 Excel 表格;装上代码规范技能,它就知道怎么按照公司标准写代码。
你挠挠头:等等…… 这不就是俺在做的事吗?把教 AI 做事的文档和 AI 要用到的文件打包成文件夹?
鱼皮:差不多,但 Anthropic 把它做成了一个通用标准,而且在实现原理上有一些新花样……
你捶胸顿足:可恶啊,俺差点就改变世界了!这能有什么新花样?
鱼皮:我先来带你用一下 Agent Skills,再跟你说说其中的奥秘。
Agent Skills 入门实战
目前对 Agent Skills 支持最完善的工具是 Anthropic 官方的 Claude Code,我们就以此为例,安装并使用 Skills。
先打开 Claude Code 并输入命令,添加官方技能市场:
/plugin marketplace add anthropics/skills
这就像是在你的 AI 助手里开通了一个技能商店,接下来你就可以从商店中获取技能了。
在 Claude Code 中输入命令,安装官方提供的技能包:
/plugin install example-skills@anthropic-agent-skills
这个 example-skills 包含了一堆官方示例技能,包括前端设计、网页测试、动图制作等等。
装完之后,你就可以直接让 AI 使用这些技能了。
2、前端设计技能
比如你要做一个网站,以前没装技能的时候,AI 生成的代码又是那个熟悉的蓝紫渐变色,千篇一律的 AI 审美。
现在安装了 frontend-design 这个教 AI 生成专业设计感网站的技能后,你输入:“帮我开发个人作品集网站”。
AI 会主动问你:我发现你安装了前端设计技能,需要用它来生成更具设计感的页面吗?
确认之后,AI 会利用技能生成代码,告别蓝紫渐变,生成独特风格的精美页面。
我们不用每次都给 AI 输入一大堆相同的提示词,装一次技能就行了。
3、文档处理技能
除了代码相关的技能,官方还提供了文档处理技能包。
同样在 Claude Code 中输入一行命令安装:
/plugin install document-skills@anthropic-agent-skills
这个技能包里有 PPT 制作、Word 文档生成、Excel 数据分析、PDF 解析等技能。
接下来如果你让 AI 做个 PPT,它会自动调用 PPT 制作技能,直接生成排版好的 PPT 文件,帮你节省几个小时。
揭秘 Agent Skills 内部原理
你好奇道:咦,为什么 Skills 能做到安装即用?技能包里面到底有啥?AI 又是怎么知道该用哪个技能的?
鱼皮:好问题。技能 其实就是一个包含SKILL.md技能说明文件的文件夹,还可以包含可执行脚本、资源和参考文档。
my-skill/
├── SKILL.md # 必需:指令和元数据
├── scripts/ # 可选:可执行脚本
├── references/ # 可选:参考文档
└── assets/ # 可选:模板和资源
由于每个技能的复杂度不同,结构也会存在区别。我们可以在本地目录中找到已安装的技能文件夹。
以官方的 PPT 制作技能为例,它的结构是这样的:
skills/pptx/
├── SKILL.md # 技能说明书(必需)
├── ooxml/ # OOXML 相关资源
├── scripts/ # 处理脚本
├── html2pptx.md # HTML 转 PPT 说明
├── ooxml.md # OOXML 格式说明
└── LICENSE.txt # 许可证
包含一个核心的技能说明文档SKILL.md,还有脚本、参考文档和各种资源文件。
而 frontend-design 前端设计技能只有一个SKILL.md文件。
SKILL.md文件是每个技能的核心,它包含两个关键部分。
第一部分是元数据,用 YAML 格式写在文件开头:
---
name:frontend-design
description:生成具有专业设计感的前端代码,避免千篇一律的AI审美
---
其中 name是技能的名字。description是技能的描述,告诉 AI 什么时候应该使用这个技能。描述写得越清晰,AI 就越容易在合适的时机调用它。
第二部分是指令内容,就是一套经过精心设计的提示词,指导 AI 具体怎么做。
以 frontend-design 技能为例,它的指令内容包括:
设计思考:在写代码前,先分析产品目的、用户群体、技术约束,然后选择一个大胆的美学方向(极简、复古未来、工业风、有机自然、奢华精致等)
前端美学指南:包括字体选择(避免 Arial、Inter 等烂大街字体,选择有个性的组合)、配色主题(主色调配鲜明点缀色)、动效设计、空间构成、背景和视觉细节
避坑指南:明确禁止紫色渐变、系统字体、千篇一律的布局等 AI 审美陷阱
你挠了挠头:如果有多个 SKills,AI 怎么知道该用哪个技能呢?如果把每个技能说明文档都塞给 AI,不是很占用上下文么?
鱼皮:这就要说到渐进式披露(Progressive Disclosure)这个核心机制了。
当你让 AI 执行任务时,它会先扫描技能目录,但不会把所有内容都加载到上下文中。而是只读取每个技能的元数据(名字和描述),发现描述和任务相关,就知道该用这个技能了。
然后才把完整的技能说明文档读进来,按照里面的指令执行:
并根据需要加载技能包中的其他资源:
用到哪个查哪个,既精准匹配又节省上下文,这就是渐进式披露的精髓。
所以 Agent Skills 的本质就是把专业知识打包成一个文件夹,让 AI 按需读取并使用。
你问:除了 Claude Code 之外,其他 AI 工具支持 Agent Skills 么?俺平时用 Cursor 比较多……
鱼皮:当然能!Agent Skills 已经成为通用标准,Cursor、VS Code、Codex 等工具都支持。
Skills 的社区也非常活跃,你可以在 Claude Skills Hub 市场、开源的 Awesome Claude Skills 等地方找到很多现成的技能。
比如有个叫 UI UX Pro MAX 的技能特别火,专门用于提升 AI 的设计能力。
用法很简单,首先按照 开源仓库文档 的指引,安装官方提供的命令行工具:
npm install -g uipro-cli
然后进入到你的项目目录下,根据使用的 AI 工具执行对应的命令。比如我这里用 Cursor:
uipro init --ai cursor
它会自动把技能安装到 Cursor 的配置目录里。
安装完成后,可以看到它的文件结构:
接下来,当你让 AI 开发一个网站时,可以使用斜杠命令手动触发技能,或者让 AI 自动识别技能。
1)AI 会根据你的需求识别出产品类型和需要的页面类型
2)然后调用search.py搜索脚本,在 data 目录里进行多维度搜索,找到适合的配色、字体、布局风格
3)综合搜索结果,生成完整的设计方案(主色调、字体组合、间距规范等)
4)最后,再按照设计方案生成代码
这样一来,生成的界面既专业又有设计感。
AI 不需要把所有规则都背下来,而是用到哪个查哪个,这就是 Agent Skills 的精髓。
创建自己的 Agent Skills
用了很多别人的技能后,你产生了一个大胆的想法:俺能不能把公司的周报格式封装成一个技能?以后推荐给新来的同事,还能卖个几块钱,嘿嘿嘿~
鱼皮笑道:有点儿东西,你打算怎么做呢?
你会心一笑:当然是发挥程序员最擅长的事情 —— 复制粘贴!
俺先复制一个官方的技能包,修改目录名称为自己的。
然后修改技能说明文档SKILL.md的元数据、指令内容这些关键部分。
示例SKILL.md文件:
---
name: company-weekly-report
description: 生成符合公司规范的项目周报,包含进度汇总、问题跟踪和下周计划
---
# 公司周报生成技能
当用户要求生成周报时,请按以下步骤执行:
## 1. 收集信息
-询问本周完成的主要工作
-询问遇到的问题和解决方案
-询问下周计划
## 2. 格式规范
-使用公司蓝色主题
-标题使用微软雅黑加粗
-每个模块不超过 5 个要点## 3. 输出格式
-默认输出 Markdown
-如需 PPT,调用 pptx 技能
最后,把公司的 Logo、PPT 模板、报告样例放在子文件夹里就行了。妈妈再也不用担心我的周报了~
鱼皮:不错不错,但其实有更简单规范的方法。
在前面安装的 example-skills 官方示例技能包里,有一个叫Skill Creator的技能,专门用来帮你创建新技能。
你只需要跟 AI 说:“帮我创建一个专门生成公司周报的技能”
接下来 AI 会问你几个问题,一步一步回答就好:
你希望周报包含哪些主要部分?
你希望周报以什么格式输出?
你通常会如何使用这个周报技能?
希望周报的语言风格是什么?
很快,一个完整的技能包就生成了,你会看到一个.skill为后缀的文件,本质上是一个 zip 压缩包。
你可以把它解压到你的个人技能目录(~/.claude/skills/)下,你的所有项目都能用。
如果你想让这个技能只在某个项目生效,可以把它放到项目的.claude/skills/目录下,并且利用 Git 同步给项目组其他成员。
测试没问题后,你还可以把它开源到 GitHub,或者上传到 Claude Skills Hub 这样的社区平台,让所有用户都能用。
你开心极了:原来开发一个 Skills 这么简单!但是,这玩意儿跟之前火爆的 MCP 和斜杠命令有啥区别?
鱼皮:好问题!
MCP 就像给 AI 装上了 “手和眼睛”,让 AI 能够连接外部工具和数据源,比如搜索网页、读取代码仓库、查询数据库。适合需要获取数据或操作外部系统的场景。
而 Agent Skills 更像是给 AI 发了一本 “工作手册”,把专业知识和工作流程打包起来,教 AI 在特定领域该怎么做。
至于斜杠命令,它就像是快捷键,是需要你手动输入/command命令来触发的固定操作;而 Skills 的特点是 AI 可以自动识别该用什么技能,不需要你显式调用。
对了,其实 MCP 和 Skills 是可以结合起来的。
举个例子,如果你想让 AI 帮你发周报:
MCP 负责获取数据:从任务管理数据库拉取这周的任务列表
Skills 负责加工数据:把获取到的原始数据整理成老板爱看的格式
一个提供食材,一个提供配方。
你看着技能文件夹的结构,突然怪叫一声:等等,俺突然意识到一个问题…… 这不就是我们程序员玩烂的 “封装、复用、模块化、懒加载” 那一套吗?
写几个代码文件、打个包、发到网上,让其他程序员下载下来用,不是一回事儿么?
为什么 Agent Skills 能突然让整个 AI 圈为之疯狂?
鱼皮:好问题,从技术的角度来看,它并没有发明什么惊天动地的算法。
在我看来,它能火主要是 2 个原因。
第一,它是开放标准,封装一次技能包后就能在各种 AI 工具里复用,还能通过社区共享。
更重要的是,Skills 能立刻让 AI 的工作更专业可靠,让普通人 “无感” 地享受技术带来的价值。以前想让 AI 变聪明,你得学提示词工程、配置各种工具链。现在只需要像装 APP 一样安装技能包,AI 就立刻变专业了。一项技术的成功,不在于它有多复杂,而在于它能让普通用户不关注技术细节的情况下,感受到技术的价值。
你点点头:学会了学废了!降低门槛,才是技术走向大众的钥匙。
鱼皮:没错,Agent Skills 不仅仅是个技术概念,更是一种新的工作方式。你可以把它融入到自己的日常工作中,比如把重复的任务封装成技能、把团队的最佳实践固化成技能,让 AI 真正成为你的得力助手。
在这个 Vibe Coding 盛行的年代,技术的门槛正在崩塌,而想象力的边界正在无限扩张。你可以在我免费开源的中学到更多 AI 编程技巧,也欢迎关注我的账号,学习更多 AI 和编程的技巧。
开源指路:https://github.com/liyupi/ai-guide
那么问题来了,你最想让 AI 学会什么技能呢?
热门跟贴