前言¶
在文檔、技術方案或彙報裏補一張流程圖或架構圖，常見做法是交給大模型直接寫 SVG，或從 Mermaid 導出後再手改。生成結果往往出現節點錯位、箭頭不對齊、配色雜亂、文字溢出畫布等問題；若要「按規範」檢查，又得自己列清單逐項對照。
下面介紹 SkillHub 上的 SVG圖示製作專家（座標 @user_82fbf76f/svgbuilder）。它把圖示類型、座標規劃、可量化規則與生成後自檢寫進 Skill，讓 Agent 在畫圖、修圖或評審時有一致依據，而不依賴用戶每次重複說明版式要求。
這是什麼¶
SVG圖示製作專家 是社區來源（community）的 Agent Skill，當前版本 1.2.0，分類爲 design-media，由發佈者 user_82fbf76f 維護。標籤標明 requires_api_key=false，安裝後無需額外 API Key。
一句話定位：按內置設計規範 生成 與 審查 SVG 圖示，覆蓋流程圖、架構圖、閉環/循環圖、維恩圖、表格圖等形態；並強調在用戶要畫、生成、修復或評審相關圖示，或檢查對齊、連線、箭頭、配色、文字排版時，Agent 應主動啓用本 Skill——即用戶未明說「按規範」或「用 svgbuilder」也應適用。
官方入口：
- SkillHub 頁面：https://www.skillhub.cn/skills/user_82fbf76f/svgbuilder
- API 地址：https://api.skillhub.cn/user_82fbf76f/svgbuilder
核心功能¶
以下能力均來自 SkillHub 公開簡介，可與頁面對照。
圖示類型¶
支持按規範產出或審查的 SVG 類型包括：
- 流程圖
- 架構圖
- 閉環 / 循環圖（含 PDCA 等循環結構）
- 維恩圖
- 表格圖 / 對照表
規範與流程¶
簡介中明確提到三塊機制：
- 座標規劃：在落筆 SVG 前規劃佈局與座標，減少後期大面積挪動。
- 35 條可量化規則：用可檢查的條目約束對齊、連線、箭頭、配色、文字排版等，便於生成與審查時對照。
- 生成後三輪自檢與案例自動積累：生成完成後按 Skill 約定做多輪自檢；合格案例可沉澱，供後續同類任務參考。
審查維度¶
除「從零生成」外，Skill 面向 修復 與 評審 已有 SVG，檢查項與生成側一致，例如對齊、連線、箭頭、配色、文字排版等。
安裝與啓用¶
SkillHub 頁面給出的安裝指引是：讓 Agent 閱讀 SkillHub 安裝文檔，並安裝座標 @user_82fbf76f/svgbuilder。
1、確認 skillhub CLI¶
先檢查本機是否已有 CLI：
command -v skillhub && skillhub --version
若未安裝，可按安裝文檔執行完整安裝（CLI + 默認 Skill）或僅安裝 CLI：
# 完整安裝（CLI + 默認 Skill，推薦）
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
# 僅安裝 CLI
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安裝到當前 Agent 的 skills 目錄¶
安裝技能時必須用 --dir 指向當前 Agent 實際使用的 skills 目錄；默認裝到 ./skills/ 可能不會被識別。安裝文檔中列出的常見路徑如下：
| 環境 | skills 目錄 |
|---|---|
| Claude Code | ~/.claude/skills/ |
| Cursor | ~/.cursor/skills/ |
| Codex | ~/.codex/skills/ 或項目下的 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
在 Cursor 中安裝本 Skill 的示例：
skillhub install @user_82fbf76f/svgbuilder --dir ~/.cursor/skills/
也可先搜索再安裝：
skillhub search svgbuilder
skillhub install @user_82fbf76f/svgbuilder --dir ~/.cursor/skills/
安裝完成後，按你所用客戶端的要求重啓或刷新 Agent，使 Skill 被加載。
典型用法¶
公開資料未附帶固定腳本或示例倉庫；用法體現在 Skill 的觸發說明與你在對話中的任務描述。下面是與簡介一致、可復現的交互方式。
生成新圖¶
向 Agent 說明圖示類型與內容，例如：
- 「用 SVG 畫一張三層微服務架構圖：網關、業務服務、數據層，箭頭標清調用方向。」
- 「生成 PDCA 循環的 SVG 閉環圖，四個階段各有一句說明。」
Agent 在加載本 Skill 後，應結合座標規劃與 35 條規則生成 SVG，並完成三輪自檢。
修復或評審已有 SVG¶
把現有 SVG 代碼或文件交給 Agent，並說明意圖：
- 「按規範檢查這段 SVG 流程圖的對齊和箭頭。」
- 「修復這張架構圖裏文字壓線、連線交叉的問題，輸出完整 SVG。」
即使未寫「按規範」或「svgbuilder」，Skill 說明仍要求 Agent 在此類場景下啓用本 Skill。
安裝提示詞（官方頁面原文）¶
SkillHub 頁面提供的安裝提示爲：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_82fbf76f/svgbuilder`。
可將上述句子直接發給支持 Skill 的 Agent，由其按文檔完成安裝。
適用場景與注意¶
適合誰
- 需要在 Markdown、幻燈片或網頁中嵌入 可編輯、可縮放 的 SVG，又不想每次手寫座標。
- 希望架構圖、流程圖、維恩圖、對照表在 對齊、連線、配色、字體 上有一致標準，並願意讓 Agent 按規則自檢。
- 已有粗糙 SVG，需要 結構化評審或修補，而不是重新用位圖重畫。
注意
- 圖示質量依賴 Agent 是否已正確安裝並加載 Skill；
--dir必須指向當前客戶端的 skills 目錄。 - SkillHub 頁面展示的評分爲 100000，下載 1503（統計以 SkillHub 爲準，會隨時間變化）。
- 本 Skill 不依賴 API Key；若你同時使用其他需密鑰的 Skill，勿混淆配置。
- 複雜業務圖仍需你在對話中寫清節點、關係與文案；Skill 約束的是 版式與規範，不替代需求澄清。
結尾¶
SVG圖示製作專家 把「畫什麼類型的 SVG」和「怎樣纔算合格」寫進 Agent Skill：座標規劃、35 條可量化規則、生成後三輪自檢與案例積累，覆蓋從生成到審查的完整路徑。若你經常在 Cursor、Claude Code 等環境裏讓模型出圖或改圖，可通過 SkillHub 安裝 @user_82fbf76f/svgbuilder（v1.2.0）。
- SkillHub：https://www.skillhub.cn/skills/user_82fbf76f/svgbuilder
- 安裝說明：https://skillhub.cn/install/skillhub.md
