--- title: 官网做完别只放截图：Codex + Remotion 做了一条 24 秒产品演示 source: https://mp.weixin.qq.com/s/lCWOgecf-AECey8xFts9hg author: - "[[大拓未来]]" published: created: 2026-07-17 description: 官网做完了，为什么客户还是看不懂产品？这次我们用 Codex + Remotion，把“会议结论如何变成行动项”做成一条 24 秒演示，并拆开讲清分镜、代码生成和逐帧验收。 tags: - clippings - 动画 - codex - remotion words: 2026-07-17: 1848 --- 大拓未来 大拓未来科技 *2026年7月15日 22:45* 官网做完以后，很多人最后只发三张截图：首屏一张、功能区一张、价格页一张。 截图能说明页面长什么样，却很难回答更重要的问题：这个产品到底怎样工作？用户点进去以后，能得到什么结果？ 如果产品本身有流程，静态截图还会把最有价值的部分藏起来。 这次我们用自建的 AI 会议演示产品“会澜 MEETFLOW”做了一条 24 秒视频：从会议里的三句话开始，经过 AI 提炼，最后变成有人负责、有截止时间的行动项。 产品演示不是把页面轮流展示一遍，而是让观众在几十秒内看懂一条业务结果链路。 先看 24 秒成片 这条视频没有旁白，也没有把功能逐个念一遍。 24 秒里只讲一件事：会议结论怎样变成可以继续追踪的行动项。 看完结果，再拆它是怎样做出来的。 先别加转场，先锁定一句话 开始做视频前，我们先把它要证明的事情压成一句话： 会议结束后，结论不会停在纪要里，而会继续变成可以追踪的任务。 这句话决定了整条视频不能从“产品有多少功能”出发，而要从一场具体会议出发。 24 秒被拆成 5 段： 1.开场：会议结束后，工作才真正开始。 2.会议讨论：出现三条未经整理的关键信息。 3.提炼结果：识别决策、试验调整和风险。 4.行动项：补上负责人、截止时间和状态。 5.结果页：所有信息进入可以继续追踪的工作台。 ![图片](https://mmbiz.qpic.cn/mmbiz_png/uRovNpOa30byB79Nh82PRemX7Yib4DHMwCr1gicMvjAaicbeicYxeVkP4yofiaOGkHAXqKHLTDEtIIxffOgxZwRIs05iahxbsa8NSDZvBqcP83yrI/640?wx_fmt=png&watermark=1#imgIndex=0) 24 秒视频的五段真实成片关键帧 如果先从功能菜单出发，视频很容易变成“首页、看板、设置、报表”依次闪过。页面很多，观众却不知道产品解决了什么。 Codex 和 Remotion 各做什么 这条视频采用代码生成，不是在剪辑软件里逐帧搭画面。 Codex 负责把产品目标、文案、场景顺序和视觉规则写成 React 组件：哪一段从第几帧开始，文字怎样出现，画面怎样淡入，哪些元素要保持固定。 Remotion 负责把这些组件放进时间轴。画面宽高、帧率和总时长都写进同一个视频工程，再通过 Remotion Studio 预览和渲染。 我们这条演示的参数是： ·1920 × 1080 画面 ·30 帧/秒 ·720 帧，也就是 24 秒 Codex 写的是镜头逻辑，Remotion 把逻辑变成可以预览、修改和重复渲染的时间轴。 ![图片](https://mmbiz.qpic.cn/mmbiz_png/uRovNpOa30Zm3tk9sTNbkPcib5vjaibvsXu7QoeibQLRibsVoqo8LDhBdCobyBQBJXu3ulAkzXd5EOPR5HiaAV9UV0YbpwC7hUU2uic35grsJ9ZKE/640?wx_fmt=png&watermark=1#imgIndex=1) Remotion Studio 中的真实项目、预览画面与时间轴 代码生成视频最大的价值，不是“看起来更像程序员”，而是可重复修改。 负责人名字变了，可以改数据；品牌色变了，可以改颜色变量；某一段太快，可以改帧数。只要结构没有推倒，下一版不需要从空白时间轴重新剪。 画面要展示业务变化，不是装饰动画 我们没有把重点放在光效、粒子和复杂转场上。 真正需要被看见的是信息怎样变化。 会议原话进入系统后，先被分成三类：关键决策、试验调整和风险提醒。每一条都保留来源时间，方便人工回看和确认。 ![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/uRovNpOa30b0NCDiar0ceW3m1ghNm1KUDVb1Ox9vYI26m8ZNiaQvicqhJ5xnPPLTHS5ACZNhsZ6yLHqoqibkselJoXppqBkTATSAYicPS1ecylug/640?wx_fmt=png&watermark=1#imgIndex=2) AI 提炼三类信息的真实成片画面 确认之后，它们才继续变成行动项。任务名称、负责人、截止时间和状态同时出现，观众不需要听一段解释，也能看懂“会议纪要”和“继续推进工作”的区别。 ![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/uRovNpOa30bOxLBiavHIHxA9LUuR3uL1iaOaFTEK6icfrQG1TgCicq7taaRblYqC9t6GIL8KCtgP7ymlF48mbfKZmhfdhyvvOibiarrBfnY8eGiaics/640?wx_fmt=png&watermark=1#imgIndex=3) 行动项进入推进状态的真实成片画面 最后一页没有再堆功能，而是回到整条视频的结论：不是记录更多，而是让工作继续。 ![图片](https://mmbiz.qpic.cn/mmbiz_png/uRovNpOa30YH2AhcjULpMYjNobWm5YqTSYHxukF5Kwv7QBBeyianpibp2dkkZFYZgic3sdw1p71iaJvQUSurjicUHhc4vNj9gcOz6NdjBBpzh1U8/640?wx_fmt=png&watermark=1#imgIndex=4) 最终工作台结果的真实成片画面 为了不碰客户资料，这里的品牌、人物和业务数据都是演示素材。正式制作时可以换成真实页面，但客户姓名、联系方式、金额和内部项目名称应该先替换或打码。 一条演示视频，至少检查这 6 件事 代码能成功渲染，不等于视频已经能用。 我们先单独渲染开场、决策、行动项和结果页，再从完整 MP4 里按时间抽帧，检查中间状态。最终确认没有空白帧、中文截断、元素重叠和转场断层。 ![图片](https://mmbiz.qpic.cn/mmbiz_png/uRovNpOa30ZFIbNvofkib7I1vO4k6xJMsvk4Huiaiahz88cbOMkY8jTOXMqbEMq6yU8ib3MDhIUpK6q8iaa7SsYrgrthJ5GgmWF2KpqIf6AsvbtM/640?wx_fmt=png&watermark=1#imgIndex=5) 从业务目标到逐帧验收的制作清单 你可以先按这 6 项检查： 1.能不能用一句话说清视频要证明的结果？ 2.每个镜头是不是只承担一个主要信息？ 3.画面里有没有真实字段、状态或操作结果？ 4.文字在手机上缩小后还能不能看清？ 5.人物、品牌和业务数据是否可以公开？ 6.有没有检查转场中间帧，而不只是开头和结尾？ 这个 prompt 可以直接改 你是产品演示导演兼 Remotion 前端工程师。 请把下面的产品信息整理成一条 24 秒、16:9 的产品演示： 产品：一套把会议结论转成行动项的 AI 工作台 目标读者：小团队负责人、项目经理、小微企业主 核心结果：会议结束后，决策、任务、负责人和截止时间进入可追踪链路 请先输出： 1\. 一句话叙事目标 2\. 5 段分镜，每段包含时长、主画面、屏幕文案和转场 3\. Composition 的宽高、帧率和总帧数 4\. React/Remotion 组件结构 5\. 需要准备的真实素材清单 6\. 渲染后的关键帧验收清单 约束： \- 不堆功能菜单 \- 每个镜头只讲一个主要变化 \- 中文必须短，手机缩小后仍可读 \- 不使用未经脱敏的客户数据 \- 先输出分镜，确认后再写代码 不准备写代码也没关系。你可以先只让 AI 输出“一句话目标 + 五段分镜”，再拿着分镜去剪映或其他剪辑工具里完成。 小拓提醒：如果只是一次性的情绪短片，传统剪辑工具通常更直接。Remotion 更适合产品演示、数据播报、模板化内容，以及需要反复改文案、颜色和数据的场景。 你更想看我们把哪类页面做成演示视频：AI 工具、企业后台，还是小程序？ 大拓未来，陪你把 AI 真正用起来。 作者提示: 内容由AI生成