competitive-landscape

Competitive Analysis Report Generator

Generate a professional competitive analysis report, output as an Apple minimalist-style HTML page, including data visualization charts.

Execution Flow

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

Step 1: Clarify the Analysis Subject

Confirm with the user:

Which competitors to analyze?(2-4 recommended)
What industry/category?
Purpose of the analysis?(investment decision / market entry / product positioning / content presentation)

Step 2: Data Collection

Must use WebSearch to search for real data, do not fabricate numbers. At minimum, search for:

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

Types of data to collect:

Market share / shipments / revenue
Product specifications / price comparison
User reviews / industry reviews
Latest developments / strategic direction

Step 3: Analysis Frameworks

Select the following frameworks as needed (not all are required; choose 2-3 based on the analysis purpose):

Porter's Five Forces Analysis (industry attractiveness)

Force	Assessment Points	Score 1-5
Threat of New Entrants	Capital barriers, brand loyalty, economies of scale
Bargaining Power of Suppliers	Supplier concentration, substitutability, forward integration
Bargaining Power of Buyers	Customer concentration, switching costs, price sensitivity
Threat of Substitutes	Number of alternatives, cost-effectiveness, switching costs
Industry Rivalry	Number of competitors, growth rate, degree of differentiation

Competitive Positioning Map

Choose the 2 dimensions most important to users and plot a bubble chart:

Price vs Features
Technological Innovation vs Cost-Effectiveness
Brand Premium vs Ecosystem Completeness
Complexity vs Ease of Use

Blue Ocean Strategy Four Actions Framework

Analyze for each competitor:

Eliminate — industry defaults that can be removed
Reduce — factors that can be lowered below industry standard
Raise — factors that can be raised above industry standard
Create — new value the industry has never offered

Comprehensive Competitiveness Radar Chart

Choose 6-8 evaluation dimensions, score each competitor from 0-100, and generate a radar chart.

Step 4: Generate the HTML Report

Design System: Apple Minimalist Style

Core principles: whitespace > decoration, information > flashiness, restraint > clutter

/* 色彩 */
--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
单列为主，数据对比时用双列

Prohibited elements (too AI-style):

Dark/dark background
Gradient background
Neon colors, high-saturation color schemes
Glow effects, excessive shadows
Too many labels/badges
Tables with too many borders
Anything that looks like an "AI-generated dashboard"

The feeling it should have:

A product comparison page like apple.com/newsroom
Ample whitespace
Primarily black and white, with brand color accents
Simple tables (no vertical lines, light gray horizontal lines)
Numbers use tabular-nums monospaced figures
Restrained, low-saturation chart colors

Data visualization: Chart.js

Import:

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

Chart style requirements:

// 全局默认
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

Charts that must be included (based on data availability):

Market share — donut chart or horizontal bar chart
Product specification comparison — grouped bar chart or table (use a table for clarity when data is dense)
Overall competitiveness radar chart — 6-8 dimensions, one line per competitor
Competitive positioning bubble chart — 2-dimensional positioning + bubble size represents market share
Porter's Five Forces radar chart(if using that framework)

Report structure template

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

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

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

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

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

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

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

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

The structure is for reference, not a fixed template; adjust flexibly based on the content.

Table style

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;  /* 行分隔用浅灰细线 */
}
/* 无竖线，无外边框 */

Step 5: Output and preview

Write the HTML to a file (default path: current working directory)
Use the open command to open it in the browser
Ask the user whether adjustments are needed

Notes

Data first: Use real data if available; mark anything unavailable as "estimated"
Restrained judgment: Analysis should be objective; do not make conclusive judgments on the user's behalf
More charts is not better: 5-6 charts are enough, and each must carry information value
Responsive: Make sure it also looks good on mobile (max-width + media queries)