X and SpaceX design lead open-sources Stageshow faux UI demo Skills

推荐 X & SpaceXSI 设计负责人的「产品插画品味」Skills

@benjitaylor 开源的 Stageshow skills，把 Benji 手做假 UI（静帧、动效、bento）时的几百个小决定写成工作流、金标样例和拍片自检，专攻营销页/文档 hero 里那种「像真产品、其实是编排过的插画」，静帧、短动画、光标走查、手机触控、bento 网格。

开源项目：https://t.co/osT6EgToQW

Skills 交付物 · Skill（SKILL.md + references/）：一条总原则，读起来像真产品，只留观众需要的信息，构图有意图，每个动作有原因；并写明五种翻车（太多 / 太少像线框 / Boxed 整窗塞进卡片 / Flat 权重一样 / Bland 没有 brief 风格）。七步大多在写代码前定完：媒介与尺寸、look、3–5 拍故事、抄最近金标再改成自家产品、真字符串预算、编排循环、拍片对照金标。

· kit/：可拷进项目的 React 部件（Stage、Window、Phone、光标与若干安静零件），自带 CSS，无第三方动画运行时；难做对的东西（数字只滚变化位、卡片飞入槽位、消息从输入框长出等）由 kit 扛。主题/色板/真实用词密度是舞台 props，也可把产品 design token 映射上去，使 demo 贴自家产品而不是通用灰窗。

· examples/：大量金标（hero、bento、表单报错、拖拽重排、图表 scrub、Dynamic Island、上传分享等）和可辨认产品研究（Figma、Linear、Slack、Raycast、Finder、Spotify 等），借交互，不借别人品牌身份。Agent 被要求先 film 最近金标、整文件夹复制再改，而不是瞟一眼重写。

· Playground + film.mjs：本地预览九种风格与坏/好样对；拍片出 contact sheet、量布局、抓一帧跳变。作者强调：只读代码或拍定格看不见中间帧的假；--gate 通过是必要但不充分，人仍要看一遍。

和「让模型直接生成 UI」差在哪 产出是普通 React，可进仓库、可改、可按页面宽度做 compact，而不是一张不可维护的图。演示是脚本化插画：https://t.co/fpSn1oKp9q() 画按下反馈，a.set() 改场景，不自动化真实应用控件。假日文键盘、多光标、Live↔Publish、图表跳动那类片，卖的是编排与循环接缝，不是浏览器录屏。

Benji 怎么验证、怎么看未来 用日常产品小片段（Figma、Gmail、Finder、Spotify 等）对照有/无 skill，自称挂上后 consistently 更好；迭代方式是发现问题就写进 skill 再整轮重跑，而不是手改一次交差。

他判断模型品味未来会变好，部分规则（如红绿灯尺寸）已对更新模型失效，但构图与动效因果仍常要被点醒；因此 skill 可能阶段性有用，做出的 demo 本身又会变成模型可学的小样例，「帮自己过时」被写成可接受的结局。局限也写清了：检查抓错误不抓无聊点子；不会画画；规则是作者品味，不是中性标准；多数 demo 仍要几轮人工反馈。