大家好，我是用AI搞可视化的阿序。
前几天刚介绍完用 AI 做视频，转头又发现，用 AI 搞可视化交互，效果同样挺震撼的
不知道大家有没有这样的经历，明明每个字都认识，连在一起却看不懂。尤其是学习一些比较抽象的内容时，最头疼的就是这个。大学时候学习计网，各种晦涩的流程。。。
有时候我就想，这些知识要是能直接画出来、动起来，甚至自己动手操作一下，理解起来应该会容易很多吧？
而现在有了AI，再搭配一些专门的Skill，轻松就能搞定。
01-把抽象知识变成图解
第一个是Visual Explainer，一个专门帮助 AI 生成可视化解释内容的 Skill。
平时让AI解释某个复杂概念，它经常会给出大段文字，或者在聊天框里画一个简陋的字符流程图。知识倒是讲了不少，看着依然费劲
而Visual Explainer可以把技术概念、系统架构这些内容转换成精心排版的HTML页面，通过图表、流程关系、分步骤演示等方式，把信息呈现得更直观。
简单来说，就是让AI给知识配上一份专属的可视化说明书。
比如学习计算机网络的时候，可以让它解释TCP三次握手。
原本需要对着教材反复琢磨的过程，现在可以通过两条时间线、三次报文传递和对应的状态变化，直接展示在一个页面里。
当然，它的用途也不限于学习。平时阅读复杂项目代码、梳理软件架构、制作工作汇报，甚至对比几份技术方案，都可以尝试。
尤其是那些原本需要写上千字才能解释清楚的流程，转换成图解之后，阅读负担会小不少
02-让AI画知识白板
第二个我觉得也非常实用，尤其适合平时喜欢整理笔记的朋友。
Excalidraw是我很常用的白板类工具，我一直挺喜欢它那种手绘风格的图。
白色画布、简单的方框、箭头、线条，看起来就像在白板上边讲边画，视觉上非常清爽、生动。
现在很多博主录视频讲解知识时，也喜欢使用这种形式，就像下面这样。
但自己动手画的时候，也挺耗时间。特别是流程比较复杂时，还得考虑布局、连接关系、文字的位置。
而这个Skill可以根据自然语言描述，自动生成Excalidraw代码并渲染成图表。
而且现在Agent 的能力也越来越强了。生成图表之后，还可以继续渲染、截图检查，让AI识别文字重叠、箭头错位等问题，再进行修改。整个过程，人的参与就会减少。
这对于学习笔记来说很方便。AI先帮忙完成整体结构，自己再根据理解增删内容、调整布局，最后放进笔记或者PPT里。
比如我最近在整理AI Agent的相关知识，就可以尝试让它画一张Agent工作流程图。
同样的方式，还可以制作计算机网络结构图、业务流程图、思维导图。
甚至web原型都绰绰有余。
我觉得它最有价值的地方，是能让AI先帮我们把复杂知识的关系整理出来。
尤其是一些概念看文字总觉得抽象，放在同一张图里，哪些是前置条件、哪些存在依赖、整个流程如何运行，往往会清晰很多。
03-把知识变成实验
如果说前面两个 Skill 主要负责把知识画出来，那第三个就更有意思了。
它可以让我们直接动手玩知识。
这个项目叫HTML Explainer，专门用来生成交互式教学网页。
它会根据知识内容规划页面结构，把复杂概念拆解成多个层次，再通过动态演示、交互控件、小测验等方式帮助理解。
比如，小学二年级就学过的多普勒效应
相信大家多少都有点印象，车朝自己驶来和逐渐远去时，听到的声会有所不同。
课本上通常会通过图示和公式解释这种现象，但在这个交互网页里，可以直接调整运动速度，观察波前如何压缩、拉伸，以及音调为什么会变化。
这种体验就挺奇妙的。
小时后就只能对着PPT，听老师干巴巴地讲，结果一知半解。
现在当知识里的参数可以自己改变，原本抽象的公式就有了可以直接观察的结果。
再比如把电子电路学习中非常常见的正弦波做成一个交互实验。
这样一来，频率变大时周期如何缩短，幅值改变时波形如何变化，相位变化又会产生什么影响，都可以自己拖动滑块观察。
对老师来说，可以作为课堂演示材料。对学生来说，相当于给自己制作了一个可以随时复习的小工具。
我想，这可能就是AI赋能教育领域的一个细微体现吧。
04-把知识变成机械装置
最后一个Skill，视效上就更胜一筹了，我能给到夯
它叫Anatomy，翻译过来就是解剖。
也就是让AI把复杂的技术原理，制作成一台可以观察、交互，甚至拆解的精致机器。
与前面几个偏向图表、流程图和网页课程的Skill相比，Anatomy 的视觉风格很特别，视觉冲击感也很强
主要使用SVG绘制等距视角结构图，通过大量零件、阴影、机械连接和动态效果，把一个技术概念呈现成具有空间感的装置。
甚至还能结合WebGL实现火焰、水面、光照这些比较特殊的视觉效果。
例如火箭发动机，画面中可以看到相当精细的发动机结构和测试台，还能表现出火焰效果。
这些作品让我觉得很有意思的一点，就是它能够把一些原本看不见、摸不着的东西，转换成具体的物理结构。
当然，除了开发者展示的案例，我们也可以尝试拿它来解释现实中的机械设备和零部件。
我们日常使用的机械键盘，按键下面的轴体究竟是怎么工作的？
虽然很多人每天都在敲键盘，但如果没有亲手拆过机械轴，可能还真不知道里面有哪些零件，以及它们是如何配合的。
下面是我用Agent做出来的效果。
直接就能在一个网页里观察机械轴体的内部零件，以及按下按键后，各个部件之间的运动关系。
这比单纯看一张静态剖面图有意思多了。
类似的玩法还可以拓展到电机、齿轮传动、精密测量装置，以及各种复杂的机械系统。
甚至一些计算机概念，也可以通过物理装置的形式进行形象化表达。
需要提醒的是
但对于科普、知识学习、技术分享来说，这种方式确实很值得探索。
以前看不懂的复杂机械结构，现在可以尝试让 AI 做一个能动、能拆、能观察的模型。
光是这个玩法，我觉得就已经很有意思了
写在最后
今天分享的这几个 Skill，虽然功能各不相同，但我觉得它们有一个挺有意思的共同点，
让知识拥有更多种呈现方式。
以前我们学习某个陌生领域，主要依赖教材、文章、视频，以及别人提前制作好的教学材料。如果刚好找不到适合自己的讲解方式，就得反复搜索、反复理解。
现在，可以让AI根据自己的知识基础和学习需求，制作一份专属的学习材料。
遇到特别复杂的知识点，进一步生成动画。学完之后，还能用Excalidraw整理一张完整的知识结构图。
阿序还是很挺期待的，希望以后能有更多这样的学习工具。
毕竟每个人理解知识的习惯都不同，有的人喜欢看文字，有的人喜欢看图，还有的人必须亲手操作一下才能搞明白。
而AI也正在让这些不同的学习方式，变得越来越容易实现。
大家还发现了什么有趣的知识可视化Skill呢
我是阿序，感谢您的阅读，我们下期见！
