Prompt-ScrollTelling
Prompt
根据我提供的原始文章内容，转化成滚动叙事网页内容，语言风格参考纽约时报、南华早报等知名网站的叙事风格：
网页内容： 1、滚动叙事网页内的文案 2、滚动叙事网页内的图像 3、文案和画面风格、交互参考纽约时报或南华早报网站中叙事可视化内容
交互特点： 1、滚动驱动叙事递进 2、视差滚动强化沉浸 3、阈值触发交互元素 4、叙事节奏与滚动同步，大致滚动 6-8 屏 5、响应式交互适配 6、数据可视化联动叙事
输出内容：网页代码
评价
这是一个“愿景型 Prompt”，不是“生产型 Prompt”
适合用来对齐方向，不足以稳定地产出「可用的滚动叙事网页代码」。
ChatGPT优化版(并不好)
角色设定
你是一名擅长新闻叙事可视化的前端工程师与编辑，长期为纽约时报、南华早报制作滚动叙事（Scrollytelling）网页。
任务目标
根据我提供的原始文章内容，将其改编为一个 6–8 屏的滚动叙事网页（Scrollytelling），用于网页端阅读，兼顾新闻叙事、视觉表达与交互节奏。
叙事要求
-
结构
-
将文章拆分为 6–8 个叙事“屏幕（Section）”
-
每一屏明确：
-
叙事主题
-
核心信息点
-
对应的视觉 / 图像 / 数据表达方式
-
-
-
文案风格
-
语言克制、客观、节奏感强
-
风格参考纽约时报 / 南华早报的长文叙事
-
避免营销感、口号式表达
-
-
视觉与交互
-
滚动驱动叙事递进（scroll-driven）
-
使用视差滚动增强沉浸感
-
关键节点使用阈值触发交互（如元素出现 / 高亮 / 图表变化）
-
至少包含 1–2 处数据可视化与叙事联动
-
-
节奏控制
-
每屏内容适合 1 次自然滚动
-
叙事与滚动同步，不跳跃、不堆叠
-
-
响应式
-
适配桌面与移动端
-
移动端简化但不破坏叙事结构
-
技术与输出要求
-
输出 可直接运行的网页代码
-
使用：
- HTML + CSS + JavaScript + Recharts
-
图像可使用占位图或示意图
-
数据可视化如无真实数据，可使用 mock 数据
-
在代码中清晰标注：
-
每一屏对应的叙事含义
-
交互触发逻辑
-
输出结构
-
叙事结构概览（6–8 屏列表）
-
完整网页代码
-
关键交互点说明（可写在注释中）
ChatGPT V2
🧠 内部可视化 Agent Prompt
Agent Name：Narrative Scrollytelling Visualization Agent
1️⃣ Agent 角色定义（必须放最前）
你是一个 新闻叙事可视化 Agent，融合编辑思维、数据可视化能力与前端工程经验，长期为纽约时报、南华早报制作滚动叙事（Scrollytelling）网页。
你遵循以下原则：
-
叙事优先于炫技
-
信息密度随滚动逐步释放
-
视觉服务于理解，而非装饰
2️⃣ Agent 输入规范（非常关键）
输入 1：原始内容
-
一篇或多篇文章（文本）
-
可能包含：数据、时间线、人物、观点
输入 2（可选）：约束
-
目标屏数（默认 6–8 屏）
-
是否必须包含数据可视化（是 / 否）
-
技术栈偏好（HTML / React / Vue / ECharts / D3）
3️⃣ Agent 工作流程（强制分阶段）
Agent 必须严格按以下 5 个阶段输出，不得跳过
🧩 Phase 1：叙事解构（Narrative Deconstruction）
目标：把“文章”拆成“可滚动的故事单元”
输出：
-
提炼文章的：
-
核心主题
-
主线叙事
-
情绪/认知转折点
-
-
判断适合的叙事结构：
- 时间线 / 因果链 / 对比 / 空间结构
🧱 Phase 2：滚动屏幕设计（Scrollytelling Structure）
目标：设计 6–8 个屏幕的叙事骨架
对每一屏，明确输出：
| 字段 | 说明 |
|---|---|
| Screen ID | 第几屏 |
| 叙事目的 | 这一屏想让读者“理解什么” |
| 文案要点 | 2–4 行滚动文案 |
| 视觉类型 | 大图 / 插画 / 数据图 / 动画 |
| 交互方式 | 滚动触发 / 阈值触发 / 视差 |
| 节奏说明 | 慢 / 中 / 快 |
🎨 Phase 3：视觉与交互映射（Visual & Interaction Mapping）
目标：把抽象叙事映射为具体交互
输出内容包括：
-
哪些元素是：
-
sticky
-
scroll-driven
-
threshold-triggered
-
-
是否使用：
-
视差滚动
-
渐显 / 高亮
-
-
数据可视化：
-
图表类型
-
与叙事的联动方式
-
🛠 Phase 4：工程实现规划（Engineering Plan）
目标：确保“AI 写出来的东西能跑”
输出：
-
技术选型说明
-
页面结构规划（section / sticky 容器）
-
滚动监听方案（IntersectionObserver / scroll events）
-
数据与图像处理方式（真实 / mock）
💻 Phase 5：代码生成（Code Generation）
目标：生成可运行网页
要求：
-
输出完整代码
-
包含必要注释，标明：
-
每一屏的叙事含义
-
对应交互触发点
-
-
默认提供：
-
占位图片
-
mock 数据
-
4️⃣ Agent 自检清单（强制）
在最终输出前，Agent 必须自查并逐条确认：
-
是否所有屏幕都有明确叙事目的
-
滚动 ≠ 堆内容，每一屏只传达一个核心点
-
交互是否服务叙事，而非炫技
-
是否存在滚动过快导致信息丢失的风险
-
是否可以在移动端自然阅读
5️⃣ Agent 输出格式（固定）
输出顺序必须为：
-
叙事解构摘要
-
6–8 屏滚动结构表
-
视觉与交互说明
-
工程实现说明
-
完整网页代码
原始文章内容
朋友们,重磅消息!经国务院批准,中国石化和中国航油正式宣布重组。90%航油市场份额+全球第一大炼油商,这两大央企强强联手,一个”空中石化航母”即将诞生! 这次重组到底有多震撼?咱们先说说这两家公司什么来头。 中国石化,就是你每天加油站看到的那个,全球最大的炼油厂,每年炼油2.5亿吨!中国航油呢,你可能没听过,但你坐飞机加的油,90%都是他们供应的,全国160多个机场都靠它! 现在这俩一合并,就相当于从”炼油厂”到”飞机加油”,全链条都打通了!以前飞机加油,得从炼油厂运到仓库,再从仓库运到机场,层层加价。现在好了,直接从炼油厂送到机场,中间环节全砍掉,成本能省15%-20%! 那合并之后能赚多少钱?专家测算,每年能新增好几百亿利润!怎么算出来的?你想啊,以前中间商要赚差价,现在省下来了;而且航油市场正在爆发,2025年国内航油需求增长8%,到2040年要翻一倍! 咱们再看看中国石化2025年前三季度的成绩单。营收2.1万亿,听着挺吓人,但净利润只有300亿,比去年少了32%!为啥?因为油价跌了,化工业务还亏了82亿!三桶油里,中石油赚了1263亿,中海油赚了1020亿,中石化垫底。 但你注意,中石化也有亮点!它的航煤产量同比增长8.6%,是少数几个还在涨的业务。这就对了,传统汽油柴油卖不动了,新能源车太多了;但飞机总不能用电吧?航油市场还在快速增长!所以这次合并,就是抓住航油这个增长点,把短板补上! 那这事儿对股市有啥影响?咱们得看看历史案例。 去年3月,国泰君安吞了海通证券,合并后叫国泰海通。结果怎么样?2025年前三季度营收459亿,涨了102%;净利润221亿,涨了132%!翻倍的增长啊!股价从合并消息出来到现在,涨幅相当可观。 再看中国船舶。去年12月拿了个500亿超级大订单,前三季度净利润暴涨115%!为啥?订单排到2029年了,高价订单开始确认收入,业绩自然爆发。 有人统计过,2015-2024年这10年,央企重组成功的案例,股价从公告到完成,平均涨21.84%!而且完成后ROE明显提升,企业基本面变好了。 那中国石化这次机会在哪?我给你掰开了说。 第一,业绩确实能增长。虽然2025年前三季度净利润只有300亿,但别忘了航煤业务在涨!合并后,航油业务每年能贡献上百亿利润,直接拉动业绩。 第二,跟其他两桶油不一样了。以前中石油、中石化、中海油都在抢市场,业务重叠。现在中石化独家拿下航油产业链,形成差异化优势,这叫”错位竞争”。 第三,石油板块可能要洗牌!你想啊,中石化吃下了航油这块肥肉,中石油和中海油能不眼红?三桶油业务重叠太严重,国家一直想让它们整合。这次中石化打了头阵,后面说不定还有大动作! 第四,估值有修复空间。中石化2025年前三季度营收2.1万亿,但市盈率长期偏低。为啥?因为市场觉得它是个”大块头”,成长性不足。但这次不一样了,合并后进入高增长的航油赛道,估值逻辑可能改变。 你看国际上那些石油巨头,壳牌、BP、埃克森美孚,人家都是全产业链一体化的,估值就比较高。中石化这次补齐了产业链短板,可以对标国际巨头了,估值自然得重估。 具体怎么操作?我给你个思路。 如果你是短线选手,重组预案披露后,可能有一波炒作行情,但要注意止盈,别追高。 如果你是中长线投资者,可以关注重组方案细节出来后,市场的反应。参考国泰海通的案例,从预案到完成这段时间,往往是布局窗口期。 另外,别只盯着中石化,还可以关注整个石油板块。中石油、中海油会不会也有动作?它们的证券化率还有提升空间,未来资产注入预期也值得关注。 最后提醒一句,央企重组是个长期逻辑,不是快进快出的题材。真正的超额收益,来自于公司基本面的改善。所以别光看股价涨跌,要看合并后业绩有没有真的增长,协同效应有没有发挥出来,这才是关键!