领导真正想要的，是快速知道下个季度该重点跟哪几个客户。
数据在系统里，不等于报告在系统里。图表堆出来的东西，也不等于真正的报告。
顺着这个思路，我基于 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 图表配置。支持柱状图、折线图、面积图、饼图、常见组合图、双轴图基础写法。
它的目标不是生成完整报告，而是生成一组可复用的图表块。
