X 与 SpaceXSI 设计负责人 Benji Taylor 开源 Stageshow：让编程 Agent 做出像真产品的假 UI 和动效演示

核心背景与行业痛点

官网首页、功能卡片和文档里常见的“假 UI”插图和光标演示动画，过去要设计师手工做，很费时间。现在的大模型已经能写这类 React 组件，但结果常常太满、太像线框图，或者把整个窗口缩进一张卡片里，一看就是机器生成的。X 与 SpaceXSI 设计负责人 Benji Taylor 在个人博客里说，这类图他手工做过很多，难点不在某一步，而在上百个小决定，Stageshow 就是把这些决定写下来让 Agent 照做。注意这是他个人开源的项目，不是 X 或 SpaceXSI 的官方产品。

架构亮点与底层机制

Stageshow 是一个标准 Agent skill：SKILL.md 先给出核心原则和常见的五种失败（太满、线框、装盒、扁平、平淡），再规定七步流程，从定场景、定风格、写故事线，到从最接近的金标准示例复制起步。references 目录覆盖排版、动效、构图和真实产品的品牌规范；kit 是一小套 React 部件；scripts 里的 film.mjs 会把动画拍成联系表并做测量，jumps.mjs 查单帧跳变，layout.mjs 查文字是否溢出。也就是让 Agent 自己拍、自己看、自己改。

权威 Benchmark 与实测跑分对比

官方未公布量化评测。作者的说法是：用 Figma、Gmail、Finder、Spotify 等日常应用的小场景测试，加了 skill 的结果持续好于不加 skill 的同样提示词，并贴了前后对比视频；这属于作者自述，没有第三方测评。

开发者实战落地与开箱指南

在项目里运行 npx skills add benjitaylor/skills --skill stageshow，然后提一个小需求，比如“首页 hero 的一个循环小动画：有人把 issue 指派给同事”。在 skill 目录下 npm install && npm run dev 可以打开 playground，看全部示例和好坏对比。作者提醒第一版通常比 Agent 裸写好很多，但多数演示仍要几轮反馈；产出是普通 React 组件，可直接放进现有代码。