Stageshow：让 Agent 搭出以假乱真的产品界面插画与光标演示

产品功能做完了，落地页还缺一张讲清操作过程的图：贴真实截图太密，让 AI 直接画又会冒出不存在的按钮。GitHub Daily 在 2026-11-04 推荐的 Stageshow 是 Benji Taylor 给 Agent 的解法——一套开源 Skill（在他 1,585 星的 benjitaylor/skills 仓库里），让 Agent 用 React 搭出「长得像真产品」的假界面：静帧、功能卡、带光标的操作演示动画和 bento 格，构图与动效有内置章法，还带一套把结果录下来的工具，让 Agent 自己检查做得像不像。

核心功能

• 四类产出：产品静帧、功能卡片、光标演示动画、bento 格，全部用 React 代码搭出，控件观感与真实产品一致。
• 构图与动效章法：Skill 内置怎么摆元素、怎么设计动线的指引，Agent 不是随手拼界面而是按套路出图。
• 可复制套件与示例：自带组件 kit 和示例库，改文案换配色就能出一批新图。
• Agent 自查：内置 filming 工具把结果拍下来回喂给 Agent，让它对照检查自己的产出。
• 与产品无关：假界面不绑定你的真实截图，功能改版插画也不会过期。

典型使用场景

• 落地页与发布图：新功能上线要一张讲清操作流程的 hero 图，Stageshow 搭的假界面比截图干净、比手绘准确。
• 应用商店与社媒素材：同一套场景出多尺寸变体，配 guizang-social-card-skill 这类排版 Skill 直接成套发布。
• 文档与教程：操作演示动画里的每一步都是代码，改一步重渲染即可，不用重录。

快速上手

npx skills add benjitaylor/skills --skill stageshow

装好后对 Agent 说要做哪张图——比如「给导出功能做一张带光标点击导出按钮的演示」，它会搭场景、渲染、自拍检查。详细文档在 benji.org/stageshow。

小结

Stageshow 适合要给产品做插画、发布图、演示动画的开发者和设计团体；需要真实产品截图（客户要看到真 UI）的场景不适用——它做的就是「像而不真」的插画。要点与边界：仓库根目录没有统一 LICENSE 文件，许可按 stageshow/SKILL.md 所载为准（作者声明每个 skill 自带许可与第三方素材声明），商用前先读；Skill 在 benjitaylor/skills 合集内，装单个 skill 即可不带其余；React 产出的代码归你，出图要过一遍 Agent 生图管线。站内写过管界面质量的 ux-ui-agent-skills 和管改掉 AI 味的 unslop：它们管「真界面」，Stageshow 管「画出来的界面」，正好是一套营销资产管线的两端。