到视觉环节了。
Designer agent 不发明新风格。它读现有游戏、复制颜色、字体、间距，然后应用到新游戏。
这让每款游戏都看起来出自同一个工作室。
工作室设计 token
每款游戏共享同样的原子级设计 token。我们从不偏离。
# 工作室设计 token
颜色： #00ffff (青色，主色) #ff4466 (粉色，强调) #ffcc33 (金色，成功) #34d399 (绿色，OK) #0a0a0f (深色背景)
字体： Space Grotesk (展示) Inter (正文)
按钮： 尖角，2px 边框 间距： 8px / 16px / 24px / 48px 动画： ease-out, 200ms
✓ 同样的 token，每款游戏 ✓ 玩家 1 秒认出我们
/token
同样的 token，每款游戏。
4 款游戏共享同样的颜色、字体、节奏。这是有意的 — 玩过我们任一款的玩家立刻能认出另一款。
Designer 的第一指令："用这些 token，不要你的建议。"
Designer 产出什么
简单的 HTML 草图。不是 Figma。不是长 PDF。就是看起来像最终游戏屏幕的网页。
┌─────────────────────────┐
│ │
│ BOP │
│ ───── │
│ │
│ [ 开始 ] │
│ [ 关卡 ] │
│ [ 设置 ] │
│ │
│ 最高分: 1240 │
│ │
└─────────────────────────┘
✓ HTML 草图就绪 ✓ 程序员 1:1 复制 ✓ 没有"理解"步骤
/草图
HTML，不是 Figma。
为什么是 HTML？因为程序员直接复制到游戏引擎。没有翻译层造成的失真。
草图看着像最终屏幕。程序员匹配。完成。
7 个必备状态
每个屏幕草图必须包含玩家可能看到的全部 7 个状态。这能早期发现设计漏洞。
# 每个屏幕必备状态
- 空闲 — 默认
- 加载 — 转圈 / 骨架屏
- 错误 — 连接断开
- 空 — 无数据
- 成功 — 操作确认
- 禁用 — 按钮锁定
- 聚焦 — 键盘导航
✓ 7 个全画 = 可以编码 ✗ 缺任意 = 打回 designer
/状态
7 个状态画全才算完。
大多数"我之后再想"的 bug 来自忘了空/错状态。Reviewer 在编码前就抓出。
Designer 画 7 个。程序员实现 7 个。Tester 检查 7 个。
常见陷阱
✗ 发明新颜色而不用 token
✗ 跳过 7 个状态因为"显然"
✗ 发想法而不是草图
✗ 用 Figma 当 HTML 也行的时候
你能照搬的
即使你没有品牌：
- 挑 3 个颜色 + 1 种字体。 前 3 个项目只用这些。
- 用 HTML 或 Excalidraw 画草图。 v1 跳过 Figma。
- 总是画全 7 个状态，即使其中 5 个看起来一样。
- 不匹配 token 的不发布。
品牌纪律对 1 款游戏难，对接下来 5 款免费。