需要为同一块 UI 生成多个真正不同的设计变体并在真实页面中…

把一块 UI 做成 3–5 个在同一主轴上有不同答案的候选，托管在真实页面选择器中，展示取舍后由用户选择并提升一个。

适用场景

解决思路

1. 每次只针对一块 UI；不要用“仪表盘”这类大范围，改用指标卡这类具体组件。如果 brief 跨多块，指定其他部分围绕的核心一块，说明原因，其余作为后续运行。
2. 用一句话重述 brief：它是什么、在哪里渲染、必须完成什么。
3. 选择一条主轴，让每个变体在主轴上有不同位置。可选轴包括：结构（分组、顺序、列数、折叠；better-layout）、密度（间距尺度、点击区域、容量；better-layout）、强调（填充色放在哪里、什么后退；better-colors）、字体排印（比例阶梯、字重对比、行长；better-typography）、文案语气（标签、语气、文案量；better-writing）。
4. 只选一条主轴；次要选择应随主轴推导，而不是各自变化，例如密集变体可能需要更小的字体阶梯，这是协调而不是第二轴。
5. 不要同时变化所有轴，否则得到三个无法归因的结果；你只知道喜欢哪个，不知道原因，下一块 UI 仍从零开始。
6. 每个变体进入选择器前必须通过 better-interface 的升级触发条件：每个控件有可访问名称；键盘可达所有指针可达内容；焦点可见；在 320px 下不裁切；含义不只靠颜色传达。
7. 此底线在所有变体间完全相同；它不是轴，也不能拿来与轴做权衡。若某个方向只能通过破坏底线才成立，明确指出并放弃该方向。
8. 在写代码前先命名主轴。
9. 默认三个变体；只有被要求或设计空间确实很宽时才增加到五个；超过五个没人比较，只会滚动。
10. 先写下整套变体，每个有名称和主轴位置。名称要说明方向，如 Quiet、Editorial、Dense，绝不要 Option A。
11. 当没有两个变体共享同一位置，且能用一句话说清每个变体的轴位置时，这一步才算完成。
12. 读取变体所依赖的基础：样式系统、组件库、动效库。
13. 读取 tokens：颜色、间距、圆角、字体阶梯、缓动。
14. 读取产品密度和语气；密集的专业工具会限制最大胆变体可以走多远。
15. 读取该组件渲染位置：背景、相邻元素、宽度。
16. 如果没有项目可读，使用中性灰、一个强调色和系统字体栈，并说明你这么做了。
17. 把变体构建进真实页面：放在实际会包含该组件的页面中，带上真实 chrome、真实相邻元素和真实数据。
18. 用 URL 搜索参数选择变体（?variant=quiet），使每个变体都是可发给别人的链接；用浮动控件设置该参数；picker.md 保存规范。
19. 一次只渲染一个变体，并按完整尺寸渲染；缩略图会扭曲间距和比例，而间距通常正是你在选择的东西。
20. 如果没有页面可承载，构建一个自包含 HTML 文件，并保持同样的选择器。
21. 给每个变体真实内容：产品化文案、可信名称、页面实际会承载的条目数量；不要用 Lorem ipsum 和三行数据，它们会让每种结构都显得不错。
22. 先自己翻看每个变体：每个都能渲染、每个交互都有响应、控制台干净。
23. 然后交出决定，用表格列出：Variant、Axis position、Right when、Costs。
24. 说明选择器在哪里运行、哪个键切换、你在哪个宽度下判断；答案在 375px 和 1440px 之间可能变化。
25. 绝不在表中标记最喜欢的一个。如果被直接问，根据该组件被看到的频率和产品性格回答，而不是根据你构建时更享受哪一个。
26. 一旦做出选择，在它所属位置按项目自身约定正确构建该变体，然后删除其他变体和测试脚手架。
27. 如果被要求再来一轮，保留脚手架并重新执行步骤 3，围绕你倾向的方向取新的位置。
28. 在提升之前，脚手架绝不从生产代码导入，生产代码也绝不从脚手架导入。
29. 检查并修复：变体只在强调色或文案上不同 -> 将一个变体移到主轴上的不同位置，或删掉它。
30. 检查并修复：每个轴都在变化 -> 只变化一个轴，让其余随它推导。
31. 检查并修复：在空白路由上评判 -> 把变体托管在将来包含该组件的页面上。
32. 检查并修复：Lorem ipsum、三行数据、Jane Doe -> 使用真实文案和页面真实条目数量。
33. 检查并修复：最大胆变体跳过键盘或焦点 -> 通过底线，否则放弃该方向。
34. 检查并修复：表中标记了最喜欢 -> 说明每个变体的成本，让用户选择。
35. 检查并修复：选择器被项目 tokens 重新样式化 -> 让它明显处在设计系统之外。
36. 检查并修复：提升后留下脚手架 -> 删除它，除非被要求保留。

适用边界 · 注意事项

• 需要评审已有 UI 并直接给出改进判断时，用 interface-review 或 better-interface；本技能只生成候选，不替你选赢家。
• 只打算做强调色或文案层面的表面变化时；这会产生无法归因的伪变体，不值得跑变体流程。
• 需要一步到位直接产出最终实现时；本流程以选择器和脚手架探索为前提，最终只提升一个变体。