用代码生成历史可视化视频正在成为内容创作的新范式。本文以五代十国疆域变迁视频为例，详细拆解了如何通过Claude Code调用React与Remotion实现数据驱动的动态可视化。从模糊想法到完整作品，全程无需手动编码，只需描述需求与效果，AI即可自动完成项目搭建、布局调整、细节优化等全流程。这种创作方式不仅大幅提升效率，更为复杂历史数据的可视化提供了全新思路。

最近在追《太平年》，真的是看得我时而心情沉重时而心潮澎湃。看正剧的感觉就是这样，已知结局但无法阻止，最后只能看主角走向既定的命运😭

五代十国这段历史太乱了，短短五十多年换了五个朝代，周边还有十几个政权此起彼伏。追剧的时候可能大家经常一脸懵：这是哪个国？这皇帝又是谁？刚才那个国怎么就没了？

所以我自己做了一个视频，把五代十国整个时期（907-960年）每一年的变化都可视化出来，想让大家能直观地看到当时正在发生什么。

成品视频时长 2 分 42 秒，整体内容由 Claude Code 调用 React 与 Remotion 生成，画面与时间轴完全由程序逻辑驱动。后期音乐用的是 Suno 。

如果不喜欢浅色，我还做了深色版本（一句话让它换个主题色再导出即可）😁

视频里有什么

每一年都会展示这些信息：

• 时间和年号：公元纪年 + 对应年号，比如 907 年开平元年，年号会随皇帝更替变化。
• 中原朝堂：当前是五代中的哪一朝，在位皇帝和庙号。
• 十国政权：当年同时存在哪些国家，各国君主和首都。
• 重大事件：战役、政变、皇位更替，新政权建立绿色高亮，灭亡红色闪烁。
• 史书典故：这个可能有可能没有，相关典故和名言，标注出处（《资治通鉴》《新五代史》等）。

包含了 54 年历史、20 多条历史事件、20 多条史书典故。

为什么是 Remotion ？

先回答一个可能的疑问：为什么不用 PR 或 AE ？

因为懒惰。这个视频有 54 年的数据，每一年显示的皇帝、政权、事件都不一样。如果用PR，我得手动做 54 个画面，加上信息核对，眼睛都花了。

Remotion 的思路不一样：用代码定义规则，让程序自动生成每一帧。我只要告诉它从数据里取当年的皇帝名字显示出来，它就会自动处理54年的内容。

简单来说，数据驱动的视频，用代码比用剪辑软件高效得多。

整个项目我没写过一行代码，我的工作就是：描述需求 → 看效果 → 提修改意见 → 再看效果。循环往复直到满意。

制作思路

1. 从模糊想法开始

打开终端启动 Claude Code ，让它帮我用 Remotion 创建一个视频项目，它会自动执行初始化命令，创建项目文件夹、安装依赖。大概等一两分钟项目就建好了。前提是电脑上要有 Node.js 环境，没有的话也可以让它帮你装。

项目建好后说启动预览服务，它会跑一个本地服务器。然后打开浏览器访问它给的地址（一般是localhost:3000），就能看到 Remotion Studio 界面了。Studio 里可以拖动时间轴、逐帧查看、调整播放速度，改完代码保存后画面会自动刷新。这个实时预览很爽，不用每次都导出完整视频才能看效果👇

一开始我的需求很模糊，我问 Claude Code ：有什么办法可以调用到完全正确的不同年份的五代十国时期的地图吗？

Claude Code 帮我搜索了CHGIS（哈佛中国历史地理信息系统）、Wikimedia Commons 等资源。

然后我让它找到并安装  Remotion ，它说好的，就开始帮我搭建项目了。

一个经验，不用一开始就想清楚所有需求，可以先抛出一个模糊的方向，让 AI 帮你探索可能性。

2. 资源和技术选型

我让 Claude Code 帮我找五代十国时期的矢量地图。它从 Wikimedia Commons 下载了14张历史地图。

但这里踩了个坑： Claude Code 一开始直接帮我生成了 SVG 矢量版本地图，我赶紧叫停了，说我要的是完全正确的图片，不是你后期去重新生成的图片。历史题材的东西，AI 生成的可信度不够，必须用真实资料。

涉及事实准确性的内容，要明确告诉 AI 不要生成，只能用真实数据。

3. 内容逐步完善

基础框架搭好之后，我开始加需求。

增加这些国家的相关信息，比如说国主是谁？然后 Claude Code 创建了君主数据文件，收录了 50 多位君主；

字体大小稍微有点小，它就全局调整字体；

底部国家列表和时间线重叠了，它就重构布局，改成左侧地图+右侧双列；

这个阶段就是边看效果边提需求，迭代很快。

4. 交互细节优化

继续优化，如果有新建国家或者国家灭亡，做一个明显的变化效果 → 它加了红色闪烁和绿色高亮；

英文小字和圆角矩形重叠了 → 它调整了布局；

政权建立提示和下方国家列表显得重合 → 它加了虚线分隔。

小经验：视觉问题要具体描述现象，不要说不好看，要说 XX 和 XX 重叠了、XX 太小了看不清，这样 AI 才能精准修改。

5. 内容增强

视频主体做完后，我发现右边有块空白，就问 Claude Code ：空白位置可以放点什么？可以插入史书中的典故吗？

Claude Code 帮我整理了 20 多条历史典故，还加上了出处标注。后来我又陆续加了年号显示、首都标注这些功能。

小经验：需求可以在过程中生长出来，不用一开始就想全。看到半成品自然会有新想法。

6. 细节打磨

最后就是通览检查，然后让它自查细节是否有问题。

柴荣写做郭荣（柴荣）； 放大了圆点和字体；圆点和时间线保持完全的水平对齐等等。

最后这个阶段花的时间多点，但细节真的决定最终效果。

7. 导出

直接让 Claude Code 帮我执行导出命令，比在Remotion Studio 里面手动操作快得多。我说按照一倍速的节奏导出视频就出 1080p ，其他尺寸也一样，说导出 2K 的视频也会直接执行。不用自己研究命令行和提示词怎么写，说人话就行。

其实也可以基于这个排版进行美化的，做出更好看的界面，但我想想这样效果也不错，整太多花样可能反而可能看不清太多信息，就此作罢了。

个人建议

有想法就直接说，不用替 AI 想能不能做到。很多时候我们会自我设限，觉得这个要求太复杂了吧。其实不用想这么多，直接说就行。能做它就帮你做，做不到它会告诉你为什么，或者给替代方案。

有时候可能描述现象比描述解决方案更好。与其说帮我把这个 div 的 margin-top 改成 20px （哈哈是我的习惯），不如说这两个元素之间的距离太近了。让AI来想具体怎么改，我们只需要描述看到的问题。

迭代式推进，不用一步到位。先做个能跑的版本，看到效果再提新需求。我这里很多功能都是看到半成品之后才想到要加的。

操作类的事情都可以让它代劳。创建项目、启动预览、导出视频，都直接让 Claude Code 来做，比自己手动操作快。

一个遗憾

我本来想找每一年精确的疆域矢量 SVG 地图，这样可以动态展示每一年的领土变化。但矢量格式的历史地图资源它找不着， 找了很久也没找到合适的，它自己绘制的都奇形怪状离大谱，我最后还是决定用现成的图片地图。

最后用的是维基百科上开放授权的历史地图，一共 4 个时期的版本：后梁时期、后唐时期、后晋/后汉时期、后周时期。虽然能大致展示不同阶段的格局，但可能和某些年份的实际疆域有一点出入。

如果有朋友知道哪里有比较全的历史地图矢量资源，欢迎评论区告诉我，非常感谢~

小结

叠甲：我发了视频以后朋友问我这个准不准，说实话我抽查了一下没啥问题，但也不排除出错，我主要还是提供一个思路，大家如果需要做这类视频或者可视化效果做个参考，如果出错了一定是 AI 的错🐶

《太平年》的故事背景是五代十国末期到北宋初年。剧里有句话让我印象很深：这是一个天下未定的时代。

但光看剧，很难感受到这个未定有多剧烈。做完这个视频我才真的有了实感：54 年，几十位皇帝，十几个政权你方唱罢我登场。今天还是开国之君，明天可能就成了亡国之主。

希望这个动画能帮大家理清楚这段乱世，追剧的时候大概心里有数。

另外，小声感叹，还好我们生在太平年啊，感谢所有先辈的付出和牺牲，感恩每一天❤️