Claude 终于能画「教材级」插图了！这个开源 Skill 让 AI 秒变插画师

Claude 终于能画「教材级」插图了！这个开源 Skill 让 AI 秒变插画师

你们有没有发现，AI 生成的图片大多数时候是这样的：光影华丽、质感炸裂、但一看就是「AI 味」十足，放到 PPT 或文档里格格不入。

今天挖到的这个 Skill 解决的就是这个问题——不是生成逼真的照片级图片，而是生成干净、精准、像教科书里那种扁平极简风格的 SVG 示意图。

它能做什么？

这个 Skill 叫 concept-diagrams，来自 24 万星的开源项目 Hermes Agent。

核心功能就一件事：把你描述的任何概念、流程、原理，用干净的 SVG 画成 HTML 文件，直接浏览器打开就能用。

适用的场景巨广：

• 🧬 理工科原理图：电路图、力学分析、化学反应式、细胞结构
• 🔬 物理/生物装置：实验装置示意图、人体器官、交叉剖面图
• 📐 工程图纸：机械零件俯视图、建筑平面图
• 🗺️ 系统拓扑图：IoT 网络、电力网、智能城市架构
• 📊 数据图表：分组柱状图、能量曲线图
• 📖 流程/生命周期：某产品的生产流程、X 的生命周期

风格长什么样？

看名字就知道了——概念图，不是艺术创作。

它的设计系统有严格规范：

• 扁平：无渐变、无阴影、无发光效果
• 极简：只展示最核心的元素，不堆砌装饰
• 自动暗黑模式：同一个 HTML 文件，亮暗主题自适应
• 配色有讲究：9 套色板，每种颜色代表一种语义类别（比如所有「用户」节点用灰色，所有「数据」节点用蓝色）

说白了，它产出的是可以放进白皮书、教材、Wiki、PPT 的专业配图，而不是海报级别的艺术创作。

怎么安装使用？

在 Claude Code 或任意支持 Skills 的 AI 编程工具里：

npx skills add https://github.com/NousResearch/hermes-agent --skill concept-diagrams

装完之后，告诉它你想画什么，比如：

画一个光合作用过程的示意图，包含叶绿体、阳光、二氧化碳和氧气

它会生成一个 .html 文件，浏览器打开就是一张干净的 SVG 示意图。

实际体验

我用「水的三态变化」测试了一下——AI 生成的 HTML 文件里，冰块、水滴、水蒸气各自用不同颜色标注，状态箭头清晰，整体风格有点像高中化学教材的插图风格，放到 PPT 里完全不违和。

对比 Midjourney 或 DALL·E 生成的图：那些图适合做封面、做海报；这个 Skill 产的图适合做说明、做解析、做流程。两者是互补关系，不是替代关系。

GitHub 仓库：https://github.com/NousResearch/hermes-agent

想给 Claude 装备一个「画示意图」的能力？戳上方链接找到 optional-skills/creative/concept-diagrams 目录，一行命令装好。

GitHub: https://github.com/NousResearch/hermes-agent