产品还没做出来就先有了宣传片

一位 AI 内容创作者虚构了一款 AI 写作工具，没写一行后端，只让 Codex 配合开源 Skill Stageshow 搭了一套模拟界面，然后用这套界面派生出三样宣传素材：一段 12 秒的操作演示、一张官网首页大图和一张 Bento 功能卡片。真正省事的地方是：三样素材共用一套界面、配色和数据，风格天然统一，换个场景不用从头设计。

示意图由 AI 生成，仅说明思路，不是案例里的实际素材。

先看这套素材

这款虚构的工具分四块：帮你想选题，写初稿，给文章配图，最后管理待发布的内容。作者用一套模拟界面做出了下面这些：

素材	画面里发生了什么	适合放在哪
模拟产品界面	四个模块的界面，用同一套组件和品牌色	后面所有素材的底稿
12 秒操作演示	输入内容方向，推荐选题，生成初稿，配上图，最后进入待发布	官网首屏和产品介绍页，也能发社交媒体
首页大图	产品界面加品牌信息和核心卖点，拼成一张营销图	官网首页、发布公告
Bento 功能卡片	四个模块拆成四格卡片，围绕同一篇文章讲完整流程	功能介绍页、长图

演示里的"AI 生成"用的都是预设数据，虚构产品并没有真的 AI 功能。视频导出也不是 Stageshow 自带的能力，是 Codex 配合其他录制工具完成的。

下面是 Stageshow 仓库自带的示例，能看出它做的界面是什么质感：

图片来自 Stageshow 的 GitHub 仓库。案例中的数据和效果是作者的公开说法，我们没有核实，也没有自己做一遍。

为什么有效：三个习惯

• 先有一套界面，再派生素材：界面、配色和示例数据只准备一次，后面的视频、大图和卡片都从它出发。分开做的素材很难长得像一家公司的产品，从同一份底稿出来的天然统一。
• 一段动画只讲一件事：Stageshow 要求一段演示 3 到 5 个节拍、十几秒，每次光标移动都有原因，最后停在结果上。真实文字只放在故事发生的地方，其余用灰色占位条，画面才不会像 AI 胡乱堆出来的。
• 从范例改，录下来再看：它自带几十个范例和一个录制检查脚本。Agent 先找最接近的范例改，做完把动画录成一排关键帧自己检查，有问题修到通过才交付，不是画一张就交差。

照着搭：五步 SOP

这五步人和 Agent 都能照做。把 Stageshow 这个 Skill 交给你的 Agent，让它每完成一步对照"完成标准"自查，等你确认再进下一步。

容易踩的坑

• 把演示当成真功能宣传：画面里的 AI 结果是写死的。产品还没做到的功能，宣传文案别写成已经上线。
• 每一行都塞真文字：信息越满越像 AI 生成。让观众只看清故事里那几处，其余留成占位条。
• 借了别人的产品当门面：范例里有 Figma、Slack 这些真实产品，只能借它们的交互，不能把名字和图标搬进你的素材。
• 只看一张静帧就交付：一帧好看不代表动起来顺。要让 Agent 录完整的循环，你自己也从头看一遍。
• 以为完全不用代码：Codex 会写 React 和 CSS，电脑上要有能跑 Node 的环境。改动画节奏、导出视频，往往还要来回几轮。

Agent 要用的安装和检查步骤见 Stageshow 的 Skill 页面。项目地址：benjitaylor/skills。