生成苹果简约风格的竞品分析 HTML 报告，含 Chart.js 数据可视化。使用波特五力、蓝海策略、竞争定位地图等分析框架。适用于竞品分析、市场定位、竞争优势评估。
生成苹果简约风格的竞品分析 HTML 报告，含 Chart.js 数据可视化。使用波特五力、蓝海策略、竞争定位地图等分析框架。适用于竞品分析、市场定位、竞争优势评估。
npx skills add https://github.com/didixuxu/didi-skills --skill competitive-landscape复制此命令并粘贴到 Claude Code 中以安装该技能
| name | competitive-landscape |
| description | 生成苹果简约风格的竞品分析 HTML 报告，含 Chart.js 数据可视化。使用波特五力、蓝海策略、竞争定位地图等分析框架。适用于竞品分析、市场定位、竞争优势评估。 |
| version | 2.1.0 |
生成专业的竞品分析报告，输出为苹果简约风格的 HTML 页面，包含数据可视化图表。
1. 明确分析对象 → 确认行业、竞品、分析目的
2. 数据收集 → WebSearch 搜索真实市场数据
3. 框架分析 → 套用分析框架
4. 生成报告 → 输出 HTML + Chart.js 可视化
5. 打开浏览器 → open 命令预览
向用户确认：
必须用 WebSearch 搜索真实数据，不要编造数字。至少搜索：
搜索1: "[品牌A] vs [品牌B] vs [品牌C] 市场份额 [年份]"
搜索2: "[行业] market share [品牌] [年份]"
搜索3: "[产品A] vs [产品B] 参数 价格 对比 [年份]"
搜索4: "[行业] 趋势 预测 [年份]"（可选）
需要收集的数据类型：
按需选用以下框架（不需要全用，根据分析目的选 2-3 个）：
| 力量 | 评估要点 | 评分 1-5 |
|---|---|---|
| 新进入者威胁 | 资本壁垒、品牌忠诚、规模效应 | |
| 供应商议价力 | 供应商集中度、替代性、前向整合 | |
| 买方议价力 | 客户集中度、转换成本、价格敏感度 | |
| 替代品威胁 | 替代方案数量、性价比、转换成本 | |
| 行业竞争强度 | 竞争者数量、增速、差异化程度 |
选择 2 个对用户最重要的维度，绘制气泡图：
对每个竞品分析：
选 6-8 个评估维度，对每个竞品打分 0-100，生成雷达图。
核心原则：留白 > 装饰，信息 > 花哨，克制 > 堆砌
/* 色彩 */
--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 风格）：
应该有的感觉：
引入：
<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-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; /* 行分隔用浅灰细线 */
}
/* 无竖线，无外边框 */
open 命令在浏览器中打开Use when user asks for a hand-drawn style report, notebook-style report, or says "手绘板报告", "手绘风", "笔记本风格". Generates warm paper-textured HTML reports with handwriting fonts, sketchy borders, and notebook aesthetics. Also exports PNG via Playwright.
Use when user provides a job description (JD) and wants to customize their resume for a specific job application, or when user says "tailor resume", "定制简历", "修改简历", "投简历"
Create effective data visualizations with Python (matplotlib, seaborn, plotly). Use when building charts, choosing the right chart type for a dataset, creating publication-quality figures, or applying design principles like accessibility and color theory.
Use when user has a messy Word document or plain text that needs professional formatting, auto-layout, and intelligent image generation. Triggers on requests to format, beautify, or reorganize documents.
Use when user has a Word document that needs typo correction, text polishing, or proofreading. Triggers on requests to fix typos, correct errors, polish writing, proofread, or when user says "校对", "纠错", "润色", "改错别字", "检查错别字".
Use when user provides a 口播稿 (spoken script) and wants it converted into an HTML slide presentation with hand-drawn SVG illustrations for screen recording. Trigger on "做板书", "口播稿转板书", "/board", "生成板书", "做背景板", or when user pastes a script and wants visual slides for video recording.