makemd/docs/blueprints/frontend-integration/style-war-ui.md

前端集成方案：SKU 视觉同质化导致的价格战预警 (Same Style War) - [BIZ_OPS_159]

1. 业务场景描述 (Business Context)

• 目标：识别那些与市场上大量商品长得几乎一模一样、且正在陷入恶性价格战的 SKU。通过 AI 提醒商户避开“红海”竞争，采取差异化策略。
• 用户收益：保护毛利率，避免盲目跟降，通过视觉或包装差异化重塑商品竞争力。

2. UI 布局草图 (UI Layout Sketch)

• 红海 SKU 警告看板 (Red Sea Alert Panel):
  • 列表展示受威胁的 SKU 图片。
  • 右侧并排展示“最强竞品”的图片，并标注相似度得分（如 98%）。
• 价格对比走势图 (Price Disadvantage Chart):
  • 展示过去 7 天我方售价 vs 竞品售价的背离趋势。
• 差异化行动清单 (Differentiation Actions):
  • 卡片式建议：
    • Change Creative: 更换主图（场景化、模特化）。
    • Bundle Offer: 增加赠品或合包。
    • Exclusive Label: 申请专利或私模认证标识。

3. 核心 API 字段映射 (API Mapping)

• 后端服务: StyleWarService.analyzeCompetition(tenantId, similarities)
• 响应结构:

  {
    "success": true,
    "alerts": [
      {
        "productId": "SKU-BAG-01",
        "riskLevel": "HIGH",
        "advice": "该款与市场上 50+ 竞品视觉重合度 > 95%，且竞品已降价 15%。建议增加个性化挂件作为赠品进行合包销售。"
      }
    ]
  }
  

• 因果链呈现 (XAI Integration):
  • 叙述：“AI 检测到该商品的视觉指纹与行业标杆高度重合，且流量正在向低价侧偏移。单纯降价将导致毛利跌破 15%，故生成差异化竞争建议。”

4. 交互状态机 (Interaction State Machine)

• Visual Comparison: 鼠标悬停在相似度得分上，自动弹出两张图片的像素级对比热力图。
• Apply Strategy: 点击建议项，自动生成任务包发送给 AI-1 (Creative) 生成新主图。

5. ROI 可视化逻辑 (ROI Tracking)

• 利润保护额: 计算采取差异化策略后，维持原价所保住的利润 vs 跟降后的利润损失。
• 点击率提升: 监控更换主图后的 CTR 变化。

---

蓝图维护者: AI-2 (Internal) | 版本: V1.0
相关任务: BIZ_OPS_159