你是小阿巴,正在用 AI 開發(fā)網(wǎng)站。
為了讓 AI 生成的效果更好,你告訴 AI:
界面不要使用藍紫漸變色
不要生成一大堆沒用的文檔
你要遵循公司的代碼規(guī)范
阿巴阿巴,洋洋灑灑幾百字。
![]()
之后每次開發(fā)網(wǎng)站時,你都要寫這么一段又臭又長的提示詞,太麻煩了!
于是聰明的你開始想辦法。
先把常用的提示詞保存到單獨的文件(比如prompts.md),每次手動投喂給 AI。
![]()
然后創(chuàng)建了資源文件夾,把公司的代碼規(guī)范、設(shè)計素材都塞進去,告訴 AI 參考這些寫。
![]()
接著你還寫了一些腳本,讓 AI 生成代碼后自動執(zhí)行格式化、運行測試、提交代碼到 Git。
![]()
最后我再寫個AGENTS.md文件,把所有規(guī)范和工作流程都寫進去,讓 AI 自動讀取。
你沾沾自喜:嘿嘿,俺這套工作流,堪稱完美!
![]()
但很快,你發(fā)現(xiàn)了問題,隨著規(guī)范越寫越多,文檔越來越臃腫,每次對話都要占用很多 AI 上下文空間,浪費 tokens。
![]()
于是你找到號稱 “沒有人比他更不懂 AI” 的魚皮求助:阿巴阿巴,俺還能咋辦啊……
魚皮:不是有 Agent Skills 么?為啥不直接用?
你一臉懵:啥玩意兒?
魚皮:這可是最近 AI 圈兒爆火的技術(shù),下面我來帶你玩轉(zhuǎn) Agent Skills,讓你知道它是什么、怎么用、有什么魔力、怎么自己開發(fā)。
點個收藏,我們開始~
![]()
?? 推薦觀看視頻動畫版,更通俗易懂:https://bilibili.com/video/BV1T7zzBQEaA
什么是 Agent Skills?
Agent Skills 是 Anthropic 推出的 一套開放標準,目的是讓 AI 能夠?qū)W習(xí)使用各種專業(yè)技能,而不用每次都重復(fù)輸入提示詞。
![]()
簡單來說,它就是給 AI 裝備的技能包。技能包里有精心設(shè)計的提示詞、代碼腳本、還有各種資源文件。
![]()
把 AI 想象成一個職場小白,給他裝上文檔處理技能,它就立刻知道怎么生成 PPT、處理 Excel 表格;裝上代碼規(guī)范技能,它就知道怎么按照公司標準寫代碼。
![]()
你撓撓頭:等等…… 這不就是俺在做的事嗎?把教 AI 做事的文檔和 AI 要用到的文件打包成文件夾?
![]()
魚皮:差不多,但 Anthropic 把它做成了一個通用標準,而且在實現(xiàn)原理上有一些新花樣……
你捶胸頓足:可惡啊,俺差點就改變世界了!這能有什么新花樣?
![]()
魚皮:我先來帶你用一下 Agent Skills,再跟你說說其中的奧秘。
Agent Skills 入門實戰(zhàn)
目前對 Agent Skills 支持最完善的工具是 Anthropic 官方的 Claude Code,我們就以此為例,安裝并使用 Skills。
![]()
1、安裝 Skills 技能
先打開 Claude Code 并輸入命令,添加官方技能市場:
/plugin marketplace add anthropics/skills![]()
這就像是在你的 AI 助手里開通了一個技能商店,接下來你就可以從商店中獲取技能了。
![]()
在 Claude Code 中輸入命令,安裝官方提供的技能包:
/plugin install example-skills@anthropic-agent-skills![]()
這個 example-skills 包含了一堆官方示例技能,包括前端設(shè)計、網(wǎng)頁測試、動圖制作等等。
![]()
裝完之后,你就可以直接讓 AI 使用這些技能了。
2、前端設(shè)計技能
比如你要做一個網(wǎng)站,以前沒裝技能的時候,AI 生成的代碼又是那個熟悉的藍紫漸變色,千篇一律的 AI 審美。
![]()
現(xiàn)在安裝了 frontend-design 這個教 AI 生成專業(yè)設(shè)計感網(wǎng)站的技能后,你輸入:“幫我開發(fā)個人作品集網(wǎng)站”。
AI 會主動問你:我發(fā)現(xiàn)你安裝了前端設(shè)計技能,需要用它來生成更具設(shè)計感的頁面嗎?
![]()
確認之后,AI 會利用技能生成代碼,告別藍紫漸變,生成獨特風(fēng)格的精美頁面。
![]()
我們不用每次都給 AI 輸入一大堆相同的提示詞,裝一次技能就行了。
3、文檔處理技能
除了代碼相關(guān)的技能,官方還提供了文檔處理技能包。
![]()
同樣在 Claude Code 中輸入一行命令安裝:
/plugin install document-skills@anthropic-agent-skills![]()
這個技能包里有 PPT 制作、Word 文檔生成、Excel 數(shù)據(jù)分析、PDF 解析等技能。
![]()
接下來如果你讓 AI 做個 PPT,它會自動調(diào)用 PPT 制作技能,直接生成排版好的 PPT 文件,幫你節(jié)省幾個小時。
![]()
![]()
揭秘 Agent Skills 內(nèi)部原理
你好奇道:咦,為什么 Skills 能做到安裝即用?技能包里面到底有啥?AI 又是怎么知道該用哪個技能的?
魚皮:好問題。技能 其實就是一個包含SKILL.md技能說明文件的文件夾,還可以包含可執(zhí)行腳本、資源和參考文檔。
my-skill/
├── SKILL.md # 必需:指令和元數(shù)據(jù)
├── scripts/ # 可選:可執(zhí)行腳本
├── references/ # 可選:參考文檔
└── assets/ # 可選:模板和資源![]()
由于每個技能的復(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 # 許可證
包含一個核心的技能說明文檔SKILL.md,還有腳本、參考文檔和各種資源文件。
![]()
而 frontend-design 前端設(shè)計技能只有一個SKILL.md文件。
![]()
SKILL.md文件是每個技能的核心,它包含兩個關(guān)鍵部分。
第一部分是元數(shù)據(jù),用 YAML 格式寫在文件開頭:
---
name:frontend-design
description:生成具有專業(yè)設(shè)計感的前端代碼,避免千篇一律的AI審美
---
其中 name是技能的名字。description是技能的描述,告訴 AI 什么時候應(yīng)該使用這個技能。描述寫得越清晰,AI 就越容易在合適的時機調(diào)用它。
![]()
第二部分是指令內(nèi)容,就是一套經(jīng)過精心設(shè)計的提示詞,指導(dǎo) AI 具體怎么做。
以 frontend-design 技能為例,它的指令內(nèi)容包括:
設(shè)計思考:在寫代碼前,先分析產(chǎn)品目的、用戶群體、技術(shù)約束,然后選擇一個大膽的美學(xué)方向(極簡、復(fù)古未來、工業(yè)風(fēng)、有機自然、奢華精致等)
前端美學(xué)指南:包括字體選擇(避免 Arial、Inter 等爛大街字體,選擇有個性的組合)、配色主題(主色調(diào)配鮮明點綴色)、動效設(shè)計、空間構(gòu)成、背景和視覺細節(jié)
避坑指南:明確禁止紫色漸變、系統(tǒng)字體、千篇一律的布局等 AI 審美陷阱
![]()
你撓了撓頭:如果有多個 SKills,AI 怎么知道該用哪個技能呢?如果把每個技能說明文檔都塞給 AI,不是很占用上下文么?
魚皮:這就要說到漸進式披露(Progressive Disclosure)這個核心機制了。
當你讓 AI 執(zhí)行任務(wù)時,它會先掃描技能目錄,但不會把所有內(nèi)容都加載到上下文中。而是只讀取每個技能的元數(shù)據(jù)(名字和描述),發(fā)現(xiàn)描述和任務(wù)相關(guān),就知道該用這個技能了。
![]()
然后才把完整的技能說明文檔讀進來,按照里面的指令執(zhí)行:
![]()
并根據(jù)需要加載技能包中的其他資源:
![]()
用到哪個查哪個,既精準匹配又節(jié)省上下文,這就是漸進式披露的精髓。
所以 Agent Skills 的本質(zhì)就是把專業(yè)知識打包成一個文件夾,讓 AI 按需讀取并使用。
![]()
跨工具的 Agent Skills
你問:除了 Claude Code 之外,其他 AI 工具支持 Agent Skills 么?俺平時用 Cursor 比較多……
魚皮:當然能!Agent Skills 已經(jīng)成為通用標準,Cursor、VS Code、Codex 等工具都支持。
![]()
Skills 的社區(qū)也非常活躍,你可以在 Claude Skills Hub 市場、開源的 Awesome Claude Skills 等地方找到很多現(xiàn)成的技能。
![]()
比如有個叫 UI UX Pro MAX 的技能特別火,專門用于提升 AI 的設(shè)計能力。
![]()
用法很簡單,首先按照 開源倉庫文檔 的指引,安裝官方提供的命令行工具:
npm install -g uipro-cli![]()
然后進入到你的項目目錄下,根據(jù)使用的 AI 工具執(zhí)行對應(yīng)的命令。比如我這里用 Cursor:
uipro init --ai cursor![]()
它會自動把技能安裝到 Cursor 的配置目錄里。
![]()
安裝完成后,可以看到它的文件結(jié)構(gòu):
![]()
接下來,當你讓 AI 開發(fā)一個網(wǎng)站時,可以使用斜杠命令手動觸發(fā)技能,或者讓 AI 自動識別技能。
![]()
1)AI 會根據(jù)你的需求識別出產(chǎn)品類型和需要的頁面類型
![]()
2)然后調(diào)用search.py搜索腳本,在 data 目錄里進行多維度搜索,找到適合的配色、字體、布局風(fēng)格
![]()
3)綜合搜索結(jié)果,生成完整的設(shè)計方案(主色調(diào)、字體組合、間距規(guī)范等)
![]()
4)最后,再按照設(shè)計方案生成代碼
![]()
這樣一來,生成的界面既專業(yè)又有設(shè)計感。
![]()
AI 不需要把所有規(guī)則都背下來,而是用到哪個查哪個,這就是 Agent Skills 的精髓。
創(chuàng)建自己的 Agent Skills
用了很多別人的技能后,你產(chǎn)生了一個大膽的想法:俺能不能把公司的周報格式封裝成一個技能?以后推薦給新來的同事,還能賣個幾塊錢,嘿嘿嘿~
魚皮笑道:有點兒東西,你打算怎么做呢?
你會心一笑:當然是發(fā)揮程序員最擅長的事情 —— 復(fù)制粘貼!
![]()
俺先復(fù)制一個官方的技能包,修改目錄名稱為自己的。
然后修改技能說明文檔SKILL.md的元數(shù)據(jù)、指令內(nèi)容這些關(guān)鍵部分。
![]()
示例SKILL.md文件:
---
name: company-weekly-report
description: 生成符合公司規(guī)范的項目周報,包含進度匯總、問題跟蹤和下周計劃
---
# 公司周報生成技能
當用戶要求生成周報時,請按以下步驟執(zhí)行:
## 1. 收集信息
-詢問本周完成的主要工作
-詢問遇到的問題和解決方案
-詢問下周計劃
## 2. 格式規(guī)范
-使用公司藍色主題
-標題使用微軟雅黑加粗
-每個模塊不超過 5 個要點## 3. 輸出格式
-默認輸出 Markdown
-如需 PPT,調(diào)用 pptx 技能
最后,把公司的 Logo、PPT 模板、報告樣例放在子文件夾里就行了。媽媽再也不用擔(dān)心我的周報了~
![]()
魚皮:不錯不錯,但其實有更簡單規(guī)范的方法。
在前面安裝的 example-skills 官方示例技能包里,有一個叫Skill Creator的技能,專門用來幫你創(chuàng)建新技能。
![]()
你只需要跟 AI 說:“幫我創(chuàng)建一個專門生成公司周報的技能”
接下來 AI 會問你幾個問題,一步一步回答就好:
你希望周報包含哪些主要部分?
你希望周報以什么格式輸出?
你通常會如何使用這個周報技能?
希望周報的語言風(fēng)格是什么?
![]()
很快,一個完整的技能包就生成了,你會看到一個.skill為后綴的文件,本質(zhì)上是一個 zip 壓縮包。
![]()
你可以把它解壓到你的個人技能目錄(~/.claude/skills/)下,你的所有項目都能用。
![]()
![]()
如果你想讓這個技能只在某個項目生效,可以把它放到項目的.claude/skills/目錄下,并且利用 Git 同步給項目組其他成員。
![]()
![]()
測試沒問題后,你還可以把它開源到 GitHub,或者上傳到 Claude Skills Hub 這樣的社區(qū)平臺,讓所有用戶都能用。
![]()
Skills / MCP / 斜杠命令的區(qū)別
你開心極了:原來開發(fā)一個 Skills 這么簡單!但是,這玩意兒跟之前火爆的 MCP 和斜杠命令有啥區(qū)別?
魚皮:好問題!
MCP 就像給 AI 裝上了 “手和眼睛”,讓 AI 能夠連接外部工具和數(shù)據(jù)源,比如搜索網(wǎng)頁、讀取代碼倉庫、查詢數(shù)據(jù)庫。適合需要獲取數(shù)據(jù)或操作外部系統(tǒng)的場景。
![]()
而 Agent Skills 更像是給 AI 發(fā)了一本 “工作手冊”,把專業(yè)知識和工作流程打包起來,教 AI 在特定領(lǐng)域該怎么做。
![]()
至于斜杠命令,它就像是快捷鍵,是需要你手動輸入/command命令來觸發(fā)的固定操作;而 Skills 的特點是 AI 可以自動識別該用什么技能,不需要你顯式調(diào)用。
![]()
對了,其實 MCP 和 Skills 是可以結(jié)合起來的。
舉個例子,如果你想讓 AI 幫你發(fā)周報:
MCP 負責(zé)獲取數(shù)據(jù):從任務(wù)管理數(shù)據(jù)庫拉取這周的任務(wù)列表
Skills 負責(zé)加工數(shù)據(jù):把獲取到的原始數(shù)據(jù)整理成老板愛看的格式
一個提供食材,一個提供配方。
![]()
Agent Skills 憑什么大火?
你看著技能文件夾的結(jié)構(gòu),突然怪叫一聲:等等,俺突然意識到一個問題…… 這不就是我們程序員玩爛的 “封裝、復(fù)用、模塊化、懶加載” 那一套嗎?
![]()
寫幾個代碼文件、打個包、發(fā)到網(wǎng)上,讓其他程序員下載下來用,不是一回事兒么?
![]()
為什么 Agent Skills 能突然讓整個 AI 圈為之瘋狂?
魚皮:好問題,從技術(shù)的角度來看,它并沒有發(fā)明什么驚天動地的算法。
在我看來,它能火主要是 2 個原因。
第一,它是開放標準,封裝一次技能包后就能在各種 AI 工具里復(fù)用,還能通過社區(qū)共享。
![]()
更重要的是,Skills 能立刻讓 AI 的工作更專業(yè)可靠,讓普通人 “無感” 地享受技術(shù)帶來的價值。以前想讓 AI 變聰明,你得學(xué)提示詞工程、配置各種工具鏈。現(xiàn)在只需要像裝 APP 一樣安裝技能包,AI 就立刻變專業(yè)了。一項技術(shù)的成功,不在于它有多復(fù)雜,而在于它能讓普通用戶不關(guān)注技術(shù)細節(jié)的情況下,感受到技術(shù)的價值。
![]()
結(jié)尾
你點點頭:學(xué)會了學(xué)廢了!降低門檻,才是技術(shù)走向大眾的鑰匙。
魚皮:沒錯,Agent Skills 不僅僅是個技術(shù)概念,更是一種新的工作方式。你可以把它融入到自己的日常工作中,比如把重復(fù)的任務(wù)封裝成技能、把團隊的最佳實踐固化成技能,讓 AI 真正成為你的得力助手。
在這個 Vibe Coding 盛行的年代,技術(shù)的門檻正在崩塌,而想象力的邊界正在無限擴張。你可以在我免費開源的中學(xué)到更多 AI 編程技巧,也歡迎關(guān)注我的賬號,學(xué)習(xí)更多 AI 和編程的技巧。
開源指路:https://github.com/liyupi/ai-guide
那么問題來了,你最想讓 AI 學(xué)會什么技能呢?
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺“網(wǎng)易號”用戶上傳并發(fā)布,本平臺僅提供信息存儲服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.