AI 赋能低代码 BI：Claude Code 结合 NBI 可视化，快速搭建行业数据大屏

前言

当下很多企业在数字化进程中积累了大量业务数据，但是搭建数据可视化大屏普遍存在不少难题。 传统开发模式制作大屏，需要前端开发编写图表代码，调试布局配色，耗时较长；业务人员缺少开发能力，需求只能排队等待 IT 处理。 同时市面上各类 AI 编程工具和 BI 平台相互独立，很难协同工作。AI 生成的代码不方便对接业务数据库，普通 BI 平台纯拖拽搭建，布局、配色调试繁琐，模板同质化严重。

Claude Code + NBI 自助可视化 BI 平台这套组合方案能够很好解决以上痛点。我们可以利用 Claude Code 丰富的第三方 Skills 生成大屏设计方案、模拟业务数据、输出可视化页面代码，再借助 NBI 低代码平台绑定真实数据源、配置大屏权限并对外发布，开发人员和业务人员都能上手，有效缩短大屏搭建周期。

本文讲解工具基础介绍、Skills 配置方法，搭配数据大屏实战演示，同时整理常见问题解决方案。

一、两款工具介绍，理清搭配思路

1. Claude Code 是什么

Claude Code 是 Anthropic 推出的本地终端 AI 编程智能体，和网页版 Claude 不同，支持读取本地项目文件、执行终端命令、操作 Git，并且支持扩展 Skills 插件。

常用可视化相关第三方 Skills：

• frontend-design：输出大屏设计方案，包含布局、配色、排版规范，避免千篇一律的模板页面
• data-visualizer：解析 CSV 数据，生成 ECharts 可视化页面
• superpowers：数据处理、文档生成、代码问题排查

Windows 系统 Skills 存放路径：C:\Users\用户名\.claude\skills，安装完成重启会话，输入/skills即可验证是否加载成功。

2. NBI 可视化平台能力

NBI-Dashboard 是轻量化自助 BI 工具，访问地址：http://www.easydatavis.com

核心功能：

1. 拖拽式搭建报表、数据大屏，内置 KPI 指标卡、折线图、柱状图、地图等多种组件；
2. 支持 CSV、Excel、数据库、API 等多种数据源接入，支持图表联动、定时刷新；
3. 提供自定义 HTML 组件，可以嵌入外部可视化页面；
4. 大屏支持全屏展示、分享链接、权限管控，适用于监控展厅、办公汇报场景。

3. 两者搭配优势

 

1. 使用 Claude Code 提前完成布局规划、模拟数据、视觉方案设计，减少 BI 平台反复调试；
2. AI 生成的 CSV 数据可以直接导入 NBI 建模，生成的 HTML 可视化页面能够嵌入画布；
3. 分工协作：技术人员生成模板，业务人员在 BI 平台替换真实业务数据；
4. 上手门槛低，依靠演示环境就能测试方案，前期投入成本较低。

二、实战演示：医疗行业公开数据大屏搭建

需求说明

搭建全国医疗卫生资源统计大屏，参考卫健委公开统计数据。展示指标：医院总数、三级医院数量、床位数量、千人执业医师数量、历年卫生费用趋势、各省床位分布、医疗机构结构占比。

实施流程：AI 生成设计方案→输出 CSV 模拟数据→NBI 导入数据建模→搭建大屏画布。

1、首先喂给AI学习NBI可视化工具的基本操作教程：

（1）NBI可视化平台快速入门教程（一）数据准备 https://www.cnblogs.com/NBIDataVis/p/16313746.html

（2）NBI可视化平台快速入门教程（二）工作表创建 https://www.cnblogs.com/NBIDataVis/p/16326050.html

（3）NBI可视化平台快速入门教程（三）带参工作表创建 https://www.cnblogs.com/NBIDataVis/p/16350871.html

（4）NBI可视化平台快速入门教程（四）数据可视化编辑器介绍 https://www.cnblogs.com/NBIDataVis/p/16382283.html

（5）NBI可视化平台快速入门教程（五）编辑器功能操作介绍 https://www.cnblogs.com/NBIDataVis/p/16426850.html

2、AI大模型学习完成之后，开始配合AI各种操作，各种尝试，期间有不少走不通的卡点（先忽略）

3、我的要求是让AI做一份医疗行业的发展趋势报告，是AI直接动手用工具做，而不是告诉我操作NBI可视化的教程：

 

4、提供工具地址，账号/密码给AI

5、之后AI努力各种尝试技能方法...（它在尝试的过程中，有时会需要你的协助，比如需要您在浏览器控制台中输入它提供的监控代码，将输出内容再提供给他分析...）

6、经过一顿人机协同交互之后终于看到了AI产出的第一版成果，虽然很糙，但值得欣慰，毕竟是AI现学现用：

7、继续给它提要求（利用工具中的组件太少，需要再次优化）

8、AI会让我提供以保存的数据大屏格式给它学习

9、学习之后再次出结果

10、发现布局有问题，继续给它提细节优化：

 以上是经过初步训练后的成果，后续继续打磨训练AI更好的使用NBI可视化工具。

 

Claude Code 搭配 NBI 可视化平台，打通 AI 智能体与低代码 BI 平台。大幅缩减大屏开发周期，上手门槛低，兼顾定制化视觉与真实业务数据源对接。

 

人工还可以AI输出的可视化页面，通过NBI工具继续做二次修正。