# Competitive Landscape

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

- Skill: `didixuxu/competitive-landscape` (Agent Skill)
- Install (CLI): `npx skillmds@latest add didixuxu/competitive-landscape`
- Raw SKILL.md: https://api.skillmd.com/api/skills/didixuxu/competitive-landscape/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: didixuxu (https://skillmd.com/u/didixuxu)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/didixuxu/competitive-landscape

---


# 竞品分析报告生成器

生成专业的竞品分析报告，输出为苹果简约风格的 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 报告

### 设计系统：苹果简约风

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

```css
/* 色彩 */
--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

引入：
```html
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
```

**图表风格要求：**

```javascript
// 全局默认
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. 数据来源（底部小字）
```

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

### 表格风格

```css
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 + 媒体查询）