用途
Design Variations 用于在 UI 方向或交互选择尚未确定、或用户明确要求提供选项、变体、概念、mockup、替代方向时，帮助做出决策。它把浏览器当作一次性的决策界面：在生产实现之前先发散出多个方向，由人来选择或融合，然后只把胜出的方向送入正常的 Agentic Design System 构建与评审链。
触发条件
当请求要求提供选项、变体、概念、mockup、替代方向，或需要帮助决定新页面、组件、功能或交互应该变成什么样时，使用此技能。
以下情况跳过：方向已经选定；任务是 bug 修复、文案编辑或机械式打磨；任务需要真实数据接线后才能判断形态；差异仅涉及单个 token 或样式值；用户要求紧密实现某个指定的参考。
如果期望的视觉参考很重要，使用 visual-reference-calibration 来恢复要借鉴的内容。复用先前的回答，不要增加第二次需求访谈。
工作流程
-
框定决策：说明用户、任务、约束、现有界面，以及变体必须帮助解决的决定。检查项目基线、组件、token 和真实领域语言。识别所有变体共享的不变内容。
-
选择变体数量：使用能解决实际选择的最少替代方案，通常为两个。只有在存在真正不同的主题时才探索更多，而不是为了满足配额。尊重用户明确指定的数量。
-
命名不同的主题：用其理念命名每个方向，绝不用“版本 1”或“选项 B”。在结构、层级、密度、交互模型、隐喻或信息流等有意义的轴上变化。保持内容、数据、状态、视口和核心用户目标一致。换色、换字体或调整间距不算一个独立方向。
-
构建一个一次性浏览器产物：在合适时使用 assets/variations.html 进行独立比较。对于已实现应用的比较，使用 browser-variant-workflow 作为此决策下的技术，而不是另一个变体/评审循环。除非任务需要项目资产，否则保持自包含。通过可访问的切换器一次显示一个完整方向。让每个方向足够连贯，以便在上下文中判断。不要添加生产依赖、功能标志或长期变体架构。
-
在浏览器中评审：在相关的桌面和移动宽度渲染产物。用相同的状态和视口捕获每个方向。检查溢出、键盘导航、标签、焦点和基本对比度。使用现有的 ADS 评审比较用户任务、信息顺序、视觉方向和行为。不要用复合自评分替代有用的选择。从主题和交互模型判断概念上的独特性。仅像素差异不是有意义分歧的证据。
-
呈现决策：以一个推荐方向及其原因开头。总结每个方向的有意义权衡。如果仍需要人类方向，一次性呈现具体选择。尊重先前的方向和任何自主选择并继续的指示。不要为已授权的实现发明额外的审批关卡。
-
只推广胜出者：在真实技术栈中重建选定的方向。运行正常的 ADS 核心链和渲染证据关卡。推广后移除临时实现脚手架。保留有用的比较证据与任务；不要删除现有的用户产物。
验证契约
在呈现变体之前，验证：每个方向都有独特的主题名称；所有方向使用相同的真实内容和应用状态；每个方向之间至少有一个结构或交互轴不同；切换器可键盘访问并暴露选中状态；每个方向在所需视口渲染；每个方向存在截图或等效的渲染证据；推荐引用用户契合度和权衡，而不仅仅是视觉新颖性。
输出
返回：所需决策、推荐方向、变体主题与权衡、变体间共享的不变内容、渲染证据、风险或未解决问题、产物路径。