AI 做“纽约时报级”视觉叙事？我试了，差点把笔记本电脑干没电……

大家好，今天想跟大家聊聊一个我最近折腾得挺上瘾，也挺“心力交瘁”的话题：用 AI 来搞定那些看起来特别酷炫、特别高级的复杂专题页面，尤其是《纽约时报》那种滚动叙事（Scrollytelling）效果。

上周五，我兴冲冲地发了篇教程，标题大概是《<纽约时报>级的滚动叙事，原来用 AI 这么简单就能做？》。嗯，现在看来，这个标题可能有点……过于乐观了。

当时我用的是 Claude 3.7，给它喂了一套我精心设计的提示词，想让它从零开始，用基础的 HTML/CSS/JS（顶多加个 Tailwind）给我生成一个滚动叙事页面。想法很美好，对吧？AI 嘛，无所不能。

结果呢？测试下来发现，这种“从零造轮子”的方式，效果很不稳定。要么交互卡顿，要么动画效果平庸。

为什么会这样？我们来剖析下问题的本质。

滚动叙事专题，看着简单，其实门道很深。它不仅仅是几个元素的淡入淡出。核心在于，它需要将用户的滚动行为（你在页面上滚了多少）和视觉元素的状态（比如图片放大缩小、文字固定、背景切换、图表跟着更新等等）进行极其精确的同步。 这背后涉及到大量的滚动事件监听、视窗位置计算、元素状态管理……一堆琐碎但又必须严谨的活儿。

让 AI 从头写这些逻辑，无异于让一个刚学会加减乘除的小学生去解微积分。它也许能“模仿”出一些样子，但很难做到健壮、流畅，更别说优雅了。这，就是典型的“重复造轮子”，而且还是造一个特别容易散架的轮子。

痛定思痛，我意识到方向错了。我们不应该强迫 AI 去“发明”那些已经被无数顶尖开发者打磨过的解决方案。正确的姿势是：让 AI 学会调用现成的、成熟的“轮子”——也就是那些专门解决滚动叙事问题的开源库。

我做了点功课，发现市面上有几个不错的选择：

1. Scrollama.js: 轻量级选手，专门为滚动叙事设计。它的逻辑很简单，就是把页面分成一个个“步骤”（steps），你滚动到某个步骤，它就触发相应的事件，你可以在这些事件里更新视觉元素。非常适合做那种“左边文字滚动，右边图片/图表变化”的经典叙事模式。优点是 API 简单，上手快。
2. GSAP (GreenSock Animation Platform) + ScrollTrigger 插件: 这可是个重武器！GSAP 本身就是专业级的动画库，性能炸裂，效果丝滑。加上 ScrollTrigger 这个插件，简直是为滚动叙事量身定做的瑞士军刀。元素固定（pinning）、滚动进度映射到动画进度（scrubbing）、复杂的视差效果……几乎无所不能。社区庞大，文档详细，但学习曲线也相对陡峭一些。适合搞那些需要高度定制、酷炫动画的硬核项目。
3. Intersection Observer API (浏览器原生): 这是浏览器自带的功能，不用加载外部库，性能不错。主要用来检测一个元素是不是进入了视口。用它来做简单的“元素滚入时触发动画”（比如淡入、滑入）挺方便。但它本身功能比较基础，对于复杂的滚动同步、固定等需求，就有点力不从心了，需要自己写大量额外的逻辑。它更像是一个“零件”，而不是一个完整的“解决方案”。

一番权衡，考虑到我想要实现的效果复杂度和未来可能的扩展性，我把目光锁定在了 GSAP + ScrollTrigger。毕竟，要玩就玩点专业的，对吧？

于是，我推翻了之前的提示词，围绕着如何让 AI 理解并运用 GSAP 和 ScrollTrigger 进行了重构。（提示词见文末）。同时，我也优化了让 AI 对文章内容进行预处理的提示词，目的是生成更适合 GSAP 使用的数据结构。

好了，技术方案升级完毕，接下来，就是一场实战演练了。

这事儿巧就巧在，刚好是周末。我开开心心地回了雁荡山老家，准备过个觅食、爬山、放空的美好周末。

周六，当我刚从雁荡山一条没什么人走的古道下来，一身臭汗地瘫在椅子上刷手机时，一条新闻跳了出来：潮新闻的特派记者从缅甸地震一线发回的报道。报道里提到，地震发生后，在缅甸的温州商会迅速行动，排查同胞安全，还组织了“爱心护送队”给救援队伍提供交通支持。

看到这条新闻，尤其看到“温州商会”这几个字，我心里咯噔一下，一个强烈的冲动涌了上来：我应该立刻做一个关于这次缅甸地震的滚动叙事专题！ 用我刚升级的“AI+GSAP”工作流。

说干就干！我匆匆扒拉了几口饭，拉上我夫人（她大概觉得我疯了），在雁荡山景区里找了家看起来还算安静的咖啡馆，准备开工。

整个咖啡馆就我们俩人。

第一步，信息搜集。我打开 Google Deep Research，输入了一段精心构造的提示词，要求它搜集关于缅甸地震的权威信息（时间、地点、震级、伤亡、破坏情况），并且特别强调要关注和中国、和温州相关的联系，比如国内震感、中方援助、当地华人社团的行动等等。

几分钟后，一份详尽、带引用来源的报告就生成了。我快速核对了几个关键信息，抽查了几个来源链接，确认准确性没大问题。然后，我又手动补充了几篇潮新闻关于温州商会救灾的报道。

第二步，AI 辅助写作。把整理好的信息喂给 Gemini 2.5 Pro（最近发现它写深度报道类的稿子确实有一手），让它生成一篇结构清晰、情感饱满的深度报道初稿。因为赶时间，这次没像平时那样让几个大模型都跑一遍对比挑选，直接用了 Gemini 的输出。

第三步，也是最最关键的一步：事实核查！ 哪怕时间再紧，这一步也绝对不能省。我让 AI 把稿子里所有直接引语和关键事实都标注出来源，然后我一个一个去核对。这能最大程度避免大模型的“幻觉”。

第四步，多媒体素材搜集。一篇好的滚动叙事，图片和视频是灵魂。我写了个提示词，让 AI 搜索引擎（腾讯元宝、秘塔 AI 搜索、Perplexity 同步进行）根据稿件内容，去查找权威媒体发布的、匹配各个段落的图片和视频素材，并直接把链接插回文章里。

理想很丰满，现实嘛……说实话，这几个 AI 搜出来的结果都不够理想，要么不相关，要么找不到直接可用的链接。没办法，只能老老实实地，把我手动搜集到的以及 AI 提供的一些线索链接，一个个点开，筛选、下载、整理。这是整个流程里最耗时的一步，足足花了我将近两个小时。

等我弄完文字稿和素材，已经是晚上快九点了。咖啡馆老板走过来，委婉地提醒我们：他们要打烊了。我这才手忙脚乱地收拾东西，匆匆离开。

回到家，我一摸背包，心凉了半截——电脑充电器，忘在咖啡馆了！ 赶紧联系老板，老板说她已经回家了，让我第二天早上十点后再去拿。

得，是我自己马虎，怨不得别人。

看着笔记本电脑右下角岌岌可危的电量图标，我只能赌一把，赌剩下的电量足够我完成最后也是最关键的步骤：让 AI 把这一切变成网页。

第五步，内容预处理。用之前优化过的那个针对 GSAP 的提示词，把文字稿和整理好的素材链接，交给 AI 处理成一个结构化的数据文件 content.js。这个文件就像一个“剧本”，详细规定了每个章节的内容、背景、需要什么样的动画效果等等。

第六步，AI 编码。打开 Cursor（一个集成 AI 能力的代码编辑器），把 content.js 文件和那个调用 GSAP 库的核心提示词喂给 Claude 3.7。

我紧张地盯着屏幕，心里默念：千万挺住啊，我的笔记本！

结果……出乎意料的顺利！

Cursor 非常稳定地输出了代码。而且，第一次生成的页面，无论是整体设计感，还是滚动时的动画交互效果（得益于 GSAP 的强大），几乎完美地达到了我的预期！那一刻，真的，非常兴奋！感觉所有的折腾都值了。GSAP + ScrollTrigger，果然名不虚传！

我赶紧把所有代码和素材上传到测试服务器，想用手机看看效果。结果发现，手机上的响应式布局有点小 bug。

正当我准备让 Cursor 帮忙修改这个 bug 时，屏幕一黑——电脑，彻底没电关机了。

“靠！” 我忍不住低声骂了一句。

无奈，只能等第二天拿到充电器再说。

然而，后续的改 bug 过程，比我想象的要复杂得多。不知道是不是我对 Cursor 或者 GSAP 还不够熟练，感觉就像打地鼠，改好一个 bug，经常又会冒出新的问题。这可能也是人与 AI 协作中，现阶段还难以避免的“磨合成本”吧。

所以，回到最初的问题：AI 能做“纽约时报级”的滚动叙事吗？

我的答案是：能，但不是无脑操作。 它不是魔法棒，你不能指望扔给它一堆文字图片就自动生成完美效果。你需要：

1. 理解问题的本质： 认识到复杂交互背后的技术难点。
2. 选择正确的工具： 让 AI 去调用成熟的库（比如 GSAP），而不是重复造轮子。
3. 精准的指令（Prompt Engineering）： 设计出能让 AI 理解你意图，并能有效利用所选工具的提示词。
4. 结构化的流程： 将任务拆解成信息搜集、写作、核查、素材整理、数据预处理、编码、调试等步骤。
5. 人类的判断和干预： 尤其是在事实核查、素材筛选、最终效果调试等环节，人的作用无可替代。

这个过程，更像是指挥一个（或一群）能力超强但需要精确指令的实习生，而不是请一位经验丰富的大师。它能极大地提高效率，拓展创意的边界，但也需要你投入相当的精力去学习、去引导、去“调试”和 AI 的合作关系。

这次“雁荡山赶工记”，虽然最后留了个小尾巴，但整个过程让我对 AI 在复杂内容创作领域的潜力有了更深的认识，也对其中的挑战有了更痛的领悟。

你怎么看 AI 在这类复杂创作任务中的应用？你有什么类似的经历或者踩坑经验吗？欢迎在评论区留言，我们一起聊聊！

我用AI做的缅甸地震专题：大地悲鸣：7.9级强震撕裂缅甸，曼德勒古城泣血

滚动叙事专题提示词模板

_{Posted using Obsidian Steemit plugin}