摘要
“`json { "category": "AI", "tags": ["Claude", "Kimi", "数据分析", "Playwright", "AI Agent", "MCP"], "excerpt": "如何用Claude Code+Kimi K2在3小时内自动爬取17个竞品网站并生成专业市场分析报告？本文实战演示了从数据采集到报告生成的全流程，展示了AI Agent如何将3天人工工作压缩至3小时，实现数倍人效提升。", "slug": "claude-kimi-market-analysis-agent", "marketing_footer": "我是饼干哥哥，数据分析师、AI博主，和出海业务专家朋友创立了公司NGS NextGrowthSail，专注AI在出海营销场景下的落地。这让我想起NGS在服务电商客户时，正是利用类似的AI Agent技术解决了竞品数据监控的痛点，让客户能够实时掌握市场动态。" } “`
前两天 Kimi K2 发布，这次好像不一样，带来的是 Agent 级别的开源大模型
注意关键词：
-
「Agent 级别」意味着规划、工具调用、编程能力强，背后是 1 T 参数 MoE“巨无霸”；
-
**「开源」**意味着便宜，不严谨的对比了一下，在 Claude Code 里，成本是 Claude Opus4 的 1/25 到 1/33
不是，这两方向真的能同时存在吗？
我决定把它放到我的垂直领域——数据分析场景下做复杂分析，看看表现如何。
正好我在做手机配件市场的竞品数据分析， 就直接拿 Claude Code+Kimi 来跑完整落地的数据分析流程：数据采集、分析建模、复杂图表生成、再形成一份可以直接拿去给老板汇报的、带交互图表的 HTML 报告。
一、 方法论先行：“品类格子”分析框架
做市场分析，我们有一个非常落地的分析框架，叫**“品类格子”** ，专门用来回答诸如“我们的产品跟竞品比，差距在哪？”“下一个爆款该往哪个价格段打？”的战略问题。
品类格子，简单来说，就是把市场按“品类 x 价位段”画成一个棋盘，然后看你和你的竞争对手们，分别在哪些格子里落子，哪些格子还是空白。
“品类格子”的逻辑非常清晰，以终为始：
-
最终目标 (Why)：为公司找到市场机会点，指导产品开发、定价和竞争策略。
-
核心洞察 (What)：通过对比自家和整个市场的“品类格子”，看清我们在哪些品类、哪些价位段是强势区、弱势区，以及哪里是机会空白区。
- 实现路径 (How)：
- 数据采集：爬取自家和所有核心竞品网站的产品数据。
- 数据处理：
- 品类归一：不同品牌对同一品类的叫法五花八门（比如“Charger”和“Power Adapter”），需要用 AI 把它们统一成标准品类。
- 价位段划分：根据所有产品的价格分布，合理地划分出几个标准价位段。
- 可视化分析：绘制“品类格子”热力图、品牌定位散点图等，直观展示竞争格局。
- 策略建议：基于可视化洞察，给出可落地的业务建议。
这个框架，就是我们指挥 AI 干活的“作战地图”。
二、工具准备
Claude Code 安装
见教程：gzh【饼干哥哥 AGI】
Kimi K2 API 获取与配置
- 前往 Kimi 开放平台申请 API Key
https://platform.moonshot.cn/console/api-keys ，去这里创建你的 api
新注册用户默认有免费赠送 15 元额度，创建好 API Key 等待下一步使用
在 claude code 中使用 k2
方法一，最简单的方式，就是用这个项目提供的方法 https://github.com/LLM-Red-Team/kimi-cc
复制上一步创建好的 API key，打开终端粘贴就可以了 ⬇️
bash -c "$(curl -fsSL https://raw.githubusercontent.com/LLM-Red-Team/kimi-cc/refs/heads/main/install.sh)"
方法二，
配置环境变量来实现，复制以下命令到命令行，回车：
# 告诉claude将所有通常指向 api.anthropic.com 的 API 调用重定向到 Moonshot AI 的兼容端点
export ANTHROPIC_BASE_URL=https://api.moonshot.cn/anthropic
export ANTHROPIC_AUTH_TOKEN=你的kimiAPIkey
claude
最终进入 Cladue Code 后看到如图界面，即可！
Playwright MCP 安装
Playwright 是一个可以通过代码编程的方式控制浏览器的工具。
而 Playwright MCP 就可以直接让 AI 控制浏览器了，相关文章：
在这里，是来解决数据采集问题的。
在终端里手动安装：
claude mcp add playwright -s user -- npx @playwright/mcp@latest
更绝的是，可以直接提需求让 AI 给你装
帮我安装 playwright MCP
不论哪个方式，最终输入指令 /mcp，确保看到以下界面，才算是安装完成。
三、 Step 1: Playwright MCP，一句话搞定全网数据采集
数据采集，是所有分析的起点，也是过去最耗时、最繁琐的环节。但现在，Claude Code 的出现，让这件事变得异常简单。
Playwright MCP 能直接操作浏览器去浏览和抓取网页内容。
但采集之前，我们也得知道要采集什么，可以让 AI 先根据我们的分析方法给我们一个 数据字段要求.csv
先让 Claude Code 跑一个网站的 数据采集试试水：
请你调用 playwright mcp工具，@playwright 启动一个浏览器,对网站 https://www.mous.co/
进行访问，采集这个品牌的数据，需要的数据字段要求看：数据字段要求.csv
不需要把所有产品都抓下来，但要求包含所有品类category_original，然后每个品类抓 top热门产品，总共至少20
个产品；把采集到的数据保存到 csv 文件中。注意不是让你写一个 playwright 脚本，而是调用 playwright
mcp工具来完成需求。前面你已经安装好了，如果没找到这个工具就先启动服务。
老实说，有点被震撼到了，这个视频展示了 Claude Code 是怎么根据我们一句话很丝滑的自己规划步骤、访问网站、定位元素、抓取数据、保存成 CSV 文件：
采集到的结果表。
说实话，刚开始设想这个案例的时候我是担心的，因为实在太复杂了，我上次人工做的时候花了 3 天，但没想到前面这个需求 Claude Code + Kimi K2 这么轻松就给完成了。
信心大增！于是，我直接把 17 个竞品网站的 URL 列表丢给它，让它一口气全爬完。
为了防止 AI 在执行过程中反复问我要权限，打断流程，我开启了 Claude Code 的“狂飙模式”：
claude --dangerously-skip-permissions
这行命令能一次性授予 AI 所有权限，实现真正的“无人值守”自动化。
即可一次性提前授予 Claude Code 所有权限，后续不再弹出授权询问，实现“无人值守”操作。
看到这个 Bypassing Permissions 就说明设置好了。
当时已经是晚上 1 点多了，我设置完 AI 后，我就去睡了。
第二天起床的时候，第二次震惊！CC 真的就跑了 2 个小时，消耗 28.2k token，网站就给抓完了。
要知道，这些是不同独立站，而不是标准结构的电商平台，无法写一个通用的 python 脚本去爬，ai 工作流也不行。
此时，我只花了 5 分钟讲清楚我要什么。
所以这里可以看出来，大部分原先工作流的场景，甚至是 RPA 的场景都会被这样的 Agent Coding 替代
三、 Step 2-4: 一次性完成数据分析与报告生成
数据准备好了，接下来就是数据分析师的主场。
过去，我和 AI 协作是小心翼翼的，让它干一步，我检查一步，生怕它“发疯”乱搞。但鉴于 Claude Code 和它背后的 Kimi K2 在第一步表现如此惊艳，于是我有个很大胆的想法：让 AI 一次性帮我完成多个数据分析步骤的执行，但具体要什么还是得说清楚的：
这是我要做的Claude Code+数据分析场景：市场竞品分析。
业务背景是：
公司中，做什么产品，往往受产品结构限制，而产品结构是公司的「战略」，例如我们常见的畅销品、利润品等
更具体的，产品结构可以通过「品类格子」来量化：按不同品类、不同价格段划分的多象限矩阵
此时，再基于多竞品的数据，能形成整个市场的「品类格子」
通过把自己公司和市场的对比，就能看出来可以看出公司当前哪些价位段、哪些品类上比较强势，哪些还比较弱，进而得出产品策略
Claude Code 方案：
➕playwright mcp 爬虫，把自家网站和竞品网站的产品信息爬下来，形成 csv
基于 csv 做品类格子矩阵：
1️⃣ 因为不同公司的品类定义不同，可以利用 AI 做品类划分
2️⃣ 对价位段做标准划分
可视化：做市场品类格子象限图，标出自家公司的产品
最终得出结论，给出业务建议
方案中的 1 爬虫已经完成了 ，数据放在了文件夹`各品牌产品数据`
现在需要你完成 2.品类格子矩阵分析和 3.可视化、4. 结论建议
注意不能直接用 AI 做分析，而是要决定好分析方法后写 python 脚本来完成分析，最后把可视化和结论建议做成 html
这个过程的文件都要保存到文件夹`数据分析-kimi`中
最终数据分析报告 html 要求：
1. 数据说明与数据分析方法简述
2. 市场总览、品牌竞争分析
3. 品类分析 ➡️ 品类竞争格局
4. 价位段分布 ➡️ 品牌平均价格对比雷达图
5. 「品类格子」分析
- 品牌市场定位分析：覆盖品类数-平均价 散点图，气泡大小代表产品数
- 市场竞争度：手机配件品类-价位段 分布热力图
- 各品牌在不同品类的产品数 分布热力图
3-5 每个小节都要有数据分析小结论结论
6. 分析结论与建议
汇总前面的小结论，形成整体建议：
- 市场进入机会
- 产品组合优化
- 定价策略
- 竞争策略
以及其他你认为有价值的分析与结论。
这个 Prompt 非常长，也非常具体，几乎就是一份完整的数据分析需求文档（SOP）。我把对最终报告的所有期望，包括图表类型、分析维度、结论结构，全都清晰地告诉了它。
结果，Kimi K2 完全没让我失望。它不仅理解了我的复杂需求，还真的就一步到位，生成了一大堆过程文件和最终的 HTML 报告。
报告整体不错，但还有点小问题，例如这里：可视化图表都 看不到
但实际上是有的，分布在了不同的 html 里
于是我让它修复：把各 html 的图嵌入到最终报告 html 里
最终报告market_analysis_report.html中看不到图表，我看各种图表分散在不同
html，需要把它们都嵌入到最终报告里，确保最终报告什么都包含。
包括底下文字也看不清。但经过 1-2 轮简单的微调，一份高质量、专业化的市场分析报告就出炉了。
最终报告长这样：
四、 成果复盘：一份“专业级”的市场洞察报告
让我们来看看最终的成果。这份由 AI 主导生成的报告，从专业数据分析师的角度看，质量相当高：
-
结构完整：从市场总览、品牌竞争、品类分析，到价位段分布、核心的“品类格子”分析，再到最终的结论建议，逻辑层次非常清晰。
-
专业级可视化，兼具深度与美感：Kimi 生成的一系列交互式图表（品牌定位气泡图、竞争热力图、价格雷达图），直观地揭示了市场格局。
- 品牌定位分析：通过动态气泡图，各品牌是“大而全”的巨头，还是“小而美”的垂直玩家，其市场占位一目了然。
- 品类格子热力图：直接用色块饱和度标出了哪些“品类 x 价位段”的格子是竞争红海，哪些是机会蓝海，市场机会一目了然。
-
结论有深度：基于数据分析，给出了关于市场进入机会、产品组合优化、定价策略等具体、可落地的建议。
为了更好地理解整个分析过程，我还让 Kimi K2 帮我解读了它自己生成的那些过程文件，它也梳理得井井有条，清晰地展示了从原始数据到最终报告的完整链路
Claude Code+Kimi 给的实在是太多了，让我直接退订了 Cursor：
数据分析-kimi/
├── 📊 数据文件层
│ ├── processed_product_data.csv # 清洗后的标准产品数据（416个产品）
│ ├── category_matrix.csv # 品类-价位段矩阵数据
│ └── analysis_results.json # 分析结果汇总JSON
├── 📈 可视化层
│ ├── brand_positioning.html # 品牌市场定位散点图
│ ├── category_competition_heatmap.html # 品牌-品类竞争热力图
│ ├── price_radar_chart.html # 品牌价位段分布雷达图
│ ├── category_price_heatmap.html # 品类-价位段竞争热力图
│ ├── price_distribution.html # 价格分布箱线图
│ └── brand_comparison.html # 品牌综合对比图
├── 📋 报告层
│ ├── market_analysis_report.html # 标准版分析报告
│ ├── enhanced_market_analysis_report.html # 增强版完整报告
│ ├── integrated_market_analysis_report.html # 集成版报告
│ └── embedded_market_analysis_report.html # 嵌入式报告
├── 🔧 核心脚本层
│ ├── category_matrix_analysis.py # 数据清洗+矩阵构建主脚本
│ ├── generate_visualizations.py # 可视化图表生成
│ └── generate_report.py # HTML报告生成
└── 📖 项目文档
└── README.md # 项目说明文档
这次实战，我确实觉得 Kimi K2 给我带来了惊喜，这类 Agentic 编程助手正在重塑数据分析的工作流：
从原来的“做一步、看一步、卡一步”到现在“把需求想明白，把结果等出来”，释放生产力带来的效率迭代，人效起码提升 2 到 3 倍。
从“人指挥，AI 执行”到“人给目标，AI 自主规划”：我们不再需要一步步地教 AI 怎么做，而是可以把一个高阶、复杂的目标（“做一份品类格子分析报告”）直接抛给它，它能自主地规划路径、调用工具、解决问题。
能掌握并驾驭这种全新的人机协作模式，或许才是我们每个人，在 AI 时代真正的核心竞争力。
小红书封面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Agent 市场分析实战 by 饼干哥哥🍪</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
/* --- 1. 全局样式与变量 --- */
:root {
--bg-start: #1a1a2e;
--bg-end: #16213e;
--text-primary: #f2f2f2; /* 更亮的白色 */
--text-secondary: #c0c0e0; /* 更亮的次要文字 */
--card-bg: rgba(30, 41, 59, 0.7);
--card-border: rgba(143, 159, 218, 0.15);
--accent-blue: #00aaff;
--accent-purple: #9f7aea;
--accent-green: #34d399;
--accent-orange: #f59e0b;
--font-family: 'Poppins', '思源黑体', '阿里巴巴普惠体', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-family);
background-color: #0f172a;
color: var(--text-primary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem 1rem;
gap: 1.5rem;
}
/* --- 2. 下载按钮 --- */
#download-btn {
background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
color: white; border: none; padding: 14px 30px; border-radius: 12px;
font-size: 1.2rem; font-weight: 600; font-family: var(--font-family);
cursor: pointer; transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 170, 255, 0.25); order: -1;
}
#download-btn:hover { transform: translateY(-3px); box-shadow: 0 7px 25px rgba(159, 122, 234, 0.35); }
/* --- 3. 信息图主容器 (显著增大间距和内边距) --- */
#infographic-container {
width: 900px; max-width: 90vw; aspect-ratio: 3 / 4;
background: linear-gradient(145deg, var(--bg-start), var(--bg-end));
border-radius: 28px; border: 1px solid var(--card-border);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
padding: 40px; /* 增大内边距 */
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto 1fr auto;
gap: 24px; /* 增大网格间距 */
overflow: hidden;
}
/* --- 4. 标题与卡片 (全面增大字体和间距) --- */
.header {
grid-column: 1 / -1; text-align: center;
margin-bottom: 8px; /* 增加标题和下方卡片的间距 */
}
.header h1 {
font-size: 3.8rem; /* 再次放大标题 */
font-weight: 900; line-height: 1.1;
background: -webkit-linear-gradient(45deg, var(--accent-blue), var(--accent-green));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
margin-bottom: 12px;
}
.header p {
font-size: 1.3rem; /* 再次放大副标题 */
color: var(--text-secondary); font-weight: 500;
}
.card {
background-color: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 20px; padding: 24px; /* 增大卡片内边距 */
backdrop-filter: blur(12px); display: flex; flex-direction: column;
}
.full-width-card { grid-column: 1 / -1; }
.card-title {
font-size: 1.6rem; /* 放大卡片标题 */
font-weight: 600; margin-bottom: 18px; /* 增大标题和内容的间距 */
display: flex; align-items: center; gap: 14px;
color: var(--text-primary);
}
.card-title .icon { width: 28px; height: 28px; min-width: 28px; color: var(--accent-purple); }
/* --- 5. 核心工具卡片 --- */
.core-tool-card { align-items: center; text-align: center; justify-content: center; }
.core-tool-card .icon { width: 48px; height: 48px; margin-bottom: 16px; }
.core-tool-card h3 { font-size: 2.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.core-tool-card p { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.6; /* 增大行距 */ }
#claude-icon { color: var(--accent-green); }
#kimi-icon { color: var(--accent-blue); }
/* --- 6. “品类格子”卡片样式 --- */
.framework-content {
font-size: 1.15rem; /* 放大描述文字 */
color: var(--text-secondary); line-height: 1.7; /* 增大行距 */
}
.framework-content strong { color: var(--text-primary); font-weight: 600; }
/* --- 7. 流程与洞察模块 --- */
.steps-list { list-style: none; display: flex; flex-direction: column; gap: 18px; } /* 增大列表项间距 */
.steps-list li { display: flex; align-items: center; gap: 18px; font-size: 1.2rem; } /* 放大文字 */
.step-number {
width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
font-size: 1.15rem;
background: linear-gradient(135deg, var(--accent-orange), var(--accent-purple));
color: white; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.insight-item {
background: rgba(0,0,0,0.25); padding: 20px 16px; border-radius: 16px; text-align: center;
display: flex; flex-direction: column; justify-content: center;
}
.insight-item .icon { width: 38px; height: 38px; margin-bottom: 14px; color: var(--accent-blue); }
.insight-item h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; }
.insight-item p { font-size: 1rem; color: var(--text-secondary); line-height: 1.5; }
.footer {
grid-column: 1 / -1; text-align: center; margin-top: auto;
padding-top: 10px; color: var(--text-secondary);
font-size: 1.2rem; font-weight: 500;
}
@media (max-width: 900px) {
#infographic-container {
display: flex; flex-direction: column; width: 100%;
height: auto; aspect-ratio: unset; padding: 24px; gap: 16px;
}
}
</style>
</head>
<body>
<button id="download-btn">下载信息图 (PNG)</button>
<div id="infographic-container">
<header class="header">
<h1>AI Agent 市场分析实战</h1>
<p>Claude Code + Kimi K2 | 3小时搞定17个网站的深度报告</p>
</header>
<div class="card core-tool-card">
<svg id="claude-icon" class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" /></svg>
<h3>Claude Code</h3>
<p>智能Agent，负责自主规划、调用工具与执行复杂任务。</p>
</div>
<div class="card core-tool-card">
<svg id="kimi-icon" class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.355a15.002 15.002 0 0 1-7.5 0M12 6.75h.008v.008H12V6.75Zm-.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-1.875 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm1.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm1.875 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>
<h3>Kimi K2</h3>
<p>1T参数MoE开源模型，提供强大的数据处理与深度分析能力。</p>
</div>
<div class="card full-width-card">
<h2 class="card-title">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.97 2.122L7.03 22.03a.75.75 0 0 1-1.06 0L4.97 20.97a3 3 0 0 1-.97-2.122V17.25m6 0v1.007a3 3 0 0 0 .97 2.122l1.03 1.03a.75.75 0 0 0 1.06 0l1.03-1.03a3 3 0 0 0 .97-2.122V17.25m-6 0h6m-6 0H6.75v-1.007a3 3 0 0 1 .97-2.122L8.75 13.03a.75.75 0 0 1 1.06 0l1.03 1.03a3 3 0 0 1 .97 2.122V17.25m-6 0h6m-9-3.75v-1.007a3 3 0 0 1 .97-2.122L4.03 9.03a.75.75 0 0 1 1.06 0l1.03 1.03a3 3 0 0 1 .97 2.122V13.5m-6 0h6m6-3.75v-1.007a3 3 0 0 0-.97-2.122L13.03 6.03a.75.75 0 0 0-1.06 0L10.97 7.03a3 3 0 0 0-.97 2.122V9.75m6 0h-6m-3.75-6H6.75V2.743a3 3 0 0 1 .97-2.122L8.75-.03a.75.75 0 0 1 1.06 0l1.03 1.03a3 3 0 0 1 .97 2.122V3.75m-6 0h6m6 0h-6" /></svg>
“品类格子”分析框架
</h2>
<p class="framework-content">
整个项目的核心方法论，即AI的<strong>“作战地图”</strong>。通过将市场按<strong>“品类 × 价位段”</strong>画成棋盘，清晰洞察品牌优劣势、竞争格局与市场空白机会点。
</p>
</div>
<div class="card full-width-card">
<h2 class="card-title">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.82m5.84-2.56a16.5 16.5 0 0 1-1.152 12.01M12 2.25a16.5 16.5 0 0 0-11.83 5.342m12.74-13.6A16.5 16.5 0 0 1 18.37 21.19" /></svg>
三步自动化分析流程
</h2>
<ol class="steps-list">
<li><span class="step-number">1</span><span><strong>自主采集:</strong> 调用Playwright MCP工具，一句话指令爬取17个网站。</span></li>
<li><span class="step-number">2</span><span><strong>分析建模:</strong> 基于“品类格子”框架，AI自动完成数据清洗与建模。</span></li>
<li><span class="step-number">3</span><span><strong>一键报告:</strong> AI一次性完成可视化，并生成含深度洞察的HTML报告。</span></li>
</ol>
</div>
<div class="card full-width-card">
<h2 class="card-title">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>
成果与价值洞察
</h2>
<div class="insights-grid">
<div class="insight-item">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
<h4>效率革命</h4><p>3天人工 -> 3小时AI<br>人效提升数倍</p>
</div>
<div class="insight-item">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /></svg>
<h4>模式变革</h4><p>人给目标, AI自主<br>规划并完整执行</p>
</div>
<div class="insight-item">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.4-1.683 3.034M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
<h4>专业级产出</h4><p>生成交互式图表与<br>深度策略建议</p>
</div>
</div>
</div>
<footer class="footer">by 饼干哥哥🍪</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const downloadBtn = document.getElementById('download-btn');
const infographicEl = document.getElementById('infographic-container');
document.fonts.ready.then(() => {
downloadBtn.addEventListener('click', () => {
infographicEl.style.background = `linear-gradient(145deg, var(--bg-start), var(--bg-end))`;
html2canvas(infographicEl, {
backgroundColor: getComputedStyle(document.body).backgroundColor,
scale: 3, useCORS: true, logging: true,
}).then(canvas => {
const link = document.createElement('a');
link.download = 'AI-Agent市场分析实战-by-饼干哥哥.png';
link.href = canvas.toDataURL('image/png', 1.0);
link.click();
});
});
});
});
</script>
</body>
</html>