Deep Insight - 深度行业洞察可视化系统

概述

将行业分析、赛道研究、竞品分析等复杂内容，转化为结构清晰、视觉精美的多页面HTML可视化系统。每页独立成文件，通过目录首页串联，适合内部分享、汇报演示、赛道研究等场景。

When to use

用户需要对某个行业/赛道进行深度分析并输出可视化报告
用户需要制作内部分享材料（非PPT，而是可交互的HTML）
用户需要多维度展示某个领域（行业洞察+趋势+客户画像+竞品+策略）
用户提到"帮我做一个XX行业的分析"、"做个分享材料"、"可视化报告"
用户需要数据驱动的行业研究内容呈现

设计规范

技术栈

纯HTML + 内联CSS + Chart.js CDN（无需本地安装）
每页独立HTML文件，无iframe嵌套
移动端适配（@media(max-width:640px)）

视觉规范

:root {
  --bg: #F8FAFC;       /* 页面背景 */
  --card: #FFFFFF;     /* 卡片背景 */
  --border: #E2E8F0;   /* 边框 */
  --red: #DC2626;      /* 强调色-红 */
  --purple: #7C3AED;   /* 强调色-紫 */
  --cyan: #0891B2;     /* 强调色-青 */
  --orange: #EA580C;   /* 强调色-橙 */
  --green: #059669;    /* 强调色-绿 */
  --t1: #0F172A;       /* 标题文字 */
  --t2: #334155;       /* 正文文字 */
  --t3: #64748B;       /* 次级文字 */
  --t4: #94A3B8;       /* 辅助文字 */
}

字体

主字体：'Noto Sans SC', -apple-system, sans-serif
通过 Google Fonts CDN 引入

卡片组件

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  margin-bottom: 18px;
}

页面头部

.hdr {
  text-align: center;
  margin-bottom: 28px;
}
.hdr .tag {
  display: inline-block;
  background: rgba(6,182,212,0.1);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;
  padding: 4px 20px;
  border-radius: 20px;
}
.hdr h1 {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, #DC2626, #7C3AED, #0891B2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Steps

1. 需求确认

确认行业/赛道主题
确认分析维度（默认8章节结构，可增减）
确认数据来源要求（是否需要真实数据验证）
确认受众和使用场景（内部分享/外部汇报/个人研究）

2. 信息收集与研究

使用 WebSearch 收集行业数据（市场规模、增长率、关键玩家）
收集产业链上下游信息
收集竞品信息（产品功能、定价、市场份额）
收集客户画像数据

3. 内容结构设计（默认8章节模板）

| 章节 | 标题模板 | 核心内容 | |------|---------|---------| | 0 | 目录首页 | 导航页，8格卡片布局 | | 1 | 行业洞察 | 市场全景、三大时代/阶段对比、15+维度表格 | | 2 | 赛道趋势 | S曲线演进、市场规模预测、5阶段发展路径 | | 3 | 双视角/多视角解读 | 从业者视角+消费者视角+投资者视角 | | 4 | 底层工具/技术全景 | 厂商对比、技术路线、产品矩阵 | | 5 | 客户画像与攻坚 | 需求金字塔、客户分层、攻坚策略 | | 6 | 成本/ROI分析 | 成本拆解、团队配置、投资回报模型 | | 7 | 竞争对标 | 我方vs竞品多维度对比、差异化话术 | | 8 | 客户清单与作战地图 | 全量客户名单、触达路径、行动闭环 |

4. 逐页生成HTML文件

遵循设计规范中的CSS变量和组件体系
每页使用Chart.js绘制数据图表
使用渐变色标题、卡片式布局、图标标注
注意数据准确性标注（来源注释）

5. 目录首页生成

2列网格卡片布局
每个卡片含编号+标题+摘要+箭头
使用彩色编号区分章节（红/橙/黄/绿/青/紫循环）
顶部英文标签+渐变大标题+副标题+元信息

6. 校验与交付

确认所有文件链接正确
确认数据源标注完整
确认移动端兼容性
交付全部HTML文件

可视化组件库

数据表格

多维度对比表格（15维度+）
使用图标/emoji标注优劣（✅ ❌ ⚠️）
表头固定色彩区分

Chart.js 图表

柱状图：市场规模对比
折线图：趋势演进
饼图/环形图：市场份额
雷达图：多维度对比
引入方式：<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>

流程图/步骤图

CSS Grid + 连接线实现
彩色圆形编号 + 标题 + 描述
支持横向/纵向流程

金字塔/层级图

CSS实现三角形/梯形层级
从底到顶逐级缩窄
配色由深到浅

时间线

竖向/横向时间线
节点+描述+数据标注
使用伪元素实现连线

Pitfalls

不要使用iframe嵌入：多页面系统每页独立，通过 <a href> 链接，不要iframe
不要忽略数据来源：每个数据点需标注来源（脚注或行内标注）
不要使用截图：所有内容用代码实现，禁止嵌入截图
不要创建过大文件：单文件控制在50KB以内，过大拆分
Chart.js插件需单独引入：annotation插件需额外引入 chartjs-plugin-annotation
颜色使用中国习惯：涨=红，跌=绿（金融相关数据）
移动端测试：确保 @media(max-width:640px) 断点下布局合理

Verification

[ ] 所有HTML文件可独立在浏览器打开
[ ] 目录首页的链接指向正确
[ ] Chart.js图表正常渲染（需联网加载CDN）
[ ] 数据来源均已标注
[ ] 移动端布局无溢出
[ ] 色彩主题统一（浅色主题 --bg:#F8FAFC）

示例产出

参考 AI漫剧探索分享 项目：

8个内容页 + 1个目录首页 = 9个HTML文件
覆盖行业洞察、趋势分析、产业链、工具厂商、客户画像、成本分析、竞品对标、客户清单
每页独立可浏览，通过首页导航
总体积约200KB，加载速度快

定制化扩展

根据不同行业特点，可调整章节结构：

| 场景 | 调整建议 | |------|---------| | SaaS赛道 | 增加ARR/NRR指标分析、付费转化漏斗 | | 硬件/芯片 | 增加技术路线图、产能分析 | | 消费品 | 增加用户画像、渠道分析、品牌矩阵 | | 金融科技 | 增加合规要求、风控模型、牌照地图 | | AI应用 | 增加模型能力对比、算力成本、落地案例 |