在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 | 知识卡片短视频 | ★★★★☆ |
来源： 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相比，图表类型数量偏少，缺少桑基图、雷达图等高级类型。
来源： 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。
来源： 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实现了"描述即出图"的自动化流程。
来源： 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，多一步导入操作。
来源： 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相比缺少协作和云同步功能。
来源： 社区 | 安装： 通过本地SKILL.md配置
architecture-diagram-zh是专为中文技术文档设计的架构图Skill，支持深色/浅色双主题切换，输出为独立的HTML文件（内嵌SVG图形）。支持微服务、Kubernetes、数据库、网络拓扑等常见架构场景。
核心功能演示： 描述一个"Spring Cloud微服务架构，包含Gateway、注册中心、配置中心、5个业务服务和MySQL集群"，生成的SVG架构图自动按层级排列服务，标注通信协议和数据流方向，配色专业且支持一键切换深色/浅色主题。
维度评分： - 功能完整度 ★★★★（架构场景覆盖全面，非架构图类型有限） - 上手难度 ★★★★（中文描述自然，但需要架构设计基础） - 变现潜力 ★★★★（可嵌入技术文档SaaS，$15-$49/月） - 训练营适用性 ★★★（需要架构设计知识，不适合纯初学者） - 社区活跃度 ★★★（小众Skill，更新频率一般）
来源： 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，代码质量和设计理念都是顶级。但实用价值偏低——除非你是创意编程爱好者或数字艺术从业者。
来源： 社区 | 安装： 通过SKILL.md本地配置
knowledge-card-pro定位为STEM领域的知识卡片短视频生成器，输出16:9横屏格式，支持通信、网络、计算机、AI、数学物理等学科。每张卡片带有动画效果，可导出为HTML或MP4视频。
核心功能演示： 输入"TCP三次握手过程"，生成一张16:9的知识卡片，包含：标题动画→流程图动画（Client/Server三次握手步骤）→关键参数高亮→总结文字淡入。整个动画约15秒，适合B站/抖音等短视频平台。
维度评分： - 功能完整度 ★★★★（动画丰富，学科覆盖广） - 上手难度 ★★★★（需要MP4导出依赖ffmpeg） - 变现潜力 ★★★★★（知识付费赛道，$0.5-$2/张卡片） - 训练营适用性 ★★★★★（教育行业天然适用） - 社区活跃度 ★★★（新Skill，社区正在形成）
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
组件映射
| 排名 | 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的短视频批量生产是两条最清晰的路径。
[!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 等场景全覆盖。