---
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年7月15日 22:45
官网做完以后，很多人最后只发三张截图：首屏一张、功能区一张、价格页一张。
截图能说明页面长什么样，却很难回答更重要的问题：这个产品到底怎样工作？用户点进去以后，能得到什么结果？
如果产品本身有流程，静态截图还会把最有价值的部分藏起来。
这次我们用自建的 AI 会议演示产品“会澜 MEETFLOW”做了一条 24 秒视频：从会议里的三句话开始，经过 AI 提炼，最后变成有人负责、有截止时间的行动项。
产品演示不是把页面轮流展示一遍，而是让观众在几十秒内看懂一条业务结果链路。
先看 24 秒成片
这条视频没有旁白，也没有把功能逐个念一遍。
24 秒里只讲一件事：会议结论怎样变成可以继续追踪的行动项。
看完结果，再拆它是怎样做出来的。
先别加转场，先锁定一句话
开始做视频前，我们先把它要证明的事情压成一句话：
会议结束后，结论不会停在纪要里，而会继续变成可以追踪的任务。
这句话决定了整条视频不能从“产品有多少功能”出发，而要从一场具体会议出发。
24 秒被拆成 5 段：
1.开场：会议结束后，工作才真正开始。
2.会议讨论：出现三条未经整理的关键信息。
3.提炼结果：识别决策、试验调整和风险。
4.行动项：补上负责人、截止时间和状态。
5.结果页：所有信息进入可以继续追踪的工作台。
24 秒视频的五段真实成片关键帧
如果先从功能菜单出发，视频很容易变成“首页、看板、设置、报表”依次闪过。页面很多，观众却不知道产品解决了什么。
Codex 和 Remotion 各做什么
这条视频采用代码生成，不是在剪辑软件里逐帧搭画面。
Codex 负责把产品目标、文案、场景顺序和视觉规则写成 React 组件：哪一段从第几帧开始，文字怎样出现，画面怎样淡入，哪些元素要保持固定。
Remotion 负责把这些组件放进时间轴。画面宽高、帧率和总时长都写进同一个视频工程，再通过 Remotion Studio 预览和渲染。
我们这条演示的参数是：
·1920 × 1080 画面
·30 帧/秒
·720 帧，也就是 24 秒
Codex 写的是镜头逻辑，Remotion 把逻辑变成可以预览、修改和重复渲染的时间轴。
Remotion Studio 中的真实项目、预览画面与时间轴
代码生成视频最大的价值，不是“看起来更像程序员”，而是可重复修改。
负责人名字变了，可以改数据；品牌色变了，可以改颜色变量；某一段太快，可以改帧数。只要结构没有推倒，下一版不需要从空白时间轴重新剪。
画面要展示业务变化，不是装饰动画
我们没有把重点放在光效、粒子和复杂转场上。
真正需要被看见的是信息怎样变化。
会议原话进入系统后，先被分成三类：关键决策、试验调整和风险提醒。每一条都保留来源时间，方便人工回看和确认。
AI 提炼三类信息的真实成片画面
确认之后，它们才继续变成行动项。任务名称、负责人、截止时间和状态同时出现，观众不需要听一段解释，也能看懂“会议纪要”和“继续推进工作”的区别。
行动项进入推进状态的真实成片画面
最后一页没有再堆功能，而是回到整条视频的结论：不是记录更多，而是让工作继续。
最终工作台结果的真实成片画面
为了不碰客户资料，这里的品牌、人物和业务数据都是演示素材。正式制作时可以换成真实页面，但客户姓名、联系方式、金额和内部项目名称应该先替换或打码。
一条演示视频，至少检查这 6 件事
代码能成功渲染，不等于视频已经能用。
我们先单独渲染开场、决策、行动项和结果页，再从完整 MP4 里按时间抽帧，检查中间状态。最终确认没有空白帧、中文截断、元素重叠和转场断层。
从业务目标到逐帧验收的制作清单
你可以先按这 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生成
