competitive-landscape

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

竞品分析报告生成器

Competitive Analysis Report Generator

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

Generate professional competitive analysis reports output as Apple minimalist-style HTML pages with data visualization charts.

执行流程

Execution Process

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

1. Clarify analysis objects → Confirm industry, competitors, analysis objectives
2. Data collection → Use WebSearch to search for real market data
3. Framework analysis → Apply analysis frameworks
4. Generate report → Output HTML + Chart.js visualization
5. Open browser → Preview with the `open` command

第一步：明确分析对象

Step 1: Clarify Analysis Objects

向用户确认：

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

Confirm with the user:

Which competitors to analyze? (Recommended 2-4)
Which industry/category?
What is the analysis objective? (Investment decision / Market entry / Product positioning / Content display)

第二步：数据收集

Step 2: Data Collection

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

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

需要收集的数据类型：

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

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

Search 1: "[Brand A] vs [Brand B] vs [Brand C] market share [Year]"
Search 2: "[Industry] market share [Brand] [Year]"
Search 3: "[Product A] vs [Product B] specifications price comparison [Year]"
Search 4: "[Industry] trends forecast [Year]" (Optional)

Data types to collect:

Market share / Shipment volume / Revenue
Product specifications / Price comparison
User reviews / Industry evaluations
Latest developments / Strategic directions

第三步：分析框架

Step 3: Analysis Frameworks

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

Select the following frameworks as needed (no need to use all, choose 2-3 based on analysis objectives):

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

Porter's Five Forces Analysis (Industry Attractiveness)

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

Force	Evaluation Points	Rating 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 substitute products	Number of alternatives, cost-performance ratio, switching costs
Intensity of industry competition	Number of competitors, growth rate, degree of differentiation

竞争定位地图

Competitive Positioning Map

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

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

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

Price vs Functionality
Technological innovation vs Cost-performance ratio
Brand premium vs Ecosystem completeness
Complexity vs Usability

蓝海策略四象限

Blue Ocean Strategy Four Quadrants

对每个竞品分析：

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

Analyze each competitor:

Eliminate — Elements that are industry defaults but can be removed
Reduce — Elements that can be lowered below industry standards
Raise — Elements that can be raised above industry standards
Create — New value never provided by the industry

综合竞争力雷达图

Comprehensive Competitiveness Radar Chart

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

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

第四步：生成 HTML 报告

Step 4: Generate HTML Report

设计系统：苹果简约风

Design System: Apple Minimalist Style

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

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 等宽数字
图表配色克制、低饱和

Core principles: White space > Decoration, Information > Flashiness, Restraint > Piling up

css

/* Colors */
--bg: #ffffff;
--card-bg: #f5f5f7;
--text: #1d1d1f;
--text-secondary: #86868b;
--border: #d2d2d7;
--accent: #0071e3;          /* Apple Blue, for emphasis */

/* Assign a low-saturation brand color to each competitor */
/* Example: --brand-a: #6e6e73; --brand-b: #0071e3; --brand-c: #bf4800; */

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

/* Title hierarchy */
h1: 48px, font-weight: 700, letter-spacing: -0.02em  /* Report main title */
h2: 28px, font-weight: 600                            /* Section title */
h3: 21px, font-weight: 600                            /* Subtitle */
body: 17px, line-height: 1.65                          /* Body text */
caption: 12px, color: var(--text-secondary)            /* Chart caption */

/* Spacing */
Section spacing: 80px
Card padding: 32px
Card border-radius: 16px
No card border, use background color to distinguish: background: var(--card-bg)

/* Layout */
max-width: 980px
Single column as main, use double columns for data comparison

Prohibited elements (too AI-style):

Dark/dark mode backgrounds
Gradient backgrounds
Neon colors, high-saturation color schemes
Glow effects, excessive shadows
Excessive tags/badges
Tables with too many borders
Any elements that look like "AI-generated dashboards"

Desired feel:

Like apple.com/newsroom product comparison pages
Abundant white space
Mainly black and white, with brand color accents
Simple tables (no vertical lines, light gray horizontal lines)
Numbers use tabular-nums monospaced digits
Restrained, low-saturation chart color schemes

数据可视化：Chart.js

Data Visualization: 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

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

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

Import:

html

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

Chart style requirements:

javascript

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

// Color scheme principles: low saturation, high recognition
// Good color schemes: ['#0071e3', '#86868b', '#bf4800', '#1d1d1f']
// Avoided color schemes: neon green, bright purple, fluorescent orange

// General chart settings
{
  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 }
    }
  }
}

// Bar chart: borderRadius: 8, no borders
// Pie/doughnut chart: cutout: '55%', borderWidth: 0
// Radar chart: fill opacity 0.08, line width 2
// Bubble chart: opacity 0.5, border width 1.5

Required charts (based on data availability):

Market share — Doughnut chart or horizontal bar chart
Product specification comparison — Grouped bar chart or table (use table for dense data for clarity)
Comprehensive competitiveness radar chart — 6-8 dimensions, one line per competitor
Competitive positioning bubble chart — 2D positioning + bubble size represents market share
Porter's Five Forces radar chart (if using this framework)

报告结构模板

Report Structure Template

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

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

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

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

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

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

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

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

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

1. Title Area
   - Report title (large font)
   - Subtitle (one line explaining analysis scope and date)

2. Core Indicator Cards (3-4)
   - One card per competitor
   - 1 core number + 1 line of explanation

3. Market Landscape (Chart + Insight text)

4. Competitor Profile Comparison (Table)

5. Product/Specification Matrix (Table + Chart)

6. Analysis Framework Output (Selected frameworks)
   - Porter's Five Forces: Radar chart + Score table
   - Positioning Map: Bubble chart
   - Blue Ocean Strategy: Four-quadrant cards
   - Comprehensive radar chart

7. Conclusions and Recommendations
   - One-sentence summary for each competitor
   - Key insights (2-3 points)

8. Data Sources (small text at the bottom)

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

表格风格

Table Style

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

css

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid #1d1d1f;  /* Dark thick line for table header */
  font-weight: 600;
  font-size: 13px;
  color: #86868b;
}
td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e5e5;  /* Light gray thin line for row separation */
}
/* No vertical lines, no outer borders */

第五步：输出与预览

Step 5: Output and Preview

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

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

注意事项

Notes

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

Data first: Use real data if available, mark "estimated" if not
Restrained judgment: Analysis should be objective, do not make conclusive judgments for the user
More charts are not better: 5-6 charts are sufficient, each must have information value
Responsive: Ensure it is viewable on mobile devices (max-width + media queries)