推荐语

用 AntV 搭建的 AI 报告生成 Skill，不仅将数据转化为可执行的经营建议，更沉淀出一套高效的 B 端 AI 界面框架。

核心内容：
1. 从真实需求出发，解析数据大屏、仪表盘与数据报告的本质区别
2. 以服装出口销售报告为例，展示 AI 如何生成核心经营建议
3. 分享项目沉淀出的一套通用 B 端 AI 管理界面框架

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

前段时间一个朋友说，他们公司用传统的外贸 CRM，数据都在里面，系统自带报表也有。但每到季度汇报，还是要花半天手动导出、筛选、配图、写文字。

领导真正想要的，是快速知道下个季度该重点跟哪几个客户。

数据在系统里，不等于报告在系统里。图表堆出来的东西，也不等于真正的报告。

顺着这个思路，我基于 AntV 做了一个报告生成 Skill，顺手沉淀了一套 B 端 AI 管理界面框架，接下来分享这个过程~

 01 

图表不是报告：大屏、仪表盘、数据报告到底有什么区别

数据可视化工具解决的是"怎么把数字画出来"。柱状图、折线图、饼图——解决的是视觉编码问题，不是分析问题。

先厘清三个概念，它们经常被混用：

数据大屏：解决的是展示问题。它通常出现在会议室、展厅、指挥中心，让人快速感受到"数据很多、系统很强"。受众更多是旁观者，追求视觉冲击和整体氛围，不要求读者完整读完每一项指标。

仪表盘（Dashboard）：解决的是巡检问题。它服务的是具体岗位的人，让他每天快速扫一眼：业绩有没有异常、风险有没有冒出来、有没有需要立刻处理的事项。所以仪表盘的信息要精简，判断要快，最好一眼能发现异常，不适合承载太长的分析叙事。

数据报告：解决的是复盘问题。它通常面向阶段性经营分析，需要把一段时间的数据讲清楚：看什么、先看什么、这意味着什么、下一步应该怎么做。所以报告需要完整的叙事结构，结论、数据、解释、建议要串起来。

三者不是谁替代谁，而是使用频率、阅读深度和决策场景不同。

把大屏的视觉风格用在仪表盘上，容易做成"好看但不好用"；把报告的信息量塞进仪表盘里，又容易变成"什么都有但看不出重点"。这两种都是很常见的设计错位。

回到报告本身。一份真正的报告需要回答三个问题：

• 看什么
  这份数据里，哪些视角是重要的？品类结构、客户集中度、回款风险，优先级是什么？
• 先看什么
  信息呈现的顺序决定了读者的理解路径。结论放前面还是后面，不是审美问题，是叙事判断。
• 这意味着什么
  数字背后的经营洞察，才是报告最核心的价值。"夹克毛利率 32.9%"是数字，"夹克是当前唯一处于高利润高份额区域的明星品类，建议优先保障产能"才是报告。

AI 在这件事上真正能做贡献的，是中间这一层——经营解读。不是画图（画图工具已经很成熟了），而是"基于这份数据，该怎么看、先看什么、意味着什么"这个判断过程。

这也是为什么我把这个项目叫做"报告生成 Skill"而不是"图表生成工具"——两件事的设计目标完全不同。

 02 

产品案例：出口服装销售分析报告

说清楚了判断，来看真实的产出是什么样的。

我用一份模拟的外贸服装公司（HY International）销售数据跑了一遍完整流程：96 条出口订单，12 家海外客户，6 个品类，覆盖 5 大区域市场，近 12 个月数据。

报告最顶部是"经营建议"区块，不是 KPI 数字。这是整个报告里最重要的设计决策：先给结论，再给数据。

看报告的人往往是时间最紧张的那个——在第一屏就知道最重要的 3 件事，再决定要不要往下深入看。

第二个设计决策是图表选型。品类分析的传统做法是两张柱状图，分别展示销售额和毛利率，读者需要在脑子里做交叉对比。

换成气泡散点图：X 轴是毛利率，Y 轴是销售额占比，气泡大小是订单数，加上均值参考线，四象限自然呈现。读者一眼就能看出谁是"明星品类"，谁需要战略决策。

图表选型不是审美偏好，是分析目的决定表达方式。

其他几个图表的选型逻辑也是一样：

• 回款率分布用直方图，能看出哪个区间的订单最集中，而不是只知道一个平均数
• 客户×品类用热力图，能发现哪个客户在哪个品类是空白——这是潜在增量
• 回款缺口用颜色深浅编码的横向条形，颜色越深越需要跟进

 03 

Report Skill 怎么设计：业务层负责"看什么"，AntV 负责"怎么画"

两层分工，各司其职

这个 Skill 最核心的设计判断是把业务层和技术层彻底分开：

业务层（我的 Skill）         负责"看什么"  · 这份数据应该分析哪些视角  · 各视角用什么图表类型表达  · 经营解读怎么写、洞察模板是什么  · 报告的信息架构和叙事顺序技术层（AntV 官方 MCP）     负责"怎么画"  · G2 5.x 的 spec 语法  · 实时查询官方文档，保证写法正确

两层解耦的好处：换图表库不影响分析逻辑，升级 AntV 版本不影响业务规则。

这里再来看看为什么选 AntV 而不是 ECharts

先说清楚：不是 AntV 替代 ECharts，是场景不同。

从使用体验上看，ECharts 更偏配置驱动，需要把 option 写得比较完整；AntV G2 更强调图形语法和数据映射，天然更接近"字段如何映射到视觉通道"的表达方式。

这个区别对 LLM 生成 spec 来说很重要：G2 的表达方式更接近自然语言描述数据关系，LLM 更容易写出正确的代码。同时 G2 的 mark 类型更丰富，气泡散点、瀑布图、哑铃图、热力图都是原生支持的，图表选型的自由度更高。

AntV 官方已经提供了 @antv/mcp-server-antv，可以在生成时实时查询 G2 5.x 的官方文档。LLM 不再靠"记忆"写 spec，而是每次查文档——这是 spec 语法正确率能稳定的根本保障。

Skill 的文件结构

hy-report-skill/├── SKILL.md                  ← 工作流、schema、质量检查清单├── references/│   ├── chart_selection.md    ← 图表选型决策树│   └── business_types/│       ├── sales.md          ← 销售分析：视角、洞察模板、section 顺序│       ├── ops.md            ← 经营分析│       └── growth.md         ← 增长分析（以此类推）├── assets/│   └── g2.min.js             ← G2 5.x 库（内联，离线可用）├── scripts/│   └── render.py             ← JSON → 单文件 HTML 渲染引擎└── demo/    ├── HY_sales_orders.csv   ← 销售分析源数据（96 条订单）    ├── sales_demo.json       ← 完整报告数据    └── sales_report.html     ← 已生成报告（可直接打开）

每个 Skill 都附带可以直接跑通的 demo——真实数据、真实 JSON、真实 HTML 输出。接入的人可以在 10 分钟内看到效果，而不是对着文档想象。

 04 

AI 外贸 CRM MVP：从报告到完整管理界面

Report Skill 解决了"生成什么"，但从一开始的规划里就有另一个问题："在哪用"。

数据怎么上传、报告怎么管理、客户信息怎么维护——这些都需要一套 B 端管理界面来承接。Report Skill 和管理界面框架是配套的两件事：一个定义 AI 能做什么，一个定义用户怎么用它。

导航结构收敛为六个模块：工作台、经营报告、客户管理、订单管理、回款风险、系统设置。

经营报告是核心流程：

新建报告 → 上传订单 CSV → 字段识别 → 数据预览 → 生成经营报告

工作台（Dashboard） 分三层：

• 经营摘要：6 个 KPI 卡片，覆盖业绩/利润/现金/客户/增长/风险
• AI 经营解读：关键数据→关键发现→风险提示→行动建议，底部附"以上内容由 AI 生成，仅供参考"
• 经营概览：月度趋势、市场结构、品类结构

导航角标只在有待处理事项的模块出现——克制比丰富重要。

三态设计是最容易被忽略、但最影响产品完成度的部分：

• 空态不是"暂无数据"，是"你还没有上传数据，[立即上传]"——空态是引导行动的入口
• 错误态不说"系统错误"，说"文件格式不支持，请上传 CSV 或 Excel"——告诉用户发生了什么、怎么修

框架做完之后，顺手沉淀成了 CRM Skill，包含 Dashboard 信息层级规则、列表页字段优先级、表单字段分组、详情页信息密度控制、三态标准写法。

框架是一次性的设计产出，Skill 是可以在下一个项目里复用的设计能力。

 05 

我把它整理成了一个 Starter Kit

做完这个 Demo 后，我发现它已经不只是一个"报告页面"了

Demo预览

更准确地说，它是一条完整的 B 端 AI 产品链路：

所以我把这次的过程整理成了一个 Starter Kit，供大家参考使用学习~

长按识别图内二维码，直达 B 端 AI 设计专栏，获取全套 Demo 与素材

首发版主要包含：

• AI 数据报告生成 Skill
  ：报告生成流程、图表选型规则、经营解读模板、示例数据和示例报告
• AI 外贸 CRM Web 原型
  ：工作台、经营报告、客户管理、订单管理、回款风险、系统设置
• B 端 AI 管理界面设计规范 Skill
  ：Dashboard、列表页、表单页、报告页
• 出口服装销售分析案例
  ：订单 CSV、字段说明、报告截图和报告结构
• 安装与二次开发文档
  ：如何运行、如何改字段、如何扩展报告模板

它不是完整 SaaS，也不是买完就能直接企业上线的系统。它更适合这些场景：

• 学习 AI 数据报告怎么设计
  

• 研究 B 端 AI 管理界面怎么搭
  

• 做 CRM / BI / ERP 类产品原型
  

• 理解 Skill 怎么产品化
  

• 拿一个可以二次开发的起点
  

需要深度体验的朋友，可以在上图中识别二维码获取。

如果你只是想先了解图表生成，我也整理了两个免费入口。

第一个是 AntV 相关官方资源。

适合想继续研究 AntV 图表生成、G2 语法、MCP 和官方图表 Skill 的朋友：

• AntV G2 文档：
  https://g2.antv.antgroup.com
• AntV MCP Server：
  https://github.com/antvis/mcp-server-antv
• AntV Chart Visualization Skills：https://github.com/antvis/chart-visualization-skills

第二个是我基于 ECharts 打造的图表Skill 免费版。

一个面向 AI Agent 的 ECharts 图表积木 Skill，
用于快速生成可复用的图表卡片、KPI 指标、仪表板区块，
可嵌入报告、CRM、经营工作台和数据看板。

ECharts 仍然是很多团队现有项目里最常见的图表库。如果你只是想体验"AI 如何生成图表"，可以从这个轻量 Skill 开始。

这份免费 Skill 只解决一个问题：让 AI 根据数据生成常见 ECharts 图表配置。支持柱状图、折线图、面积图、饼图、常见组合图、双轴图基础写法。

它的目标不是生成完整报告，而是生成一组可复用的图表块。

公众号后台回复「Skill」即可获取。