>  **JimuReport AI专题研究** | JimuReport积木报表 × Claude Code 一句话生成生产级数据大屏的实战观察

---

[![告别拖拽：Claude Code + 积木报表 一句话生成数据大屏](https://developer.qcloudimg.com/http-save/yehe-1184138/15b47eb33778ca6b81d2b1739f2858be.jpg)](https://www.bilibili.com/video/BV1eh5S6KER7)

#### 凌晨三点，被这个东西彻底整失眠了

凌晨刷 B 站准备睡觉，刷到 JEECG 官方号一条新视频——[《告别拖拽！Claude Code+积木报表 一句话生成数据大屏》](https://www.bilibili.com/video/BV1eh5S6KER7)。点进去之前心态是平的，AI 生成图表这两年看过太多 demo，无非「能跑」但「不能用」。

视频结束的时候我直接坐起来了。这次不是 demo，是**生产级别**的产出物。

随手一句中文需求，Claude Code 调起 `jimubi-bigscreen` Skill，几分钟弹出一个能直接挂客户路演 LED 墙的大屏——三列布局、KPI 顶栏、深色科技风、地图飞线、滚动列表、装饰灯带，**该有的一个不缺，不该有的一个不冒**。

睡不着，把官方提示词文档 [bigscreen-prompts](https://help.jimureport.com/rumen/bigscreen-prompts) 通读了一遍。看完会明白：**JimuReport积木报表 的 AI 大屏，已经不是玩具了。**

---

#### 这次为什么和以前不一样

过去几年的"AI 生大屏"，毛病都差不多：能出一张图但出不了一整屏；能拼出三列但没装饰像 90 年代后台；mock 数据漂亮但真实接口一接就崩。

JimuReport积木报表 的 `jimubi-bigscreen` Skill 干的不是"调用 AI 画图"，而是**把"如何设计一个合格大屏"拆成几十条可执行规则**喂给 Claude Code。规则覆盖：

- **像素坐标布局**（x/y/w/h 绝对定位，不是栅格，避免组件相互叠加）
- **1920×1080 深色主题 + 平台命名色板**（科技 / 商务 / 复古 / 暗夜）
- **12 套装饰条 + 13 套边框预设**（一行 prompt 就能套上）
- **演示数据量阈值**（飞线至少 25 条、滚动表至少 15~20 行）
- **5 维组件选型**（指标 / 趋势 / 占比 / 排行 / 地图）

AI 不再是凭"审美直觉"画大屏，而是有一份**老炮儿可视化工程师的肌肉记忆**作为先验。

[![政务民生大屏：区县办件分布地图 + 多维 KPI 卡（点击看动图）](https://developer.qcloudimg.com/http-save/yehe-1184138/cee6f83a16ce85434804e2eb04547bf5.png)](https://help.jimureport.com/jimuImages/compressed-%E6%94%BF%E5%8A%A1%E6%9C%8D%E5%8A%A1%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83.mp4)

---

#### 两步走：先出形，再接魂

官方文档强调的提示词流程，是能做到生产级的核心心法：

> **第 1 步：纯静态数据出大屏。** prompt 只写布局、组件、文案、配色，让 Skill 用 mock 数据一把生成。
>
> **第 2 步：分批替换为真实业务数据。** 视觉确认后，按"哪个组件接哪种数据源"逐个换（API → JSON → SQL）。

做过大屏的同行都懂——**先接数据再调样式，是最容易翻车的地方**。接口结构一改、字段名一动，整页样式重来。Skill 先把视觉骨架定死，再灌数据，**视觉与数据彻底解耦**。

---

#### 实战示例 1：三列经典布局大屏

视频里第一个让我心动的样本，是「券商交易室监控大屏」：

```
创建券商交易室监控大屏，名称「交易监控大屏」，从零开始建，三列布局：
- 左列：核心交易指标（成交额 / 上涨家数 / 下跌家数 / 换手率）、
        活跃股票 TOP 10 排行榜、三大指数实时进度条
- 中列：全国资金流向地图、分时成交量趋势对比折线图
- 右列：各板块涨跌分布水平柱形图、资金行业配置环形图、市场情绪渐变仪表盘
```

几个关键写法：

1. **「从零开始建」**——触发 Skill 走完整生成流程的信号词，避免在已有大屏里乱改。
2. **明确"左中右"+ 组件名**——三列布局是大屏 80% 的场景，白描比让 AI 自己设计稳得多。
3. **指标颗粒度写到字段**——"成交额 / 上涨家数 / 换手率" 这种精度，AI 才能生成像样的 mock 数据。

我自己跑了一次，从输入到出图大概 50 秒，**第一次就出形**。两年前同样的产物，熟练的可视化工程师起步 1.5 天。

[![电竞赛事大屏：三列布局 + 实时比分 + 战队排行（点击看动图）](https://developer.qcloudimg.com/http-save/yehe-1184138/a0f187c39f0ceb302e0f0c1c63864cb3.png)](https://help.jimureport.com/jimuImages/compressed-%E7%94%B5%E7%AB%9E%E8%B5%9B%E4%BA%8B%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83.mp4)

---

#### 实战示例 2：数字孪生港口大屏

券商示例是开胃菜，港口大屏才是硬菜。官方 prompt 接近 600 字，摘其中信息量最大的部分：

```
创建数字孪生智慧港口运营管控大屏。第一行展示 6 个核心指标：
今日靠泊船舶 87 艘、集装箱吞吐量 24850TEU、桥吊作业效率 38.6 箱/小时、
堆场利用率 76.3%、当前在港船舶 142 艘、综合运营指数 94.8 分。

中间一张港口卫星俯瞰地图，气泡大小展示泊位船舶载重，
飞线展示进出港路径（至少 25 条），下方放实时船舶动态滚动列表
（船名/MMSI/船籍/吃水/航速/目的港/预计离港，至少 20 条）。
```

这段 prompt 塞满了"硬约束"：

- **具体数值**（87 艘、24850TEU、38.6 箱/小时）：告诉 AI 这是工业级数据。
- **「至少 25 条 / 20 条」**：演示数据量阈值，飞线少于 20 条会显得空。
- **风格定调**（深色科技风 / 液球蓝色系 / 装饰加满）：直接落到 Skill 预设色板。

**约束写得越细，AI 反而越自由发挥**——这是我刷了 30 多个 AI 编程视频后总结的反直觉规律。

[![数字孪生智慧港口大屏：6 大 KPI + 卫星地图 + 飞线 + 滚动船舶动态（点击看动图）](https://developer.qcloudimg.com/http-save/yehe-1184138/12493013accb4ccc53b14c5a308ae4c5.png)](https://help.jimureport.com/jimuImages/compressed-%E6%99%BA%E6%85%A7%E6%B8%AF%E5%8F%A3%E6%95%B0%E5%AD%97%E5%AD%AA%E7%94%9F%E4%B8%AD%E5%BF%83.mp4)

---

#### 实战示例 3：查询联动 + 多级钻取

只能出"静态好看"的屏还停在 demo 层，真正进入生产级的是**交互能力**。

```
做一个销售运营查询大屏，深色科技风。查询表单包含：日期范围、销售区域
（华东/华南/华北/华中）、产品类别。

【最关键】表单要联动整屏：选完区域/类别/日期点查询后，指标卡的 4 个数字、
销售趋势折线、订单明细表都按筛选条件刷新。比如选"华东"，所有数据切到华东大区。
数据用 mock 接口模拟，按区域返回不同的演示数据。
```

这段最牛的细节是「按区域返回不同的演示数据」——它告诉 Skill 不光要在 UI 挂联动，连 mock 数据都要切。生成出来真的会换数据，不是假装刷新。

多级地图钻取更狠：

```
全国销售分布地图配置钻取——用户点击某省份时下钻到该省的城市级地图。
如果数据集需要参数化（${province}），请正确配置 params。
```

`${province}` 是 JimuReport积木报表 数据集动态绑定的语法。**平台特定语法必须在 prompt 里写出来**，业务字段 AI 能猜，平台语法不能猜。

[![餐饮连锁运营大屏：气泡地图按营收规模分布（点击看动图）](https://developer.qcloudimg.com/http-save/yehe-1184138/14d9cd87608c4af6c405f62327eb9f6f.png)](https://help.jimureport.com/jimuImages/compressed-%E9%A4%90%E9%A5%AE%E8%BF%9E%E9%94%81%E5%93%81%E7%89%8C%E8%BF%90%E8%90%A5%E7%9C%8B%E6%9D%BF.mp4)

---

#### 总结

为什么会失眠——不是工具多酷炫，是它**改变了大屏交付的成本结构**。

过去一个客户级大屏：原型 1 天 + 前端 2 天 + 数据接入 1 天 + 调样式 1 天 = 一周起步。现在用 JimuReport积木报表 + Claude Code：出形 5 分钟、审美确认半小时、数据接入 2 小时，**半天交付**。

`jimubi-bigscreen` Skill 的发布是个标志性事件——**它证明了 AI 编程在"垂直行业 + 平台沉淀"这条路上，确实能产出生产级方案**。前提是底层平台得过硬，AI 负责把这些能力以自然语言翻译给业务人员。

[![在线教育大屏：转化漏斗 + 关键词词云（点击看动图）](https://developer.qcloudimg.com/http-save/yehe-1184138/0a7f18f7592ee390fa2995eb8f41fba5.png)](https://help.jimureport.com/jimuImages/compressed-%E5%9C%A8%E7%BA%BF%E6%95%99%E8%82%B2%E8%BF%90%E8%90%A5%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83.mp4)

---

> **JimuReport积木报表 — 免费的 AI 可视化报表**
>
> 一句话描述需求，AI 自动生成报表与数据大屏；同时提供类 Excel 拖拽设计器，兼容 30 余种数据源，轻松应对各类复杂报表场景——帆软、Tableau 的高性价比开源替代。
>
> 项目地址：https://github.com/jeecgboot/JimuReport

*本文为 JimuReport AI 专题研究系列文章。*

JimuReport AI专题研究 | JimuReport积木报表 × Claude Code 一句话生成生产级数据大屏的实战观察

【AI大屏】今晚失眠夜，Claude Code + 积木报表：AI 生成数据大屏，已达生产级水平

人工智能

前端

大数据

JimuReport积木报表联合ClaudeCode实现AI一句话生成生产级数据大屏，涵盖三列布局、KPI指标、地图飞线等多维组件，支持真实数据接入与交互联动，五分钟出形、半天交付，真正实现大屏开发降本增效。开源免费，支持30+数据源。

数字孪生

JSON

腾讯云BI新客户首次购买9.9元起！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【AI大屏】今晚失眠夜，Claude Code + 积木报表：AI 生成数据大屏，已达生产级水平-腾讯云开发者社区-腾讯云

【AI大屏】今晚失眠夜，Claude Code + 积木报表：AI 生成数据大屏，已达生产级水平

【AI大屏】今晚失眠夜，Claude Code + 积木报表：AI 生成数据大屏，已达生产级水平

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐