Stageshow 是什么：让 Agent 做出像真产品的假 UI
落地页 hero、功能卡、bento 格子里的「假界面」，现在的模型也能画，但常常又挤又空，像一张糊进卡片的截图。Stageshow 是一套给编程 Agent 用的 Skill + 小型 React 套件：帮你做出看起来像真产品的静帧或带光标的短动画（和挡「网页套版脸」的 Frontend Design Skill 同一方向，更偏营销插画与动效）。官方站点写于 2026-10-31；安装命令与技能正文以 benjitaylor/skills 仓库的 stageshow/ 为准（查阅日 2026-11-01 北京时间）。整仓同日 GitHub API 约 229★。
说明：技能页与 benji.org/stageshow 强调：这是手写插画式演示，不是浏览器自动化——a.click() 画的是光标按下反馈，a.set() 改场景状态。产出是普通 React 组件，可放进你的站点和代码库。
一句话标准，五种翻车
SKILL.md 的中心句：It reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause.
| 翻车 | 长什么样 |
|---|---|
| 太多 | 每行都是真文案、数字塞满；细节越多越像「生成物」 |
| 线框 | 两块灰条加一个按钮；做得太小或剥掉了可识别特征 |
| 装盒 | 整窗缩进卡片、四边等距留白，像粘贴的截图 |
| 扁平 | 所有物件同权重、同描边卡片，眼睛无处落脚 |
| 平淡 | 灰窗+光标，brief 要的蓝图/玻璃/灵动岛/吉祥物气质全丢了 |
修法：安静灰色里铺满结构化屏幕，真文案只留给故事相关处，其余用占位线；用裁切把视线送到故事发生的面板。简化的是字，不是语境。空角、列表下方空洞、四边飘窗，看起来像半成品而不是克制。
金样例是质量条，不是随便瞄一眼的参考：你的成片如果更空、更平、更小，第一件事是对齐金样，再谈动效。
怎么装、怎么先试一把
npx skills add benjitaylor/skills --skill stageshow
仓库 README 写明：这条命令把 Skill 加给常见编程 Agent（站点举例含 Claude Code、Codex、Gemini 等）。然后给一个小任务：一个产品、一次交互、一个尺寸。例如：「首页 hero 循环演示——有人把 issue 指派给同事。」Agent 读 Skill、从最近金样例起步、拍摄自检、再按反馈改。站点也坦白：第一遍通常已经明显好于裸模型，但仍常要几轮人眼反馈。
本地预览金样例与坏/好对照（需 Node 20.19+）：
cd stageshow # Skill 目录
npm install
npm run dev
macOS/Linux 打开 http://stageshow.localhost:1355（Windows 用 Vite 打印的本地 URL，常见 127.0.0.1:5173）。Playground 含金样例、多种观感、标注过的坏/好对照；可暂停、慢放、逐帧。
七步工作流（多数质量在写码前定）
- 介质与位置：静帧还是动画（循环 / 入视播放 / hover）。按最终可见尺寸设计——hero 旁文案约 720×340，全宽 hero 约 900–1100 宽，卡片约 400×300；演示一般别低于约 320 宽。能放进手机栏的要另做
compact（约 358），是重设计不是挤压。 - 观感：对照产品站点映射 token（主题 light/dark/blueprint/glass，调色 accent/mono，保真度 minimal/standard/realistic）。默认 light + accent + standard；具名真产品或列表类静帧可上 realistic。有产品自己的图标与铬就用真的。
- 故事：使用感、流程、或系统在做什么。三到五拍 + 收束，约 10–16 秒。说不清原因的光标别动；数据不无故回退。故事更丰富与画面更安静冲突时，选画面。
- 从金样例起步：用
film.mjs先拍最近金样，把文件夹拷过来再改成你的产品——别瞟一眼重写。保留舞台尺寸、裁切与出血、字号间距、节拍与 kit 零件。无故事吻合的金样时：先按 framing 表选布局拷贝，再从故事最近的例子借动效。 - 屏幕：真字符串通常 3–7 条预算；用
Bar/Text/Row。光标目标用data-target/data-cursor，用rect()量，别写死坐标。 - 编排：
ActAPI（set/wait/move/click/type…）。进出场保持挂载以便动画；节拍可重叠，收束要停得住，循环要回到起点或有可见复位原因。 - 彩排：先定
poster——多数人只看到这一帧。再拍整段循环与 390 宽接触表，逐步检查按压、菜单、形变与循环接缝。film.mjs --gate出现rehearsal passed是必要非充分；还要对照金样例做整构图问答，并留下REHEARSAL.md。
套件里有什么
把 kit/ 拷进项目，从 kit/index.ts 引入。依赖 React 18+、react-dom；Icon 等用到 lucide-react。无第三方动画运行时。大类包括：
- 舞台：
Stage（设计尺寸、缩放、compact、场景状态、播放、观感、光标）与脚本拿到的Act。 - 画框：
Window、Phone（含锁屏/通知）、键盘、会话气泡等——几何按真机/真窗，别手动画窗。 - 动效零件：
Collapse、Roll、Fly、Count、Stream等处理「冷手容易做错」的帧。 - 小零件：
Bar、Text、Row、Avatar、Field、Chip… 安静起点，按产品重绘样式，别从外改零件几何。
金样例表覆盖静帧卡、暗色 bento、光标 hero、无光标编舞、AI 对话/卡片、表单报错、拖拽重排、图表 scrub、表格编辑、加载骨架、协作光标、手机滑动、灵动岛、上传/分享等；另有 Figma/Linear/Slack 等产品研究——可借交互，不要借别家品牌身份。教学目录 teaching/ 的坏半边永远不当起点。
常见坑
- 内容瞬切而不是运动：文字/数值该位移或滚动时却直接换帧。
- 视线落点全是灰条：占位应在边缘，故事相关处才用真词。
- 窗下垫板或四边飘空：窗/手机应至少占舞台三分之二并切边；白/深色页面上的 hero 通常不要再垫一层 plate。
- 手绘状态栏/Home 条：用
Phone组件自带的。 - 过了 gate 就不看：检查抓得到测量错误，抓不到「无聊」；人眼仍要过一遍循环接缝。
完成标准
- 能复述一句标准与五种翻车，并指出自己稿子更接近哪一种失败。
- 已用官方
npx skills add … --skill stageshow装上，能指到最近金样例文件夹。 - 知道先拍金样再拷贝改造，以及
film.mjs --gate+ 人眼彩排都要做。 - 交付物是可维护的 React 组件，不是一次性截图拼贴；若只要文案级 UI 提示，也可看 UI 优化提示词。
最后
Stageshow 把「假 UI 为什么假」写成可执行的 Skill：金样例定条、套件扛几何与难动效，拍摄脚本逼着 Agent 看帧。模型品味在涨，作者也写到部分规则会被模型内化——在那之前，装上 Skill、从最小 hero 练一轮，比空喊「做高级一点」管用。技能正文、套件与样例见仓库 stageshow/；解说长文见 benji.org。
