UI Designerdesign Variants

设计变体模式

适用场景

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

核心方法

步骤 1：变体策略确定

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

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

步骤 2：变体设计

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

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

步骤 3：对比矩阵

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

步骤 4：推荐与等待

1. 给出推荐方案及推荐理由
2. 将变体输出到 .boss/<feature>/ui-design-variants.json
3. 设置状态为 NEEDS_CONTEXT，等待用户选择
4. 用户选择后，将选中方案写入正式的 ui-design.json 和 ui-spec.md

输出要求

JSON 产物格式

输出到 .boss/<feature>/ui-design-variants.json：

{
  "schemaVersion": "1.0.0",
  "artifact": "ui-design-variants",
  "feature": "<feature-name>",
  "updatedAt": "<ISO-8601>",
  "strategy": "风格变体|布局变体|交互变体|复杂度变体",
  "variants": [
    {
      "variantId": "A",
      "name": "方案A: [名称]",
      "concept": "[一句话设计理念]",
      "tradeoffs": {
        "pros": ["优势1", "优势2", "优势3"],
        "cons": ["劣势1", "劣势2"]
      },
      "designData": {
        "mode": "wireframe",
        "pages": [],
        "components": [],
        "prototype": {},
        "implementationHints": {}
      }
    }
  ],
  "comparison": {
    "dimensions": ["视觉复杂度", "开发成本", "用户学习曲线", "可扩展性", "品牌一致性", "移动端适配"],
    "matrix": [
      {"dimension": "视觉复杂度", "A": "中", "B": "低", "C": "高"}
    ]
  },
  "recommendation": {
    "variantId": "A",
    "reason": "[推荐理由]"
  },
  "selectedVariantId": null
}

状态报告

[BOSS_STATUS]
status: NEEDS_CONTEXT
summary: 已产出 N 个设计变体，等待用户选择最终方案
missing: 用户尚未选择设计方案（方案A/B/C）
[/BOSS_STATUS]

用户选择后的行为

收到用户选择后：

1. 更新 ui-design-variants.json 的 selectedVariantId 字段
2. 将选中方案的 designData 写入正式 ui-design.json
3. 基于选中方案生成完整的 ui-spec.md
4. 报告 DONE 状态

Source: hashgraph-online/awesome-codex-plugins → plugins/echoVic/boss-skill/skill/skills/ui-designer/design-variants/SKILL.md