# 信息图到生成艺术：视觉输出八引擎Skills实测 在Claude Code的Skills生态中，有一类Skill不写业务逻辑、不搭后端服务、不碰数据库——它们唯一的使命是把信息变成眼睛能看的东西。图表、信息图、架构图、演示文稿、知识卡片、生成艺术……这些"视觉输出层"Skill正在快速扩张，从最初的Mermaid代码块渲染，进化到独立的HTML/SVG成品输出。本文实测八款定位各异的视觉输出Skill，评估它们能否真正替代手动打开Figma或Keynote的那一刻。 ## 评测总览 八款Skill横跨图表生成、信息图设计、架构可视化、演示文稿、知识卡片和生成艺术六个细分方向。它们的共同特征是：输入文本/数据，输出可直接使用的视觉文件（HTML、SVG、JSON）。差异在于输出质量的天花板、学习曲线的陡峭程度、以及能否在30秒内产出"可交付"成果。 | Skill | 来源 | 输出格式 | 定位 | 综合评分 | |-------|------|---------|------|---------| | chart-craft | baoyu-skills | HTML | 10种图表类型，专业排版 | ★★★★☆ | | chart-craft-plus | baoyu-skills | HTML | 35+种图表，含战略/数据可视化 | ★★★★★ | | baoyu-infographic | baoyu-skills | HTML/SVG | 21布局×20风格信息图 | ★★★★★ | | excalidraw-diagram | coleam00 | Excalidraw JSON | 手绘风格架构图 | ★★★★☆ | | frontend-slides | zarazhangrui | HTML | 动画演示文稿 | ★★★★☆ | | architecture-diagram-zh | 社区 | HTML(SVG) | 深色/浅色双主题架构图 | ★★★★☆ | | algorithmic-art | Anthropic官方 | HTML(p5.js) | 生成艺术/视觉实验 | ★★★☆☆ | | knowledge-card-pro | 社区 | HTML/MP4 | 知识卡片短视频 | ★★★★☆ | ## 逐个深度评测 ### 1. chart-craft：专业图表的"开箱即用"标杆 **来源：** baoyu-skills（JimLiu） | **安装：** `npx skills add baoyu-skills/chart-craft` chart-craft是baoyu-skills仓库中的图表生成Skill，支持流程图、架构图、ER图、商业模式画布、用户旅程图、思维导图、竞品分析图等10种图表类型。输出为独立HTML文件，内嵌CSS动画和交互效果。 **核心功能演示：** 输入一段产品需求描述，chart-craft能自动判断最适合的图表类型。例如描述"用户从注册到付费的转化漏斗"，它会生成用户旅程图而非简单流程图。HTML输出自带响应式布局，直接浏览器打开即可使用。 **维度评分：** - 功能完整度 ★★★★（10种图表覆盖主流需求，缺少甘特图和燃尽图） - 上手难度 ★★★★★（零配置，自然语言输入即可） - 变现潜力 ★★★★（可封装为SaaS报表服务，月费$19-$49区间） - 训练营适用性 ★★★★（1小时可掌握全部图表类型） - 社区活跃度 ★★★★（baoyu-skills仓库持续更新） **与竞品对比：** 相比Mermaid代码块渲染，chart-craft的HTML输出在设计感上有质的飞跃。但与chart-craft-plus相比，图表类型数量偏少，缺少桑基图、雷达图等高级类型。 ### 2. chart-craft-plus：图表生成的"全家桶" **来源：** baoyu-skills（JimLiu） | **安装：** `npx skills add baoyu-skills/chart-craft-plus` chart-craft-plus是chart-craft的扩展版，将图表类型从10种扩展到35+种，新增覆盖技术架构、流程逻辑、业务战略、数据可视化、信息图五大领域。其核心升级在于引入了"图表推荐引擎"——用户描述需求后，Skill自动从35+种模板中匹配最佳图表类型。 **核心功能演示：** 测试中输入"展示微服务架构中各服务间的依赖关系和数据流向"，chart-craft-plus生成了包含服务节点、数据流箭头、区域划分的架构图，配色采用深色主题，节点间有动态连线动画。输出为单HTML文件，约150KB。 **维度评分：** - 功能完整度 ★★★★★（35+种图表几乎覆盖所有可视化场景） - 上手难度 ★★★★（需要了解图表类型名称以精准控制输出） - 变现潜力 ★★★★★（可做企业级数据可视化平台，月费$49-$199） - 训练营适用性 ★★★★（2小时完整教学，含高级图表定制） - 社区活跃度 ★★★★（同baoyu-skills主仓库，Star数2k+） **与竞品对比：** 这是目前Claude Code生态中图表类型最全的Skill。唯一的代价是Skill文件体积较大（约45KB SKILL.md），加载时会消耗较多context window。 ### 3. baoyu-infographic：信息图的工业化生产线 **来源：** baoyu-skills（JimLiu） | **安装：** `npx skills add baoyu-skills/baoyu-infographic` baoyu-infographic是本次评测中"成品感"最强的Skill。它支持21种布局模板和17种视觉风格，输入一段文本后可生成出版级信息图。布局类型包括时间线、对比、流程、数据展示、列表等；风格涵盖扁平、渐变、极简、科技感等。 **核心功能演示：** 输入一段关于"5G网络架构演进"的技术描述，指定"科技风格+时间线布局"，生成的HTML信息图包含渐变背景、图标装饰、分段文字说明和数据标注，视觉完成度接近专业设计师2小时的手工产出。 **维度评分：** - 功能完整度 ★★★★★（21×17=357种布局×风格组合） - 上手难度 ★★★★★（自然语言描述+可选风格参数） - 变现潜力 ★★★★★（可直接做信息图SaaS，$9.9/张或$29/月订阅） - 训练营适用性 ★★★★★（30分钟入门，1小时精通） - 社区活跃度 ★★★★（知乎等中文社区讨论度高） **与竞品对比：** 在信息图赛道几乎没有直接竞品。Canva和Piktochart是传统工具，但需要手动操作；baoyu-infographic实现了"描述即出图"的自动化流程。 ### 4. excalidraw-diagram：手绘风格的"架构师笔记" **来源：** coleam00开源 | **安装：** `npx skills add coleam00/excalidraw-diagram` Excalidraw以手绘风格著称，这款Skill让Claude Code能生成Excalidraw格式的JSON文件，可在Excalidraw编辑器中打开并二次编辑。支持流程图、架构图、序列图等类型。 **核心功能演示：** 输入"绘制一个Kubernetes集群架构，包含Master节点、3个Worker节点、Ingress Controller和持久化存储"，生成的JSON在Excalidraw中渲染出带手绘风格的架构图，节点可拖拽、连线可编辑。 **维度评分：** - 功能完整度 ★★★★（支持主流图表，但手绘风格限制了商务场景） - 上手难度 ★★★★（需安装Excalidraw编辑器才能查看输出） - 变现潜力 ★★★（受众偏技术向，商务场景受限） - 训练营适用性 ★★★★（1小时教学，适合技术文档课程） - 社区活跃度 ★★★★★（Excalidraw社区庞大，GitHub Star 80k+） **与竞品对比：** 手绘风格是独特卖点，Mermaid和chart-craft都无法复刻。缺点是输出JSON而非直接可视化的HTML，多一步导入操作。 ### 5. frontend-slides：零依赖的演示文稿引擎 **来源：** zarazhangrui | **安装：** `npx skills add zarazhangrui/frontend-slides` frontend-slides是一款受"Vibe Coding"哲学启发的Skill，能在零外部依赖的条件下生成带丰富动画的HTML演示文稿。支持从Markdown或原始文本生成，内置过渡动画、代码高亮、响应式布局。 **核心功能演示：** 输入一份技术分享的大纲，frontend-slides生成10-15页的HTML演示文稿，每页带有进入动画（淡入、滑入、缩放等），代码块自动高亮，图表自动嵌入。打开HTML即全屏演示，键盘左右键翻页。 **维度评分：** - 功能完整度 ★★★★（动画丰富但模板数量有限） - 上手难度 ★★★★★（输入文本大纲即出结果） - 变现潜力 ★★★★（可做"AI演示文稿"服务，$4.9/份） - 训练营适用性 ★★★★★（最适合教学场景，20分钟上手） - 社区活跃度 ★★★★（GitHub仓库活跃，有中文社区讨论） **与竞品对比：** 对比reveal.js手动编写，frontend-slides的"自然语言→演示"链路更短。但与PowerPoint相比缺少协作和云同步功能。 ### 6. architecture-diagram-zh：双主题架构图的"中国方案" **来源：** 社区 | **安装：** 通过本地SKILL.md配置 architecture-diagram-zh是专为中文技术文档设计的架构图Skill，支持深色/浅色双主题切换，输出为独立的HTML文件（内嵌SVG图形）。支持微服务、Kubernetes、数据库、网络拓扑等常见架构场景。 **核心功能演示：** 描述一个"Spring Cloud微服务架构，包含Gateway、注册中心、配置中心、5个业务服务和MySQL集群"，生成的SVG架构图自动按层级排列服务，标注通信协议和数据流方向，配色专业且支持一键切换深色/浅色主题。 **维度评分：** - 功能完整度 ★★★★（架构场景覆盖全面，非架构图类型有限） - 上手难度 ★★★★（中文描述自然，但需要架构设计基础） - 变现潜力 ★★★★（可嵌入技术文档SaaS，$15-$49/月） - 训练营适用性 ★★★（需要架构设计知识，不适合纯初学者） - 社区活跃度 ★★★（小众Skill，更新频率一般） ### 7. algorithmic-art：从代码到美学的实验场 **来源：** Anthropic官方 | **安装：** `npx skills add anthropics/algorithmic-art` 这是Anthropic官方Skills仓库中的三款设计Skill之一（另外两款是frontend-design和canvas-design）。它指导Claude使用p5.js生成算法艺术，支持种子随机性、参数化控制和交互式探索。 **核心功能演示：** 输入"生成一个受蒙德里安启发的几何抽象作品"，Skill会先生成算法哲学分析（新造型主义原则），然后基于p5.js编写代码，输出可在浏览器运行的HTML文件。支持seed参数确保可复现，参数滑块允许实时调整。 **维度评分：** - 功能完整度 ★★★（艺术创作方向独特，但不解决具体业务问题） - 上手难度 ★★★（需要理解p5.js和算法艺术概念） - 变现潜力 ★★★（NFT/数字艺术市场有空间，但规模有限） - 训练营适用性 ★★★★（创意编程课程绝佳素材，3小时工作坊） - 社区活跃度 ★★★★★（Anthropic官方维护，生态最高信誉度） **与竞品对比：** 作为官方Skill，代码质量和设计理念都是顶级。但实用价值偏低——除非你是创意编程爱好者或数字艺术从业者。 ### 8. knowledge-card-pro：知识卡片的"短视频工厂" **来源：** 社区 | **安装：** 通过SKILL.md本地配置 knowledge-card-pro定位为STEM领域的知识卡片短视频生成器，输出16:9横屏格式，支持通信、网络、计算机、AI、数学物理等学科。每张卡片带有动画效果，可导出为HTML或MP4视频。 **核心功能演示：** 输入"TCP三次握手过程"，生成一张16:9的知识卡片，包含：标题动画→流程图动画（Client/Server三次握手步骤）→关键参数高亮→总结文字淡入。整个动画约15秒，适合B站/抖音等短视频平台。 **维度评分：** - 功能完整度 ★★★★（动画丰富，学科覆盖广） - 上手难度 ★★★★（需要MP4导出依赖ffmpeg） - 变现潜力 ★★★★★（知识付费赛道，$0.5-$2/张卡片） - 训练营适用性 ★★★★★（教育行业天然适用） - 社区活跃度 ★★★（新Skill，社区正在形成） ## 视觉输出层Skills生态分类 ```mermaid mindmap root((视觉输出层Skills)) 图表生成 chart-craft 10种图表类型 HTML输出 chart-craft-plus 35+种图表 智能推荐引擎 mermaid-generator Mermaid语法 轻量级 text-logic-diagram 文本逻辑拆解 SVG输出 信息图设计 baoyu-infographic 21布局×17风格 出版级完成度 架构可视化 architecture-diagram-zh 深色/浅色双主题 中文优化 excalidraw-diagram 手绘风格 JSON可编辑 演示文稿 frontend-slides 零依赖HTML 动画丰富 知识传播 knowledge-card-pro 16:9横屏 STEM领域 生成艺术 algorithmic-art p5.js 种子随机 canvas-design PNG/PDF 设计系统 设计到代码 figma-use Figma→代码 figma-generate-design 设计生成 figma-code-connect 组件映射 ``` ## 推荐排行榜 ### 综合评分TOP 5 | 排名 | Skill | 综合分 | 一句话评价 | |------|-------|--------|-----------| | 1 | chart-craft-plus | 4.6 | 图表类型最全，智能推荐引擎是杀手级特性 | | 2 | baoyu-infographic | 4.6 | 信息图成品感最强，变现路径最清晰 | | 3 | frontend-slides | 4.4 | 演示文稿赛道最佳选择，零依赖是亮点 | | 4 | chart-craft | 4.2 | 轻量级图表首选，适合日常快速出图 | | 5 | excalidraw-diagram | 4.0 | 技术文档标配，手绘风格独特不可替代 | ### 变现潜力排行 | 排名 | Skill | 最佳变现模式 | 估算月收入 | |------|-------|------------|-----------| | 1 | baoyu-infographic | SaaS信息图生成平台 | $5k-$20k | | 2 | chart-craft-plus | 企业数据可视化服务 | $3k-$15k | | 3 | knowledge-card-pro | 知识付费卡片批量生产 | $2k-$8k | | 4 | frontend-slides | AI演示文稿服务 | $1k-$5k | | 5 | architecture-diagram-zh | 技术文档工具嵌入 | $1k-$4k | ### 上手速度排行（从快到慢） | 排名 | Skill | 上手时间 | 前置要求 | |------|-------|---------|---------| | 1 | frontend-slides | 5分钟 | 无 | | 2 | baoyu-infographic | 5分钟 | 无 | | 3 | chart-craft | 10分钟 | 了解图表类型 | | 4 | knowledge-card-pro | 15分钟 | ffmpeg（可选） | | 5 | excalidraw-diagram | 15分钟 | Excalidraw编辑器 | | 6 | architecture-diagram-zh | 20分钟 | 架构设计基础 | | 7 | chart-craft-plus | 25分钟 | 图表类型知识 | | 8 | algorithmic-art | 30分钟 | p5.js基础 | ## 关键发现 **baoyu-skills正在统治视觉输出层。** JimLiu的baoyu-skills仓库贡献了本次评测中的三款Skill（chart-craft、chart-craft-plus、baoyu-infographic），全部进入综合TOP 5。这个仓库在中文社区的讨论热度远超其他Skills集合，知乎相关文章阅读量累计10万+，形成了"安装baoyu-skills就够"的口碑效应。 **HTML成为视觉输出的统一格式。** 八款Skill中有六款以HTML为输出格式，这不是巧合——HTML是唯一能在零依赖条件下实现动画、交互、响应式的格式。SVG用于纯图形场景（architecture-diagram-zh），JSON用于可编辑场景（excalidraw-diagram）。 **"可交付"的定义正在改变。** 六个月前，AI生成的图表只能算"草稿"；今天，chart-craft-plus和baoyu-infographic的输出已经可以不加修改地用于客户演示和社交媒体发布。这个质量拐点意味着视觉输出Skill从"玩具"升级为"工具"。 **变现瓶颈在于分发而非技术。** 所有八款Skill的技术门槛都不高——本质上是大段精心编写的Markdown提示词。真正的壁垒在于：谁能最快把HTML输出变成用户愿意付费的产品形态。baoyu-infographic的信息图SaaS化和knowledge-card-pro的短视频批量生产是两条最清晰的路径。 ## 参考来源 1. [baoyu-skills GitHub Repository](https://github.com/JimLiu/baoyu-skills) — chart-craft/infographic/chart-craft-plus的源仓库 2. [Anthropic Official Skills Repository](https://github.com/anthropics/skills/tree/main) — algorithmic-art等官方Skill源码 3. [Frontend Slides GitHub](https://github.com/zarazhangrui/frontend-slides) — frontend-slides Skill源码及文档 4. [Excalidraw Diagram Skill Analysis](https://atalupadhyay.wordpress.com/2026/03/04/how-to-give-your-ai-coding-agent-a-visual-brain-excalidraw-diagram-skill-for-claude-code/) — Excalidraw Skill深度解析 5. [baoyu-skills实用评测（知乎）](https://zhuanlan.zhihu.com/p/2031768297239220806) — 中文社区baoyu-skills实测报告 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。