让DeepSeek生成《哪吒2》动态可视化报告，效果着实惊艳到我了！

现在，我们可以通过 AI 更高效实现 SVG 动态可视化设计了。

这期关于《哪吒之魔童闹海》的 Data Visualization，计育韬老师完全基于豆包、DeepSeek、即梦三款 AI 工具组合实现。加之最后的代码细节微调，除去 AI 生成的等待时间大约 1 小时完成。

那么同学们该如何巧借 DeepSeek 能力，快速实现这样的动态可视化报告？来看干货教学：

豆包起手，整合联网信息
Cursor 预载 Deepseek

---

鉴于众所周知的原因，DeepSeek 当下很难直接从互联网获取到电影的各方面数据信息。

所以第一步，我采用「豆包」获取实时新闻数据，直接向其提问包括票房、时间线、投资人等信息并要求其梳理成适合数据可视化设计使用的创作脚本。在此计育韬老师也推荐将「豆包」旗下硬件产品「Ola Friend」耳机作为你的日常智能工作伙伴，通过语音唤醒更高效启动 AI 工作流：

接下来，预调教 Cursor（DeepSeek 模型部署）确保其掌握了公众号 SVG 交互设计开发规则——主流的大语言模型基本都未习得微信生态内特殊的 SVG-XML 体系逻辑。所以我向它分别投喂了最近出台的中华人民共和国《融媒体 SVG 交互设计技术规范》T/CASME 1609—2024，和行业最重要的开发标准《SVG AttributeName 白名单》表格图片：

关于 DeepSeek 的调用，在 Cursor 内应用商店直接搜索并安装，输入 key 值后即可使用：

同时我也向 AI 强调了禁止使用包括 id 标签、CSS 动画、JS 指令等必须遵守的开发 SMIL 规则，避免在后续开发过程中浪费时间检查此类应用和条件错误，为 DeepSeek 的数据可视化创建工作完成全部准备。

进入 Composer 模式
指挥 DeepSeek 逐步设计

---

按模块顺序，准确告知 DeepSeek 自己的创作计划。在创建初期，一定要把握好设计基调，包括配色、风格等可以先行告知 AI。计育韬老师就重点要求了深色底色、红/黄配色的要求和简约而高级的视觉感受。

针对具体模块，你可以直接要求 AI 创作折线图/环形图/K线图等形态的图表，便于 DeepSeek 快速完成数据与设计的映射。当然这里提醒一下，涉及饼分图或环图的纯 SVG 矢量图表往往对 AI 来说存在难点，综合就 Claude-3.5、GPT-4o 和 DeepSeek r1 比照，DeepSeek 略胜一筹。

引导 DeepSeek 理解 SVG 动画
逐步提升完成各个模块

---

随后我们为所有图表增加循环动画效果。由于白名单的存在，部分 SVG 动画并不能以「常理」之下的 CSS 体系逻辑开发，因此我们甚至可以通过投喂代码实例引导 AI 自我突破进化。

同时，如果开发者已经知晓动画代码层的基本结构，不妨直接给到 DeepSeek 编码的一些关键提示，如时长、变化时刻等，并告知利用好 keyTimes 等属性合理分配动画效果，这会进一步提升开发者与 AI 直接的协同效率。

尤其对于具有重复性的动画（以第二部分「宣发历程」时间轴为例）AI 具备绝对优势——每个卡片的浮动开始时间采用等差数列排序，若开发者手写需要逐个复制粘贴修改或采用正则表达式，但对 DeepSeek 来说则是一瞬间可完成的任务。

AIGC 提升画面层次感
基于即梦补充报告配图

---

到这一步，计育韬老师希望增加更有主题特色的背景配图。因此我启动 Dreamina（即梦）。这款字节跳动旗下的 AIGC 工具最近是我的 AI 设计辅助首选。譬如我向它输入了简单通俗的中文 Prompt 指令，大体要求它以《哪吒之魔童闹海》为主画面进行创作，很快抽卡到了我满意的画面：

在 Photoshop 内稍做调整，我便将其以 <foreignObject> 形式组合到代码中来：

根据具体的画面内留白情况，计育韬老师最后一共添加了三张 AIGC 配图，大功告成！如有任何 DeepSeek 工作流层面其他疑问，欢迎在下方留言区提出！

较之传统的「矢量设计-代码部署」流程，以这种方式进行数据可视化设计一方面优势在于数据导入的便捷性，另一方面优势在于设计修改、代码生成的可维护性。

欢迎有动态数据可视化设计需求（SVG）的用户添加微信号（Zhuoya_Work）与我们共创实践 DeepSeek 等 AI 介入设计的边界。