competitive-landscape

name	competitive-landscape
description	生成苹果简约风格的竞品分析 HTML 报告，含 Chart.js 数据可视化。使用波特五力、蓝海策略、竞争定位地图等分析框架。适用于竞品分析、市场定位、竞争优势评估。
version	2.1.0

竞品分析报告生成器

生成专业的竞品分析报告，输出为苹果简约风格的 HTML 页面，包含数据可视化图表。

执行流程

1. 明确分析对象 → 确认行业、竞品、分析目的
2. 数据收集     → WebSearch 搜索真实市场数据
3. 框架分析     → 套用分析框架
4. 生成报告     → 输出 HTML + Chart.js 可视化
5. 打开浏览器   → open 命令预览

第一步：明确分析对象

向用户确认：

• 分析哪几个竞品？（建议 2-4 个）
• 什么行业/品类？
• 分析目的？（投资决策 / 市场进入 / 产品定位 / 内容展示）

第二步：数据收集

必须用 WebSearch 搜索真实数据，不要编造数字。至少搜索：

搜索1: "[品牌A] vs [品牌B] vs [品牌C] 市场份额 [年份]"
搜索2: "[行业] market share [品牌] [年份]"
搜索3: "[产品A] vs [产品B] 参数 价格 对比 [年份]"
搜索4: "[行业] 趋势 预测 [年份]"（可选）

需要收集的数据类型：

• 市场份额 / 出货量 / 营收
• 产品参数 / 价格对比
• 用户评价 / 行业评测
• 最新动态 / 战略方向

第三步：分析框架

按需选用以下框架（不需要全用，根据分析目的选 2-3 个）：

波特五力分析（行业吸引力）

力量	评估要点	评分 1-5
新进入者威胁	资本壁垒、品牌忠诚、规模效应
供应商议价力	供应商集中度、替代性、前向整合
买方议价力	客户集中度、转换成本、价格敏感度
替代品威胁	替代方案数量、性价比、转换成本
行业竞争强度	竞争者数量、增速、差异化程度

竞争定位地图

选择 2 个对用户最重要的维度，绘制气泡图：

• 价格 vs 功能
• 技术创新 vs 性价比
• 品牌溢价 vs 生态完整度
• 复杂度 vs 易用性

蓝海策略四象限

对每个竞品分析：

• 消除 — 行业默认有但可以去掉的
• 减少 — 可以降低到行业标准以下的
• 提升 — 可以拉到行业标准以上的
• 创造 — 行业从未提供的新价值

综合竞争力雷达图

选 6-8 个评估维度，对每个竞品打分 0-100，生成雷达图。

第四步：生成 HTML 报告

设计系统：苹果简约风

核心原则：留白 > 装饰，信息 > 花哨，克制 > 堆砌

/* 色彩 */
--bg: #ffffff;
--card-bg: #f5f5f7;
--text: #1d1d1f;
--text-secondary: #86868b;
--border: #d2d2d7;
--accent: #0071e3;          /* 苹果蓝，用于强调 */

/* 为每个竞品分配一个低饱和度的品牌色 */
/* 例: --brand-a: #6e6e73; --brand-b: #0071e3; --brand-c: #bf4800; */

/* 字体 */
font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;

/* 标题层级 */
h1: 48px, font-weight: 700, letter-spacing: -0.02em  /* 报告主标题 */
h2: 28px, font-weight: 600                            /* 章节标题 */
h3: 21px, font-weight: 600                            /* 子标题 */
body: 17px, line-height: 1.65                          /* 正文 */
caption: 12px, color: var(--text-secondary)            /* 图表注释 */

/* 间距 */
章节间距: 80px
卡片内边距: 32px
卡片圆角: 16px
卡片无边框，用背景色区分: background: var(--card-bg)

/* 布局 */
max-width: 980px
单列为主，数据对比时用双列

禁止使用的元素（太 AI 风格）：

• 深色/暗黑背景
• 渐变色背景
• 霓虹色、高饱和度配色
• 发光效果、阴影过重
• 过多的标签/徽章
• 边框过多的表格
• 任何看起来像"AI生成的仪表盘"的元素

应该有的感觉：

• 像 apple.com/newsroom 的产品对比页
• 大量留白
• 黑白为主，品牌色点缀
• 表格简洁（无竖线，浅灰横线）
• 数字用 tabular-nums 等宽数字
• 图表配色克制、低饱和

数据可视化：Chart.js

引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

图表风格要求：

// 全局默认
Chart.defaults.color = '#86868b';
Chart.defaults.borderColor = '#e5e5e5';
Chart.defaults.font.family = "-apple-system, 'SF Pro Display', sans-serif";

// 配色原则：低饱和、高辨识
// 好的配色: ['#0071e3', '#86868b', '#bf4800', '#1d1d1f']
// 避免的配色: 霓虹绿、亮紫、荧光橙

// 图表通用设置
{
  responsive: true,
  plugins: {
    legend: {
      position: 'bottom',
      labels: { usePointStyle: true, padding: 20, font: { size: 13 } }
    },
    title: {
      display: true,
      font: { size: 17, weight: '600' },
      color: '#1d1d1f',
      padding: { bottom: 20 }
    }
  }
}

// 柱状图: borderRadius: 8, 不要边框
// 饼图/环形图: cutout: '55%', borderWidth: 0
// 雷达图: 填充透明度 0.08, 线条宽度 2
// 气泡图: 透明度 0.5, 边框宽度 1.5

必须包含的图表（根据数据可用性）：

1. 市场份额 — 环形图 或 横向柱状图
2. 产品参数对比 — 分组柱状图 或 表格（数据密集时用表格更清晰）
3. 综合竞争力雷达图 — 6-8 维度，每个竞品一条线
4. 竞争定位气泡图 — 2维定位 + 气泡大小代表市场份额
5. 波特五力雷达图（如使用该框架）

报告结构模板

1. 标题区
   - 报告标题（大字）
   - 副标题（一行说明分析范围和日期）

2. 核心指标卡片（3-4个）
   - 每个竞品一张卡片
   - 1个核心数字 + 1行说明

3. 市场格局（图表 + 洞察文字）

4. 竞品画像对比（表格）

5. 产品/参数矩阵（表格 + 图表）

6. 分析框架输出（选用的框架）
   - 波特五力：雷达图 + 评分表
   - 定位地图：气泡图
   - 蓝海策略：四象限卡片
   - 综合雷达图

7. 结论与建议
   - 每个竞品一句话总结
   - 关键洞察（2-3条）

8. 数据来源（底部小字）

结构为参考，不是固定模板，根据内容灵活调整。

表格风格

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid #1d1d1f;  /* 表头用深色粗线 */
  font-weight: 600;
  font-size: 13px;
  color: #86868b;
}
td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e5e5;  /* 行分隔用浅灰细线 */
}
/* 无竖线，无外边框 */

第五步：输出与预览

1. 将 HTML 写入文件（默认路径：当前工作目录）
2. 用 open 命令在浏览器中打开
3. 询问用户是否需要调整

注意事项

• 数据优先：有真实数据就用真实数据，没有的标注"估算"
• 克制判断：分析要客观，不要替用户做结论性判断
• 图表不是越多越好：5-6 张图表足够，每张都要有信息量
• 响应式：确保移动端也能看（max-width + 媒体查询）