Stageshow 搭出像真产品的演示界面

用户要给产品做宣传素材，比如官网首页的大图和功能卡片，带光标操作的演示动画，或者 Bento 功能拼图，又不想截真实产品的图时，用这个 Skill。它来自 benjitaylor/skills 仓库，MIT 许可。仓库里除了 SKILL.md，还有一套可以复制的 React 小组件（kit/），几十个范例（examples/），以及把成品录成联系表（contact sheet）、自动挑毛病的检查脚本（scripts/film.mjs）。

做出来的是插画式的模拟界面：脚本里的 a.click() 只是画出光标按下的样子，a.set() 只是切换画面状态，不会去操作真实应用。

触发

用户说"给我的产品做个演示动画""做一张官网首页的产品图""做个 Bento 功能卡片""做一段光标点来点去的产品演示""产品还没做完，先做宣传素材"，或者要一个假的、模拟的产品界面用于营销页和文档。

不适合：

• 要录真实产品的操作视频（应该用录屏）。
• 没有 React 和 Node 环境、也不打算装的场合。
• 纯文字海报、和产品界面无关的插画。

硬性规则

1. 演示里的结果要说明是预设的。 模拟界面里"AI 生成"的选题、文章和图片都是写死的数据。交付时提醒用户：产品还没有的功能，宣传时不要写成已经上线。
2. 不冒用别人的产品。 范例里的 Figma、Linear、Slack 等真实产品只能借鉴交互，不能把它们的名字、logo 和界面当成用户的产品。assets/app-icons.ts 里的应用图标不在 MIT 许可范围内，不要直接用到用户的商业素材里。
3. 用用户自己的品牌。 有现成产品时，先读它的代码或网站，把配色、字体和圆角映射到 kit 的变量上（见 references/looks.md）。没有时先问清品牌色和风格，不要默认用紫色和闪光图标表示"AI"。
4. 安装前先确认。 要装 npm 包、复制 kit/ 进用户项目时，先说清楚装什么、放哪里，等用户同意。
5. 不跳过检查。 交付前必须用 film.mjs 录一遍完整循环并加 --gate，最后一行要是 rehearsal passed。只看一张静帧不算检查。

安装

先检查：

ls ~/.claude/skills/stageshow/SKILL.md ~/.agents/skills/stageshow/SKILL.md ~/.codex/skills/stageshow/SKILL.md 2>/dev/null || echo "not installed"
node -v   # needs 20.19 or later

没装的话，说明要用 skills 工具装一个 Skill，同意后：

npx skills add benjitaylor/skills --skill stageshow

装好后重启 Agent 才能识别。要在本地预览范例，进入 Skill 所在的 stageshow 文件夹：

npm install
npm run dev

macOS 和 Linux 打开 http://stageshow.localhost:1355，Windows 打开 Vite 打印的本地地址（一般是 http://127.0.0.1:5173）。录制检查要用本机装好的 Chrome（或设置 CHROME_PATH）。

先读哪个文件

先读 SKILL.md，再按任务只打开需要的参考：

任务	打开
怎么构图和裁切，选哪种版式	references/framing.md
静帧的细节：字数、间距、图标、颜色	references/craft.md
动画的故事、节奏、循环、光标	references/motion.md
Bento 拼图	references/bento.md
对接用户产品的配色和字体	references/looks.md
组件的属性和 Act 脚本接口	references/kit.md
录制、检查、交付清单	references/rehearse.md、references/verify.md

按需求选范例

先找最接近的范例，录一张静帧当标杆，再复制它的文件夹改成用户的产品，不要只看一眼就从头写。

需求	范例
静态功能卡片	static-card
首页演示动画（带光标）	hero-demo
深色首页大图	dark-hero
AI 对话、流式输出	ai-chat、ai-cards
内容加载、骨架屏变成真实内容	loading
Bento 功能拼图	bento、ruled-bento、staggered-bento、hero-grid
窗口加手机，讲同一件事	device-pair
手机 App	phone-touch、dynamic-island

流程

1. 先写计划。 放在哪个页面、多宽，是静帧还是动画；画面的焦点、发生的动作、最后停在哪个结果上；哪些可以不画。
2. 定外观。 映射用户产品的配色和字体。默认浅色、单一强调色；首页大图可以用更接近真实内容的写法。
3. 定故事。 动画 3 到 5 个节拍，10 到 16 秒，每次光标移动都要有理由。
4. 从范例改起。 复制最接近的范例，保留它的画布尺寸、裁切、行高和节拍，把外观和内容换成用户的产品。
5. 搭画面。 真实文字一般只放 3 到 7 处，其余用占位条（Bar、Text）。光标要碰的元素加 data-target，位置用 rect() 量，不要写死坐标。
6. 编排动画。 用 Act 接口，元素保持挂载、用状态切换，好让退场也有动画。
7. 录制检查。 先设 poster（多数人只看到这一帧），再录完整循环：

node scripts/film.mjs '<preview URL>' --select '.your-demo' --gate
node scripts/film.mjs '<preview URL>' --select '.your-demo' --width 390 --gate
node scripts/film.mjs '<preview URL>' --select '.your-demo' --states --gate

每一行输出都是观众会看到的问题，修到最后一行是 rehearsal passed。然后和标杆范例并排比较，再写一份 REHEARSAL.md：参照了哪个范例、改了什么、哪些没检查。

8. 派生其他素材。 演示通过后，首页大图和 Bento 卡片复用同一套组件、配色和数据，按 framing.md 和 bento.md 重新构图，不要把整个窗口缩小塞进卡片。

视频导出不是 Skill 自带的功能。要 MP4 时，告诉用户需要另外录制（例如用 Playwright 录屏或屏幕录制工具），并说明用的是什么。

常见毛病

• 太满：每行都是真文字、到处是数字，看起来像 AI 生成。
• 像线框图：只有两块灰条和一个按钮，认不出是什么产品。
• 装进盒子：整个窗口缩小、四周留同样的边，像贴了张截图。
• 一样重：所有元素同一个分量，眼睛不知道看哪。
• 假 AI 标志：紫色、闪光图标、彩色方块里放一个字母。

输出格式

1. 组件文件路径，以及静帧、联系表的文件路径。
2. --gate 的最后一行结果（桌面宽度和 390 宽度各一次）。
3. 哪些内容是预设数据，哪些还需要用户提供（真实截图、文案、品牌色）。
4. 要视频时：用什么工具录的、文件在哪。

一句话

先选最接近的范例改，真实文字只放在故事发生的地方，录完整循环过 --gate 再交付。