# 代码驱动可视化七引擎实测：从文本到视觉的前端Skills新物种 2026年Claude Code Skills生态中最引人注目的变异不是又一个React组件生成器，而是一批完全用SVG/HTML/CSS代码"手绘"视觉作品的Skills。它们不调用任何图像生成模型，不依赖Canvas API——仅凭代码逻辑和设计规则，将结构化信息转化为专业级可视化作品。这批"代码驱动可视化"Skills正在重新定义前端开发的边界：前端不再只是构建交互界面，更是视觉设计的原生语言。本文深度评测这一赛道中七个代表性引擎，从信息图到架构图、从知识卡片到逻辑图，拆解它们的技术路径与变现可能。 ## 评测总览 | Skill名称 | 来源 | 核心输出 | 功能完整度 | 上手难度 | 变现潜力 | 训练营适用性 | 社区活跃度 | 综合评分 | |-----------|------|---------|-----------|---------|---------|------------|-----------|---------| | **baoyu-infographic** | JimLiu/baoyu-skills | SVG信息图 | ★★★★★ | ★★★★ | ★★★★★ | ★★★★★ | ★★★★ | 4.7 | | **chart-craft-plus** | 本地skills | HTML图表 | ★★★★★ | ★★★★★ | ★★★★ | ★★★★★ | ★★★ | 4.4 | | **architecture-diagram-zh** | 本地skills | SVG架构图 | ★★★★ | ★★★★★ | ★★★★ | ★★★★ | ★★★ | 4.1 | | **text-logic-diagram** | 本地skills | SVG逻辑图 | ★★★★ | ★★★★★ | ★★★ | ★★★★ | ★★★ | 3.8 | | **knowledge-card-pro** | 本地skills | 动画视频卡片 | ★★★★ | ★★★ | ★★★★ | ★★★★ | ★★★ | 3.7 | | **excalidraw-diagram** | c-kraus/robtaylor | .excalidraw JSON | ★★★★ | ★★★★ | ★★★ | ★★★★ | ★★★★ | 3.7 | | **markdown-to-image** | 本地skills | 3:4海报图片 | ★★★ | ★★★★ | ★★★★ | ★★★ | ★★★ | 3.5 | ## 深度评测 ### 一、baoyu-infographic：零模型调用的信息图工厂 **来源**：[JimLiu/baoyu-skills](https://github.com/JimLiu/baoyu-skills) **安装**：`/install https://github.com/JimLiu/baoyu-skills` baoyu-infographic是当前代码驱动可视化赛道中完成度最高的作品。它的核心设计理念极其清晰：**Claude不调用任何图像生成模型，而是纯靠SVG代码"手绘"信息图**。这个选择带来三个关键优势——零Token外成本、完全可编辑的矢量输出、以及令人意外的视觉品质。 该Skill内置20种布局类型和17种视觉风格。布局类型覆盖经典的信息流（timeline、comparison、hierarchy）、数据展示（statistics、grid、table）、叙事结构（story、process、cycle）等。视觉风格则从craft-handmade（手绘风）、technical-schematic（技术制图风）到cyberpunk（赛博朋克风）、notion（极简文档风）均有覆盖。用户只需提供一段Markdown文本或数据描述，Skill会自动分析内容结构，推荐最适合的布局与风格组合。 技术实现上，baoyu-infographic定义了一套严格的SVG生成规范。它要求Claude在生成过程中遵循：颜色使用CSS变量管理、字体层级通过``元素的`font-size`和`font-weight`精确控制、所有间距使用8px基准网格。这些约束确保了输出的一致性而非随机性。实际测试中，给定同一份"5G网络架构概述"文本，连续生成三次的布局结构完全一致，仅在细节装饰元素上有自然变化。 **评分**： - 功能完整度 ★★★★★：20+17的布局风格矩阵几乎覆盖所有信息图场景 - 上手难度 ★★★★：需理解Markdown输入格式，但示例充分 - 变现潜力 ★★★★★：可直接包装为"AI信息图SaaS"产品，定价空间$29-99/月 - 训练营适用性 ★★★★★：2小时可完成从安装到产出完整信息图的教学 - 社区活跃度 ★★★★：GitHub多平台分发，skillsmp/smithery/mcpmarket均有收录 **与竞品对比**：对比同类的`xhs-md2img`（专注小红书3:4比例图片），baoyu-infographic在布局灵活性上有碾压优势，但在特定平台的适配性上略逊。对比Canva AI 2.0等传统工具，其"纯代码"路径意味着零运行时依赖，但缺乏所见即所得的交互编辑。 --- ### 二、chart-craft-plus：35+图表类型的HTML图表工厂 **来源**：本地skills目录 **安装**：已内置或`/learn chart-craft-plus` chart-craft-plus是chart-craft的扩展版，从一个10种图表类型的工具扩展为覆盖35+种可视化形式的全能图表引擎。它的定位不是替代D3.js或ECharts，而是在Claude Code对话中**一键生成设计精美的独立HTML图表文件**。 支持类型横跨六大领域：技术架构图（系统架构、微服务拓扑、网络拓扑）、流程逻辑图（流程图、时序图、状态机）、数据可视化（柱状图、饼图、折线图、雷达图）、商业战略图（商业模式画布、SWOT分析、波特五力）、信息设计图（思维导图、组织架构、ER图）、以及中文特色图表（竞品分析图、用户旅程图、OKR对齐图）。 技术层面，chart-craft-plus的输出是完整的HTML文件，内嵌CSS和JavaScript。它采用CSS Grid/Flexbox布局而非Canvas渲染，这意味着输出天然支持响应式和文本选择。每个图表都配有5种内置配色方案（默认、森林、深色、中性、高对比），并支持自定义CSS变量覆盖。 实际测试中，输入"生成一个电商系统的微服务架构图，包含用户服务、订单服务、支付服务、库存服务和消息队列"，chart-craft-plus在约30秒内生成了一个完整的HTML文件，包含服务节点、通信箭头、数据流标注，配色统一且层次分明。但需要注意，由于是Claude直接生成代码，复杂图表可能出现节点重叠，需要迭代修正。 **评分**： - 功能完整度 ★★★★★：35+类型几乎涵盖所有常见图表需求 - 上手难度 ★★★★★：自然语言输入，零配置 - 变现潜力 ★★★★：可作为企业内部可视化工具，但独立SaaS空间有限 - 训练营适用性 ★★★★★：每种图表类型可作为一个教学单元 - 社区活跃度 ★★★：本地skill，社区讨论较少 **关键局限**：所有图表都是静态HTML，不支持数据绑定或动态更新。如果需要数据驱动的实时图表，仍需对接ECharts等库。 --- ### 三、architecture-diagram-zh：双主题架构图的中文优化方案 **来源**：本地skills目录 **安装**：已内置 architecture-diagram-zh是少数**原生支持中文排版**的架构图生成Skills。它的核心差异化在于两点：深色/浅色双主题切换、以及针对中文字体的排版优化。 在深色主题下，它采用深蓝灰背景（`#1a1a2e`）配以荧光色高亮节点的配色方案，视觉效果接近Cloudcraft或Lucidcale的专业级输出。浅色主题则使用纯白背景配合蓝灰色系，适合嵌入文档。中文排版方面，它预设了思源黑体（Noto Sans CJK）作为首选字体，解决了SVG中文字体回退导致的排版错乱问题。 输出格式为独立的HTML文件，内嵌SVG图形。它支持分层架构图（Layered）、网络拓扑图（Network）、流程架构图（Pipeline）三种核心模式。每个模式都有预设的节点样式和连接线规则。 **评分**： - 功能完整度 ★★★★：三种模式覆盖主要架构图场景，但缺乏自由布局 - 上手难度 ★★★★★：`/architecture "描述你的系统"` 即可触发 - 变现潜力 ★★★★：可包装为"一键架构图"工具，面向技术博客作者和架构师 - 训练营适用性 ★★★★：架构图生成+文档嵌入流程约1.5小时可掌握 - 社区活跃度 ★★★：中文社区内有传播，英文社区认知度低 **与竞品对比**：对比`diagram-architect`（另一款架构图Skill），architecture-diagram-zh的中文支持是决定性优势。但在纯英文场景下，diagram-architect的5种专业主题提供了更多选择。 --- ### 四、text-logic-diagram：六种逻辑关系的精准可视化 **来源**：本地skills目录 **安装**：已内置 text-logic-diagram的切入点极为精准——它不做"通用图表"，只做一件事：**将文本段落中的逻辑关系可视化**。它定义了六种逻辑关系类型：递进（Progression）、流程（Process）、循环（Cycle）、层次（Hierarchy）、对比（Comparison）、矩阵（Matrix）。 用户输入一段文本（比如一段产品需求描述、一篇论文摘要、一份会议纪要），Skill会自动分析文本中的逻辑结构，选择最合适的关系类型，然后生成对应的SVG图。这个"文本→逻辑分析→图表"的管道是它的核心价值。 实际测试中，输入以下文本： > "用户注册后进入新手引导流程，完成引导后解锁核心功能。核心功能包含免费基础版和付费专业版。专业版支持API调用、数据导出和团队协作。" text-logic-diagram正确识别出"注册→引导→核心功能"的递进关系、"免费/付费"的对比关系、"API/导出/协作"的层次关系，并生成了三个独立的SVG逻辑图。这种"一文本多图"的拆解能力是它的独特卖点。 输出为SVG文件，使用CSS动画实现简单的入场效果。但视觉风格偏工程化，缺少baoyu-infographic那种设计感。 **评分**： - 功能完整度 ★★★★：六种关系类型覆盖常见逻辑结构 - 上手难度 ★★★★★：直接粘贴文本即可 - 变现潜力 ★★★：逻辑图需求较窄，更适合作为功能模块嵌入 - 训练营适用性 ★★★★：逻辑分析+可视化的教学案例丰富 - 社区活跃度 ★★★：小众但精准的用户群 --- ### 五、knowledge-card-pro：动画知识卡片的短视频赛道入场券 **来源**：本地skills目录 **安装**：已内置 knowledge-card-pro瞄准的是一个具体的变现场景：**知识类短视频**（16:9横屏）。它生成的不是静态图片，而是带有CSS动画效果的知识卡片序列，每个卡片就是一个短视频的分镜。 它支持通信、网络、计算机、AI、数学物理等STEM领域。核心工作流是：输入一个知识点描述→Skill生成一组带动画的HTML卡片→每个卡片包含标题、核心概念图解、关键公式/数据、以及过渡动画。 动画效果包括淡入（fade-in）、滑入（slide-in）、缩放（scale）、高亮（highlight）四种基础效果，以及组合动画。所有动画使用CSS `@keyframes` 实现，浏览器直接播放，无需JavaScript。 从变现角度看，knowledge-card-pro直指抖音/B站/YouTube Shorts的知识类短视频赛道。生成的卡片可以用OBS录屏或Puppeteer自动化渲染为MP4，配合`content-to-video`或`txt-to-video`等Skills，可以构建完整的"知识→视频"管线。 **评分**： - 功能完整度 ★★★★：动画类型偏少，但覆盖核心需求 - 上手难度 ★★★：需要理解分镜概念和动画时序 - 变现潜力 ★★★★：短视频赛道的明确切入点 - 训练营适用性 ★★★★：3小时可完成"知识点→视频"全流程教学 - 社区活跃度 ★★★：中文用户群为主 **关键发现**：knowledge-card-pro的真正价值不在于单独使用，而在于作为"知识内容视频化"管线的前端渲染层。与`txt-to-video`（文本转视频）和`speech`（TTS配音）组合使用时，形成完整的自动化视频生产流水线。 --- ### 六、excalidraw-diagram：白板风格的可编辑图解引擎 **来源**：[c-kraus/claude-code-skills](https://github.com/c-kraus/claude-code-skills) / [robtaylor/excalidraw-diagrams](https://github.com/robtaylor/excalidraw-diagrams) **安装**：`/install https://github.com/robtaylor/excalidraw-diagrams` excalidraw-diagram在可视化Skills中占据一个独特生态位：它的输出不是SVG或HTML，而是**Excalidraw的JSON格式**（`.excalidraw`文件）。这意味着生成的图表可以在Excalidraw中二次编辑——拖动节点、调整连线、修改文字——完全可交互。 这个选择带来了一个重要的工程优势：Excalidraw的JSON schema是结构化的，Claude生成JSON比生成SVG更容易保证正确性。SVG的``元素需要精确的坐标计算，而Excalidraw的JSON使用相对定位和自动布局算法，容错率更高。 Skill的设计哲学也与众不同。它强调"visual argumentation"（视觉论证）而非"visual display"（视觉展示）——每个图表都应该提出一个论点，而非仅仅展示数据。这反映在它的生成规范中：要求图表必须有明确的焦点区域、层次分明的视觉权重、以及引导视线流向的布局。 实际使用中，输入"解释OAuth 2.0授权码流程"，它生成了一个包含用户、浏览器、授权服务器、资源服务器四个角色，以及授权请求、授权码返回、令牌交换、资源访问四个步骤的序列图。在Excalidraw中打开后，可以自由调整节点位置、添加注释、导出为PNG/SVG。 **评分**： - 功能完整度 ★★★★：支持流程图、架构图、序列图等常见类型 - 上手难度 ★★★★：需安装Excalidraw，但生成过程简单 - 变现潜力 ★★★：Excalidraw生态本身免费，变现需依附于工作流自动化 - 训练营适用性 ★★★★："代码→可视化→编辑"的完整链路适合教学 - 社区活跃度 ★★★★：GitHub活跃维护，多个社区评测文章 **与竞品对比**：对比`architecture-diagram-zh`的直接SVG输出，excalidraw-diagram的可编辑性是杀手级优势，但视觉风格受限于Excalidraw的手绘风。如果需要专业级设计感，SVG输出方案更合适。 --- ### 七、markdown-to-image：社交媒体海报的快速通道 **来源**：本地skills目录 **安装**：已内置 markdown-to-image的功能如其名：将Markdown内容转换为固定3:4比例的图片海报。它瞄准的场景非常具体——播客摘要、文章摘要、引用金句等需要以图片形式在社交媒体分享的内容。 它支持YouTuber风格（大头像+引用文字+品牌色背景）和Minimalist风格（纯文字+装饰线条）两种主要视觉方向。输出为HTML文件，通过Puppeteer或浏览器截图即可得到最终图片。 **评分**： - 功能完整度 ★★★：功能单一但聚焦，3:4比例限制了适用场景 - 上手难度 ★★★★：Markdown输入门槛低 - 变现潜力 ★★★★：社交媒体运营是明确的付费场景 - 训练营适用性 ★★★：功能过于简单，教学内容有限 - 社区活跃度 ★★★：实用性工具，讨论热度一般 ## 生态全景图 ```mermaid mindmap root((代码驱动
可视化Skills)) 信息图生成 baoyu-infographic 20布局+17风格 纯SVG输出 零模型依赖 markdown-to-image 3:4海报 社交媒体适配 图表引擎 chart-craft-plus 35+图表类型 HTML独立文件 5种配色方案 architecture-diagram-zh 深色/浅色双主题 中文排版优化 分层/网络/管线 逻辑可视化 text-logic-diagram 6种逻辑关系 文本自动分析 SVG输出 知识内容 knowledge-card-pro CSS动画卡片 16:9横屏 短视频分镜 可编辑图解 excalidraw-diagram JSON格式输出 二次编辑 视觉论证哲学 设计输入 Figma Skills套件 figma-use figma-implement-design figma-generate-design Tailwind Design System Design Token 组件库生成 官方基建 frontend-design 品味修正 反AI平庸化 theme-factory 主题一致性 web-artifacts-builder 多组件HTML打包 ``` ## 推荐排行榜 ### 按功能完整度排名 1. **chart-craft-plus** — 35+图表类型，覆盖面最广 2. **baoyu-infographic** — 20×17的布局风格矩阵 3. **architecture-diagram-zh** — 三种核心模式，中文原生支持 ### 按变现潜力排名 1. **baoyu-infographic** — 可直接包装为信息图SaaS，$29-99/月定价空间 2. **knowledge-card-pro** — 短视频赛道的入口，可组合TTS/录屏形成完整管线 3. **chart-craft-plus** — 企业内部可视化工具的基座，按座位收费 ### 按上手速度排名 1. **text-logic-diagram** — 粘贴文本即可，零学习成本 2. **chart-craft-plus** — 自然语言输入，自动推荐图表类型 3. **architecture-diagram-zh** — 单行命令触发，双主题自动切换 ### 按训练营适用性排名 1. **baoyu-infographic** — 丰富的示例和明确的参数空间，2小时可掌握 2. **chart-craft-plus** — 每种图表类型作为一个教学单元，课程结构清晰 3. **knowledge-card-pro** — "知识点→卡片→视频"全流程教学价值高 ### 按工程创新度排名 1. **excalidraw-diagram** — JSON输出+可编辑性，重新定义了"AI生成图表"的交互模式 2. **baoyu-infographic** — "零模型调用"的纯代码路径，证明了LLM的视觉设计潜力 3. **text-logic-diagram** — 文本逻辑分析→可视化的自动管道，是NLP+设计的有趣交叉 ## 技术趋势观察 代码驱动可视化Skills的崛起揭示了一个更深层的趋势：**LLM正在成为新的"设计工具"**，而不仅仅是"编码助手"。这批Skills的共同特征是： **不调用图像生成模型**。所有视觉输出都通过SVG/HTML/CSS代码实现。这意味着输出天然是矢量的、可编辑的、文本可搜索的。对于技术文档、企业报告、学术论文等场景，这种"代码即设计"的路径比Midjourney式的像素生成更实用。 **设计规则编码化**。每个Skill本质上都是一套"设计规则"的Markdown编码——颜色规范、间距系统、字体层级、布局网格。这些规则由人类设计师制定，Claude执行。这创造了一种新的协作模式：设计师定义系统，AI填充内容。 **变现路径从"工具"转向"管线"**。单独一个信息图生成Skill的变现空间有限，但当它与`speech`（配音）、`content-to-video`（视频合成）、`twitter-publisher`（社媒发布）组合成管线时，就形成了一个完整的"内容→视觉→分发"自动化系统。这条管线的价值远大于各Skill之和。 **中文场景的差异化机会**。architecture-diagram-zh和knowledge-card-pro证明了中文场景的Skills不仅是翻译版，而是需要解决字体、排版、配色等本地化问题的独立产品。这个方向在全球Skills生态中几乎是空白地带。 ## 参考来源 1. [baoyu-skills GitHub Repository](https://github.com/JimLiu/baoyu-skills) — baoyu-infographic核心代码与20种布局定义 2. [Anthropic Skills Repository](https://github.com/anthropics/skills) — 官方Skills标准与web-artifacts-builder实现 3. [Excalidraw Diagram Skill Analysis](https://ice-ice-bear.github.io/posts/2026-04-01-excalidraw-skill/) — 视觉论证哲学的深度解析 4. [Best Claude Code Skills 2026: 349 Ranked](https://www.openaitoolshub.org/en/blog/best-claude-code-skills-2026) — 349个Skills的跨领域排名与评测 5. [Figma Blog: Design Systems and AI via MCP](https://www.figma.com/blog/design-systems-ai-mcp/) — Figma MCP设计系统自动化官方指南 > [!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 等场景全覆盖。