ui-designer-design-variants

name	ui-designer/design-variants
description	设计变体模式，产出2-3个设计方案及 tradeoff 分析，供用户选择后确定最终方案
version	1.0.0
agent	ui-designer
type	workflow
user-invocable	false
agent-invocable	true
dependencies	["ui-designer/design-system"]
triggers	["PRD 中明确要求提供多个设计方案对比时","用户显式要求\"给几个方案选\"或\"设计变体\"时","设计方向存在明显分歧需要决策时"]

设计变体模式

适用场景

当设计方向不确定、存在多种合理方案、或用户希望看到不同风格的对比时，启用变体模式。 不建议在简单功能或设计方向明确时使用——避免决策疲劳。

核心方法

步骤 1：变体策略确定

分析 PRD 后确定变体差异维度。常见维度组合：

策略	维度	适用场景
风格变体	简约 vs 丰富 vs 极简	品牌/调性不确定
布局变体	单栏 vs 双栏 vs 卡片	内容组织方式不确定
交互变体	步骤式 vs 单页式 vs 对话式	用户流程不确定
复杂度变体	MVP vs 标准 vs 豪华	功能范围不确定

原则：每个变体应该有清晰的设计理念差异，而非仅仅是颜色/字体的不同。

步骤 2：变体设计

为每个变体（2-3个）产出：

1. 设计理念：一句话说明这个方案的核心思路
2. 视觉方案：基于 design-system 的具体实现
3. 组件选择：使用哪些组件、如何组合
4. 交互流程：用户的操作路径
5. Tradeoff 分析：优势和劣势

步骤 3：对比矩阵

生成结构化对比，帮助用户快速决策：

维度	方案 A	方案 B	方案 C
视觉复杂度	高/中/低	-	-
开发成本	X 天	-	-
用户学习曲线	陡/平/无	-	-
可扩展性	高/中/低	-	-
品牌一致性	高/中/低	-	-
移动端适配	优/良/差	-	-

步骤 4：推荐与等待

1. 给出推荐方案及推荐理由
2. 将变体输出到 .boss/<feature>/ui-design-variants.json
3. 设置状态为 NEEDS_CONTEXT，等待用户选择
4. 用户选择后：
   • 记录选择（供跨项目偏好聚合，走事件流、可重放）：

     boss runtime record-user-choice <feature> --choice-type design-variant \
       --selected "<选中方案>" --options "<方案A,方案B,方案C>" --reason "<用户理由>"
     

   • 将选中方案写入正式的 ui-design.json 和 ui-spec.md

输出要求

JSON 产物格式