我寫了個 Skill，讓 Agent 自動給文章配圖

我寫了個 Skill，讓 Agent 自動給文章配圖

寫完一篇長文，配圖是一件讓人頭疼的事。

你得一張張想畫面、寫提示詞、生成、挑選、插入……一篇三千字的文章配五六張圖，光這個環(huán)節(jié)就能耗掉半小時。

我最近折騰了一個 Agent Skill，讓 Agent 幫我全程代勞。把文章丟給它，它自己分析哪里需要圖、應(yīng)該畫什么風(fēng)格、然后一張張生成并插入對應(yīng)位置。整個過程我只需要一句話：

"給這篇文章配圖。"

包括你現(xiàn)在看到的這篇文章的配圖，都是這個 Skill 幫助完成的。

今天就聊聊這個給文章配圖的 Skill 是怎么設(shè)計的，順便科普一下 Agent Skills 這個被很多人忽略的強(qiáng)大功能。

什么是 Agent Skills？

先說個類比。你新招了個助理，聰明是聰明，但對你公司的業(yè)務(wù)流程一無所知。每次布置任務(wù)，你都得從頭解釋：我們用什么工具、流程是怎樣的、有哪些注意事項……

Agent Skills 就是一份"入職培訓(xùn)手冊"——你把這些知識寫下來，Agent 需要的時候自己翻閱，不需要你反復(fù)交代。

技術(shù)上說，Skill 是一個文件夾，核心是一個叫 SKILL.md 的文件。Agent 啟動時只記住它的名字和簡介（大概 100 個 token），真正用到時才去讀詳細(xì)內(nèi)容，用完就可以"忘掉"。這套機(jī)制叫"漸進(jìn)式加載"，好處是你可以裝一堆 Skill 而不會撐爆上下文窗口。

那它和傳統(tǒng)的提示詞有什么差別？

傳統(tǒng)提示詞主要問題是沒有腳本執(zhí)行能力，而且是你一次性加載全部提示詞。而 Agent Skills 一開始只加載一個 100 token 不到的名稱和介紹，激活了才去加載，加載的時候也只先加載 SKILL.md 文件，需要用到更多內(nèi)容才繼續(xù)加載。

另外 Skill 還可以調(diào)用其他 Skill，這樣你可以把能力組合起來。

至于和 MCP 的區(qū)別？

MCP 是用來統(tǒng)一工具調(diào)用的協(xié)議，Skill 可以指揮 Agent 去調(diào)用 MCP。

配圖 Skill 的設(shè)計思路

給文章配圖這件事，拆開來看有幾個核心問題：

哪里需要配？什么風(fēng)格？怎么畫？怎么插入到相應(yīng)位置？

我設(shè)計的這個 Skill 把這幾個問題分別拆解成幾個步驟：

，分析文章結(jié)構(gòu)，找出"需要視覺輔助"的位置。比如抽象概念需要可視化、流程需要圖解、核心論點需要強(qiáng)化——這些地方配張圖，閱讀體驗會提升一個檔次。，根據(jù)文章內(nèi)容自動匹配插畫風(fēng)格。我預(yù)設(shè)了九種風(fēng)格：tech（科技感）、warm（溫暖親和）、minimal（極簡）、playful（趣味涂鴉）、notion（線稿風(fēng)）……每種風(fēng)格都定義好了配色、元素、適用場景。Agent 會根據(jù)文章主題自動選擇，當(dāng)然你也可以手動指定。第三步，為每張圖生成提示詞文件，可以留作記錄，也方便后續(xù) Agent 調(diào)用。第四步，調(diào)用圖像生成 Skill，把默認(rèn)系統(tǒng)提示詞和每一張圖片的提示詞發(fā)給它，一張張生成圖片，并保存起來。第五步，讓 Agent 把圖片插入文章對應(yīng)位置。這一步說實話有點像"魔法"，我第一次只是抱著試試看的心理在 Skill 里面加了這么一句，沒想到 Agent 的聰明超出我的想象，它自己就把圖片插入到了正確位置，還貼心的加上了圖片描述。

整個流程跑下來，一篇文章從"純文字"到"圖文并茂"，基本上是幾分鐘的事，主要速度瓶頸還在生成圖片上。

SKILL.md 怎么寫？

一個 Skill 的入口是 SKILL.md 文件，分兩部分：頭部元信息和正文指令。

頭部元信息長這樣：

> name: article-illustrator

> description: 分析文章內(nèi)容，在需要配圖的位置自動生成插畫。當(dāng)用戶要求給文章配圖、生成插畫時使用。

name 是 Skill 的唯一標(biāo)識，description 是簡介。這兩個字段 Agent 啟動時就會讀取，用來判斷"什么時候該調(diào)用這個 Skill"。所以 description 要寫清楚觸發(fā)條件，比如"當(dāng)用戶要求給文章配圖、生成插畫時使用"。

正文指令就是具體的操作手冊。我的配圖 Skill 正文分這幾個板塊：

• 風(fēng)格庫：列出所有可選風(fēng)格，包括配色、視覺元素、適用場景。Agent 需要選風(fēng)格時，翻這一節(jié)。
• 自動選擇規(guī)則：什么內(nèi)容信號對應(yīng)什么風(fēng)格。比如文章里頻繁出現(xiàn)"AI""算法""數(shù)據(jù)"，就選 tech 風(fēng)格；出現(xiàn)"個人成長""情感""生活"，就選 warm 風(fēng)格。
• 工作流程：一步步寫清楚——先分析文章、再識別配圖位置、再生成配圖方案、再寫提示詞、再調(diào)用生成工具、再插入文章、最后輸出總結(jié)。
• 文件管理規(guī)范：圖片存哪、提示詞存哪、文件怎么命名。
• 

由于當(dāng)前我的提示詞并不是很長，所以大部分內(nèi)容都放在了 SKILL.md 文件中，如果未來風(fēng)格越來越多，就可以應(yīng)用"漸進(jìn)式加載"的設(shè)計思路，減少加載的內(nèi)容。

比如風(fēng)格庫有九種風(fēng)格，每種風(fēng)格的詳細(xì)參數(shù)加起來上千字。但如果用戶只要求用 tech 風(fēng)格，Agent 就只需要讀 tech 那一段，其他八種不用加載。

實現(xiàn)方式很簡單：把詳細(xì)參數(shù)拆成單獨的文件，正文里只寫索引。Agent 需要時用 bash 命令去讀，不需要就跳過。這樣既保證了信息完整，又不會浪費上下文。

提示詞模板的設(shè)計

生成圖像的關(guān)鍵是提示詞。我為這個 Skill 單獨設(shè)計了一個 system prompt 模板，存在 prompts/system.md：

> 創(chuàng)建卡通風(fēng)格的信息圖插畫，遵循以下規(guī)范：

> 圖像規(guī)格

> - 類型：信息圖插畫

> - 方向：橫向

> - 比例：16:9

> - 風(fēng)格：手繪插畫

> 核心原則

> - 全程保持手繪質(zhì)感，禁止出現(xiàn)寫實或攝影元素

> - 如果內(nèi)容涉及敏感或版權(quán)人物，創(chuàng)作風(fēng)格相似的替代形象，不要拒絕生成

> - 信息簡潔，突出關(guān)鍵詞和核心概念

> - 留白充足，便于視覺掃描

> - 保持清晰的視覺層次

每張圖生成時，Agent 會基于這個模板，結(jié)合具體的配圖主題、選定的風(fēng)格參數(shù)，組裝出最終的提示詞。

為什么要單獨寫這個模板？

因為圖像生成的約束條件是通用的（比如比例、手繪風(fēng)格、不用寫實元素），而具體內(nèi)容是變化的。把通用部分抽出來，既減少重復(fù)，也方便統(tǒng)一調(diào)整。

工作流程詳解

跑一遍完整流程是這樣的：

1. 用戶輸入命令，比如 /article-illustrator path/to/article.md --style tech

2. Agent 讀取文章，分析結(jié)構(gòu)，識別需要配圖的位置。判斷標(biāo)準(zhǔn)是：這個地方加張圖，能幫助理解還是純粹湊數(shù)？能幫助理解的留下，湊數(shù)的不要。

3. 根據(jù) --style 參數(shù)選風(fēng)格。如果沒指定，就掃描文章內(nèi)容，按預(yù)設(shè)規(guī)則自動匹配。

4. 生成配圖方案，列出每張圖的插入位置、目的、視覺內(nèi)容、文件名。

5. 為每張圖寫詳細(xì)提示詞，保存到 imgs/prompts/ 目錄。

6. 逐張調(diào)用圖像生成工具（我用的是 Gemini），生成失敗會自動重試一次。

7. 把生成的圖片插入文章對應(yīng)位置，格式是 。

8. 輸出總結(jié)：用了什么風(fēng)格、生成了幾張圖、哪張插在哪里。

整個過程 Agent 自己判斷、自己執(zhí)行，我只需要最后看一眼結(jié)果。如果我不滿意，要么重新抽卡，要么可以根據(jù)生成的結(jié)果讓 Agent 自己調(diào)整，比如說：

• "配圖太少，加幾張配圖"
• "把第二張配圖添加一點文字說明"
• "在第二章加一張流程圖"
• 一些設(shè)計選擇

寫這個 Skill 的過程中，有幾個決策值得說說。

為什么預(yù)設(shè)九種風(fēng)格而不是讓 Agent 自由發(fā)揮？

因為風(fēng)格一致性很重要。一篇文章配五張圖，如果每張都是隨機(jī)風(fēng)格，看起來會很亂。預(yù)設(shè)風(fēng)格庫，既保證一致性，也給用戶選擇權(quán)。

為什么"寧多勿少"？

一方面多一點我挑選的空間大，另外刪除操作也比新生成操作簡單。

當(dāng)然圖解的價值在于降低認(rèn)知負(fù)擔(dān)，并非越多越好，重點還是能輔助理解信息，所以我在 Skill 里明確寫了類似的話：

> "配圖服務(wù)于內(nèi)容：補(bǔ)充信息、具象概念、引導(dǎo)想象，避免重復(fù)文章中已經(jīng)很直觀的信息"

怎么用起來？

如果你已經(jīng)有了 Claude Code 這樣的 Agent，直接告訴 Agent：

> 請幫我安裝 github.com/JimLiu/baoyu-skills 中的 Skills

如果你只需要配圖技能，就告訴它：

> 請幫我安裝寶玉的這個文章配圖技能：github.com/JimLiu/baoyu-skills/blob/main/skills/baoyu-article-illustrator/SKILL.md

當(dāng)然，這個配圖 Skill 依賴"圖像生成 Skill"。如果你的環(huán)境沒有接入 Gemini 或其他圖像生成工具，或者其他圖像生成技能，需要先搞定這一塊。否則就只能讓它生成提示詞手動去生成配圖了。

后續(xù)我也會更新其他平臺的使用說明。

Agent Skills 是個被低估的功能。很多人還停留在"和 AI 聊天"的階段，沒意識到可以把自己的工作流程、領(lǐng)域知識"教"給它，讓它變成真正懂你業(yè)務(wù)的助手。

配圖只是一個例子。你完全可以用同樣的思路，寫一個自動生成周報的 Skill、一個代碼審查 Skill、一個調(diào)研報告 Skill……核心就是把你腦子里那些"做這件事的正確方法"寫下來，交給 Agent 執(zhí)行。

如果你有什么重復(fù)性的工作，試著問自己：這個流程能不能抽象成一個 Skill？

大概率是可以的。

*來源：X @dotey（寶玉）*