前言¶
在文档、技术方案或汇报里补一张流程图或架构图，常见做法是交给大模型直接写 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
