| 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;
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";
{
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 }
}
}
}
必须包含的图表（根据数据可用性）：
- 市场份额 — 环形图 或 横向柱状图
- 产品参数对比 — 分组柱状图 或 表格（数据密集时用表格更清晰）
- 综合竞争力雷达图 — 6-8 维度，每个竞品一条线
- 竞争定位气泡图 — 2维定位 + 气泡大小代表市场份额
- 波特五力雷达图（如使用该框架）
报告结构模板
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;
}
第五步：输出与预览
- 将 HTML 写入文件（默认路径：当前工作目录）
- 用
open 命令在浏览器中打开
- 询问用户是否需要调整
注意事项
- 数据优先：有真实数据就用真实数据，没有的标注"估算"
- 克制判断：分析要客观，不要替用户做结论性判断
- 图表不是越多越好：5-6 张图表足够，每张都要有信息量
- 响应式：确保移动端也能看（max-width + 媒体查询）
