别再让AI做黑底灰卡片：用 Stageshow 做产品界面插图与游标动画

admin 设计创意 16小时前

32 0

编码代理很容易生成“深色窗口 + 紫色渐变 + 一排灰卡片”，但产品官网真正需要的是让观众一眼看懂功能的界面插图。Benji Taylor 开源的 Stageshow 就是为这个问题准备的。下面把它拆成一套能跟着做的流程。

说明：示例画面来自 Stageshow 官方开源代码的本地预览，本站按官方工具实际渲染截图；提示词为本站依据作者方法整理的复现模板，不是作者原文逐字提示词。

Stageshow 官方示例总览 — Stageshow 支持产品插图、游标演示、Bento 网格与手机界面。

第一步：安装前先看源码和权限

npx skills add benjitaylor/skills --skill stageshow

项目主体是 MIT 许可，需要 Node 20.19 或更高版本。它会在项目中写入文件，预览与录制脚本会运行本地命令，安装前应先阅读 SKILL.md、LICENSE 和 NOTICE.md。第三方应用图标和商标不在 MIT 许可范围内，正式发布时应替换为自有品牌素材。

给 Codex 的第一条提示词：

先阅读 Stageshow 的 SKILL.md、LICENSE 和 NOTICE.md，不要开始写代码。
告诉我：
1. 它会在当前项目写入哪些文件；
2. 会运行哪些本地命令或使用哪些网络资源；
3. 哪些图标、商标或照片不能直接用于我的商业页面。
只输出审核结果和安装计划，等我确认。

第二步：先写“一个动作”，不要一口气演示整个产品

Stageshow Hero Demo 官方实例 — 官方 Hero Demo 把故事限制为几个清楚节拍，而不是在小卡片里塞满整个后台。

先定义媒介、显示尺寸、主角对象、用户动作和最终反馈。一个演示只讲一件事，三到五个节拍就够了。

可复制提示词：

用 Stageshow 为我的 [产品名] 做一个首屏功能演示。
媒介：一段 10 秒循环动画，宽 900px，同时提供 390px compact 版。
只讲一个动作：用户把 [对象] 指派给 [角色]，最后显示 [可见反馈]。
请先写出 3–5 个节拍、每个节拍的持续时间和用户能看见的因果，不要写代码。
删除与这个动作无关的面板、数据和装饰。

第三步：找最接近的官方示例，复制结构而不是只看截图仿写

Stageshow Static Card 官方实例 — 官方 Static Card 用明确焦点、裁切和留白建立层级。

Stageshow 把示例分成金牌案例、产品研究和故意错误的教学对照。官方建议直接复制最接近示例的文件夹，保留尺寸、裁切、间距和节拍结构，再替换为自己的品牌。

可复制提示词：

请在 Stageshow 的 gold examples 中找一个最接近我需求的案例。
先给出你选它的理由：故事类型、主角对象、裁切方式、视线落点和移动端结构。
复制该示例文件夹作为起点，保留它的舞台尺寸、窗口比例、裁切和节拍；
只替换成我的产品内容、品牌 token 和交互故事。
不要复制其他产品的 Logo、图标、真实文案或商标。

第四步：限制真实文字，把层级留给主角

Stageshow AI Chat 官方实例 — 官方 AI Chat 示例让问题、思考状态、答案和来源按因果顺序出现。

通常只保留 3–7 条真实字符串：用户正在操作的对象、关键按钮和最终结果。其他内容可用低对比占位线表示，但不能把主角也变成灰条。

可复制提示词：

在当前界面中做一次内容减法：
1. 列出观众必须读懂的 3–7 条真实文字；
2. 把其余非关键文字替换为安静的占位线；
3. 保证视线首先落在 [最终结果]，其次是 [用户动作]；
4. 删掉火花图标、紫色渐变、无意义的发光边框和重复状态。
先输出删改清单，再修改代码。

第五步：桌面和手机都录一遍，让代理先找最大的可见问题

Stageshow Bento 官方实例 — 官方 Bento 示例通过主次块、不同材质和裁切共同建立节奏。

官方脚本可录制定格、联系表、手机宽度与状态序列。自动检查不能取代观看动画：先修构图、再修层级、然后修动效，最后才处理阴影与圆角。

node scripts/film.mjs "http://stageshow.localhost:1355/?capture=[你的示例]" --select "#example" --still --out still.png
node scripts/film.mjs "http://stageshow.localhost:1355/?capture=[你的示例]" --select "#example" --width 390 --gate --out mobile.png

可复制验收提示词：

请按 Stageshow 的 rehearse 流程验收当前示例：
1. 生成桌面定格、完整动画联系表和 390px 手机版；
2. 报告裁切、文字溢出、不均匀间距、动效跳变和循环缝隙；
3. 人工观看每个节拍，只列最大的三个可见问题；
4. 按“构图 → 层级 → 动效 → 细节”的顺序修复，每轮只改一类问题；
5. 重新录制并对比前后结果，不要只报“检查通过”。