X 设计负责人开源 Stageshow 技能，让 AI 做的 UI 像真产品

X 的设计负责人刚刚把他的设计品味开源了（这是一个能让你的智能体 UI 看起来达到生产级的技能）。我拆解了它的工作原理 ↓

Benji 把他手工设计产品 UI 时做出的上百个小决策都写了下来，这样智能体也能做出同样的决策。

这个技能围绕一句话构建：“它读起来像一个真实的产品，简化到观众需要的程度，带着意图来框定，并且每个动效都有原因。”

它指出了智能体制作 UI 的 5 种常见错误：
> 太多：每个格子里都是真实文字，塞得满满当当
> 太少：一个线框图，读起来不像产品
> 盒装：整个应用缩成一张卡片，像截图一样
> 扁平：所有东西的视觉权重都一样
> 平淡：你的品牌风格完全没体现出来

然后智能体按 7 个步骤工作，其中大部分发生在写任何代码之前：
1. 媒介：静态还是动画，放在哪里，什么尺寸
2. 外观：浅色、深色、蓝图还是玻璃质感，一个强调色
3. 故事：3 到 5 个节拍
4. 示例：从几十个黄金示例中最接近的那个开始
5. 屏幕：少量真实文字，其余用占位线
6. 编排：重叠的节拍，以及一个首尾相接的循环
7. 排练：把它录下来，逐帧检查，修复发现的问题

智能体会给自己的作品“拍片”，一个脚本在一张表上生成每一帧，并监控单帧跳变和文字超出框的问题——这些是截图无法显示的。

它还会读取你的设计令牌，所以 UI 会使用你真实的颜色、字体和圆角。

他的构建方法是：给两个没有任何其他上下文的新智能体同一个简短提示词，一个带这个技能，一个不带，然后并排比较结果。

当某个东西看起来不对劲时，他会写下问题所在，更新这个技能，然后重新运行整个测试，而不是手动修复。

适用于 Grok Build、Claude Code、Codex 和 Gemini：
npx skills add benjitaylor/skills --skill stageshow

Benji 说，大多数结果仍然需要他几轮反馈，但第一版已经比智能体自己做出来的好很多了。