你是小阿巴，正在用 AI 開發(fā)網(wǎng)站。

為了讓 AI 生成的效果更好，你告訴 AI：

• 界面不要使用藍(lán)紫漸變色

• 不要生成一大堆沒用的文檔

• 你要遵循公司的代碼規(guī)范

阿巴阿巴，洋洋灑灑幾百字。

之后每次開發(fā)網(wǎng)站時(shí)，你都要寫這么一段又臭又長的提示詞，太麻煩了！

于是聰明的你開始想辦法。

先把常用的提示詞保存到單獨(dú)的文件（比如 prompts.md），每次手動(dòng)投喂給 AI。

然后創(chuàng)建了資源文件夾，把公司的代碼規(guī)范、設(shè)計(jì)素材都塞進(jìn)去，告訴 AI 參考這些寫。

接著你還寫了一些腳本，讓 AI 生成代碼后自動(dòng)執(zhí)行格式化、運(yùn)行測試、提交代碼到 Git。

最后我再寫個(gè) AGENTS.md 文件，把所有規(guī)范和工作流程都寫進(jìn)去，讓 AI 自動(dòng)讀取。

你沾沾自喜：嘿嘿，俺這套工作流，堪稱完美！

但很快，你發(fā)現(xiàn)了問題，隨著規(guī)范越寫越多，文檔越來越臃腫，每次對話都要占用很多 AI 上下文空間，浪費(fèi) tokens。

于是你找到號稱 “沒有人比他更不懂 AI” 的魚皮求助：阿巴阿巴，俺還能咋辦啊……

魚皮：不是有 Agent Skills 么？為啥不直接用？

你一臉懵：啥玩意兒？

魚皮：這可是最近 AI 圈兒爆火的技術(shù)，下面我來帶你玩轉(zhuǎn) Agent Skills，讓你知道它是什么、怎么用、有什么魔力、怎么自己開發(fā)。

點(diǎn)個(gè)收藏，我們開始~

?? 推薦觀看視頻動(dòng)畫版，更通俗易懂：https://bilibili.com/video/BV1T7zzBQEaA

什么是 Agent Skills？

Agent Skills 是 Anthropic 推出的 一套開放標(biāo)準(zhǔn)，目的是讓 AI 能夠?qū)W習(xí)使用各種專業(yè)技能，而不用每次都重復(fù)輸入提示詞。

簡單來說，它就是給 AI 裝備的 技能包。技能包里有精心設(shè)計(jì)的提示詞、代碼腳本、還有各種資源文件。

把 AI 想象成一個(gè)職場小白，給他裝上 文檔處理技能，它就立刻知道怎么生成 PPT、處理 Excel 表格；裝上 代碼規(guī)范技能，它就知道怎么按照公司標(biāo)準(zhǔn)寫代碼。

你撓撓頭：等等…… 這不就是俺在做的事嗎？把教 AI 做事的文檔和 AI 要用到的文件打包成文件夾？

魚皮：差不多，但 Anthropic 把它做成了一個(gè)通用標(biāo)準(zhǔn)，而且在實(shí)現(xiàn)原理上有一些新花樣……

你捶胸頓足：可惡啊，俺差點(diǎn)就改變世界了！這能有什么新花樣？

魚皮：我先來帶你用一下 Agent Skills，再跟你說說其中的奧秘。

Agent Skills 入門實(shí)戰(zhàn)

目前對 Agent Skills 支持最完善的工具是 Anthropic 官方的 Claude Code，我們就以此為例，安裝并使用 Skills。

1、安裝 Skills 技能

先打開 Claude Code 并輸入命令，添加官方技能市場：

/plugin marketplace add anthropics/skills

這就像是在你的 AI 助手里開通了一個(gè)技能商店，接下來你就可以從商店中獲取技能了。

在 Claude Code 中輸入命令，安裝官方提供的技能包：

/plugin install example-skills@anthropic-agent-skills

這個(gè) example-skills 包含了一堆官方示例技能，包括前端設(shè)計(jì)、網(wǎng)頁測試、動(dòng)圖制作等等。

裝完之后，你就可以直接讓 AI 使用這些技能了。

2、前端設(shè)計(jì)技能

比如你要做一個(gè)網(wǎng)站，以前沒裝技能的時(shí)候，AI 生成的代碼又是那個(gè)熟悉的藍(lán)紫漸變色，千篇一律的 AI 審美。

現(xiàn)在安裝了 frontend-design 這個(gè) 教 AI 生成專業(yè)設(shè)計(jì)感網(wǎng)站 的技能后，你輸入：“幫我開發(fā)個(gè)人作品集網(wǎng)站”。

AI 會主動(dòng)問你：我發(fā)現(xiàn)你安裝了前端設(shè)計(jì)技能，需要用它來生成更具設(shè)計(jì)感的頁面嗎？

確認(rèn)之后，AI 會利用技能生成代碼，告別藍(lán)紫漸變，生成獨(dú)特風(fēng)格的精美頁面。

我們不用每次都給 AI 輸入一大堆相同的提示詞，裝一次技能就行了。

3、文檔處理技能

除了代碼相關(guān)的技能，官方還提供了文檔處理技能包。

同樣在 Claude Code 中輸入一行命令安裝：

/plugin install document-skills@anthropic-agent-skills

這個(gè)技能包里有 PPT 制作、Word 文檔生成、Excel 數(shù)據(jù)分析、PDF 解析等技能。

接下來如果你讓 AI 做個(gè) PPT，它會自動(dòng)調(diào)用 PPT 制作技能，直接生成排版好的 PPT 文件，幫你節(jié)省幾個(gè)小時(shí)。

揭秘 Agent Skills 內(nèi)部原理

你好奇道：咦，為什么 Skills 能做到安裝即用？技能包里面到底有啥？AI 又是怎么知道該用哪個(gè)技能的？

魚皮：好問題。技能 其實(shí)就是一個(gè)包含 SKILL.md 技能說明文件的文件夾，還可以包含可執(zhí)行腳本、資源和參考文檔。

my-skill/
├── SKILL.md          # 必需：指令和元數(shù)據(jù)
├── scripts/          # 可選：可執(zhí)行腳本
├── references/       # 可選：參考文檔
└── assets/           # 可選：模板和資源

由于每個(gè)技能的復(fù)雜度不同，結(jié)構(gòu)也會存在區(qū)別。我們可以在本地目錄中找到已安裝的技能文件夾。

以官方的 PPT 制作技能為例，它的結(jié)構(gòu)是這樣的：

skills/pptx/
├── SKILL.md          # 技能說明書（必需）
├── ooxml/            # OOXML 相關(guān)資源
├── scripts/          # 處理腳本
├── html2pptx.md      # HTML 轉(zhuǎn) PPT 說明
├── ooxml.md          # OOXML 格式說明
└── LICENSE.txt       # 許可證

包含一個(gè)核心的技能說明文檔 SKILL.md，還有腳本、參考文檔和各種資源文件。

而 frontend-design 前端設(shè)計(jì)技能只有一個(gè) SKILL.md 文件。

SKILL.md 文件是每個(gè)技能的核心，它包含兩個(gè)關(guān)鍵部分。

第一部分是 元數(shù)據(jù)，用 YAML 格式寫在文件開頭：

---
name: frontend-design
description: 生成具有專業(yè)設(shè)計(jì)感的前端代碼，避免千篇一律的 AI 審美
---

其中 name 是技能的名字。description 是技能的描述，告訴 AI 什么時(shí)候應(yīng)該使用這個(gè)技能。描述寫得越清晰，AI 就越容易在合適的時(shí)機(jī)調(diào)用它。

第二部分是 指令內(nèi)容，就是一套經(jīng)過精心設(shè)計(jì)的提示詞，指導(dǎo) AI 具體怎么做。

以 frontend-design 技能為例，它的指令內(nèi)容包括：

• 設(shè)計(jì)思考：在寫代碼前，先分析產(chǎn)品目的、用戶群體、技術(shù)約束，然后選擇一個(gè)大膽的美學(xué)方向（極簡、復(fù)古未來、工業(yè)風(fēng)、有機(jī)自然、奢華精致等）

• 前端美學(xué)指南：包括字體選擇（避免 Arial、Inter 等爛大街字體，選擇有個(gè)性的組合）、配色主題（主色調(diào)配鮮明點(diǎn)綴色）、動(dòng)效設(shè)計(jì)、空間構(gòu)成、背景和視覺細(xì)節(jié)

• 避坑指南：明確禁止紫色漸變、系統(tǒng)字體、千篇一律的布局等 AI 審美陷阱

你撓了撓頭：如果有多個(gè) SKills，AI 怎么知道該用哪個(gè)技能呢？如果把每個(gè)技能說明文檔都塞給 AI，不是很占用上下文么？

魚皮：這就要說到 漸進(jìn)式披露（Progressive Disclosure） 這個(gè)核心機(jī)制了。

當(dāng)你讓 AI 執(zhí)行任務(wù)時(shí)，它會先掃描技能目錄，但不會把所有內(nèi)容都加載到上下文中。而是只讀取每個(gè)技能的元數(shù)據(jù)（名字和描述），發(fā)現(xiàn)描述和任務(wù)相關(guān)，就知道該用這個(gè)技能了。

然后才把完整的技能說明文檔讀進(jìn)來，按照里面的指令執(zhí)行：

并根據(jù)需要加載技能包中的其他資源：

用到哪個(gè)查哪個(gè)，既精準(zhǔn)匹配又節(jié)省上下文，這就是漸進(jìn)式披露的精髓。

所以 Agent Skills 的本質(zhì)就是 把專業(yè)知識打包成一個(gè)文件夾，讓 AI 按需讀取并使用。

跨工具的 Agent Skills

你問：除了 Claude Code 之外，其他 AI 工具支持 Agent Skills 么？俺平時(shí)用 Cursor 比較多……

魚皮：當(dāng)然能！Agent Skills 已經(jīng)成為通用標(biāo)準(zhǔn)，Cursor、VS Code、Codex 等工具都支持。

Skills 的社區(qū)也非?；钴S，你可以在 Claude Skills Hub 市場、開源的 Awesome Claude Skills 等地方找到很多現(xiàn)成的技能。

比如有個(gè)叫 UI UX Pro MAX 的技能特別火，專門用于提升 AI 的設(shè)計(jì)能力。

用法很簡單，首先按照 開源倉庫文檔 的指引，安裝官方提供的命令行工具：

npm install -g uipro-cli

然后進(jìn)入到你的項(xiàng)目目錄下，根據(jù)使用的 AI 工具執(zhí)行對應(yīng)的命令。比如我這里用 Cursor：

uipro init --ai cursor

它會自動(dòng)把技能安裝到 Cursor 的配置目錄里。

安裝完成后，可以看到它的文件結(jié)構(gòu)：

接下來，當(dāng)你讓 AI 開發(fā)一個(gè)網(wǎng)站時(shí)，可以使用斜杠命令手動(dòng)觸發(fā)技能，或者讓 AI 自動(dòng)識別技能。

1）AI 會根據(jù)你的需求識別出產(chǎn)品類型和需要的頁面類型

2）然后調(diào)用 search.py 搜索腳本，在 data 目錄里進(jìn)行多維度搜索，找到適合的配色、字體、布局風(fēng)格

3）綜合搜索結(jié)果，生成完整的設(shè)計(jì)方案（主色調(diào)、字體組合、間距規(guī)范等）

4）最后，再按照設(shè)計(jì)方案生成代碼

這樣一來，生成的界面既專業(yè)又有設(shè)計(jì)感。

AI 不需要把所有規(guī)則都背下來，而是用到哪個(gè)查哪個(gè)，這就是 Agent Skills 的精髓。

創(chuàng)建自己的 Agent Skills

用了很多別人的技能后，你產(chǎn)生了一個(gè)大膽的想法：俺能不能把公司的周報(bào)格式封裝成一個(gè)技能？以后推薦給新來的同事，還能賣個(gè)幾塊錢，嘿嘿嘿~

魚皮笑道：有點(diǎn)兒東西，你打算怎么做呢？

你會心一笑：當(dāng)然是發(fā)揮程序員最擅長的事情 —— 復(fù)制粘貼！

俺先復(fù)制一個(gè)官方的技能包，修改目錄名稱為自己的。

然后修改技能說明文檔 SKILL.md 的元數(shù)據(jù)、指令內(nèi)容這些關(guān)鍵部分。

示例 SKILL.md 文件：

---
name: company-weekly-report
description: 生成符合公司規(guī)范的項(xiàng)目周報(bào)，包含進(jìn)度匯總、問題跟蹤和下周計(jì)劃
---

 # 公司周報(bào)生成技能

 當(dāng)用戶要求生成周報(bào)時(shí)，請按以下步驟執(zhí)行：

 ## 1. 收集信息
- 詢問本周完成的主要工作
- 詢問遇到的問題和解決方案
- 詢問下周計(jì)劃

 ## 2. 格式規(guī)范
- 使用公司藍(lán)色主題
- 標(biāo)題使用微軟雅黑加粗
- 每個(gè)模塊不超過 5 個(gè)要點(diǎn)

 ## 3. 輸出格式
- 默認(rèn)輸出 Markdown
- 如需 PPT，調(diào)用 pptx 技能

最后，把公司的 Logo、PPT 模板、報(bào)告樣例放在子文件夾里就行了。媽媽再也不用擔(dān)心我的周報(bào)了~

魚皮：不錯(cuò)不錯(cuò)，但其實(shí)有更簡單規(guī)范的方法。

在前面安裝的 example-skills 官方示例技能包里，有一個(gè)叫 Skill Creator 的技能，專門用來幫你創(chuàng)建新技能。

你只需要跟 AI 說：“幫我創(chuàng)建一個(gè)專門生成公司周報(bào)的技能”

接下來 AI 會問你幾個(gè)問題，一步一步回答就好：

• 你希望周報(bào)包含哪些主要部分？

• 你希望周報(bào)以什么格式輸出?

• 你通常會如何使用這個(gè)周報(bào)技能?

• 希望周報(bào)的語言風(fēng)格是什么?

很快，一個(gè)完整的技能包就生成了，你會看到一個(gè) .skill 為后綴的文件，本質(zhì)上是一個(gè) zip 壓縮包。

你可以把它解壓到你的個(gè)人技能目錄（~/.claude/skills/）下，你的所有項(xiàng)目都能用。

如果你想讓這個(gè)技能只在某個(gè)項(xiàng)目生效，可以把它放到項(xiàng)目的 .claude/skills/ 目錄下，并且利用 Git 同步給項(xiàng)目組其他成員。

測試沒問題后，你還可以把它開源到 GitHub，或者上傳到 Claude Skills Hub 這樣的社區(qū)平臺，讓所有用戶都能用。

Skills / MCP / 斜杠命令的區(qū)別

你開心極了：原來開發(fā)一個(gè) Skills 這么簡單！但是，這玩意兒跟之前火爆的 MCP 和斜杠命令有啥區(qū)別？

魚皮：好問題！

MCP 就像給 AI 裝上了 “手和眼睛”，讓 AI 能夠連接外部工具和數(shù)據(jù)源，比如搜索網(wǎng)頁、讀取代碼倉庫、查詢數(shù)據(jù)庫。適合需要獲取數(shù)據(jù)或操作外部系統(tǒng)的場景。

而 Agent Skills 更像是給 AI 發(fā)了一本 “工作手冊”，把專業(yè)知識和工作流程打包起來，教 AI 在特定領(lǐng)域該怎么做。

至于斜杠命令，它就像是快捷鍵，是需要你手動(dòng)輸入 /command 命令來觸發(fā)的固定操作；而 Skills 的特點(diǎn)是 AI 可以自動(dòng)識別該用什么技能，不需要你顯式調(diào)用。

對了，其實(shí) MCP 和 Skills 是可以結(jié)合起來的。

舉個(gè)例子，如果你想讓 AI 幫你發(fā)周報(bào)：

• MCP 負(fù)責(zé)獲取數(shù)據(jù)：從任務(wù)管理數(shù)據(jù)庫拉取這周的任務(wù)列表

• Skills 負(fù)責(zé)加工數(shù)據(jù)：把獲取到的原始數(shù)據(jù)整理成老板愛看的格式

一個(gè)提供食材，一個(gè)提供配方。

Agent Skills 憑什么大火？

你看著技能文件夾的結(jié)構(gòu)，突然怪叫一聲：等等，俺突然意識到一個(gè)問題…… 這不就是我們程序員玩爛的 “封裝、復(fù)用、模塊化、懶加載” 那一套嗎？

寫幾個(gè)代碼文件、打個(gè)包、發(fā)到網(wǎng)上，讓其他程序員下載下來用，不是一回事兒么？

為什么 Agent Skills 能突然讓整個(gè) AI 圈為之瘋狂？

魚皮：好問題，從技術(shù)的角度來看，它并沒有發(fā)明什么驚天動(dòng)地的算法。

在我看來，它能火主要是 2 個(gè)原因。

第一，它是開放標(biāo)準(zhǔn)，封裝一次技能包后就能在各種 AI 工具里復(fù)用，還能通過社區(qū)共享。

更重要的是，Skills 能立刻讓 AI 的工作更專業(yè)可靠，讓普通人 “無感” 地享受技術(shù)帶來的價(jià)值。以前想讓 AI 變聰明，你得學(xué)提示詞工程、配置各種工具鏈?，F(xiàn)在只需要像裝 APP 一樣安裝技能包，AI 就立刻變專業(yè)了。一項(xiàng)技術(shù)的成功，不在于它有多復(fù)雜，而在于它能讓普通用戶不關(guān)注技術(shù)細(xì)節(jié)的情況下，感受到技術(shù)的價(jià)值。

結(jié)尾

你點(diǎn)點(diǎn)頭：學(xué)會了學(xué)廢了！降低門檻，才是技術(shù)走向大眾的鑰匙。

魚皮：沒錯(cuò)，Agent Skills 不僅僅是個(gè)技術(shù)概念，更是一種新的工作方式。你可以把它融入到自己的日常工作中，比如把重復(fù)的任務(wù)封裝成技能、把團(tuán)隊(duì)的最佳實(shí)踐固化成技能，讓 AI 真正成為你的得力助手。

在這個(gè) Vibe Coding 盛行的年代，技術(shù)的門檻正在崩塌，而想象力的邊界正在無限擴(kuò)張。你可以在我免費(fèi)開源的中學(xué)到更多 AI 編程技巧，也歡迎關(guān)注我的賬號，學(xué)習(xí)更多 AI 和編程的技巧。

開源指路：https://github.com/liyupi/ai-guide

那么問題來了，你最想讓 AI 學(xué)會什么技能呢？

點(diǎn)擊下方關(guān)注魚皮，獲取免費(fèi)編程學(xué)習(xí)路線、簡歷模板、面試題解、AI 知識庫、項(xiàng)目教程、交流群。

一些對大家有用的資源：
100+ 編程學(xué)習(xí)路線 / 實(shí)戰(zhàn)項(xiàng)目 / 求職指導(dǎo)
100+ 簡歷模板
300+ 企業(yè)面試題庫 mianshiya.com
500+ AI 資源大全
1 對 1 模擬面試
動(dòng)畫學(xué)算法教程