用AI做酷炫的数据看板HTML，并稳定更新数据，落地到实际工作中

得益于AI上下文和审美能力的提升，现在做HTML已经没什么门槛了，可以应用到很多方面，例如小红书封面、PPT、原型图、数据看板等等。

例如基于腾讯财报的数据看板：

基于阿里巴巴财报的数据大屏：

（我把这两个看板的提示词放到了文末，可自取）

但到了「落地」的时候，就发现有问题：

你想象一下，如果你这个月用AI生成了数据看板HTML做月报，到了下个月，你再把同样的提示词、参考示例给AI去生成这个月的HTML报告，会发现：怎么不一样了？某个同比指标怎么没了？某个图表形式怎么变了？

尽管大致相似，但在实际业务中，要的是稳定生产能力，而不是每次都要「抽卡」

要解决这个问题，有两种方案：

1是做AI工作流，通过各种流程生成不同部分，最后再组合成一个完整的HTML

这种方式很稳定，还能对接数据库，实现实时更新，但门槛比较高，感兴趣可以评论区留言，我单独做一个教程。

2是生成HTML模板，让HTML读取JSON数据，这样下次更新的时候，只需要更新JSON数据文件即可。

这样的方式门槛低，结果也稳定，适合大部分人先开始尝试。等稳定下来，模板业务也认可了，再用方式一做成工作流提升效率。也就是说方式二是方式一的前期测试。

接下来，带大家看看第二个方式要怎么做。

首先，先复现一下问题。

我们生成了腾讯2024年的财报数据看板：

接着，让AI用同样的格式形式，用新的2025年的财报生成一样的数据看板HTML

结果看似差不多，也很酷炫，但实际看板不同了，例如本来有关注「股东回报」的，但这里没有了，要是老板问起来这个数据呢？就只能汗流浃背了。。。

（这里是举例，不考虑因为年报和月报披露的数据指标不同的影响）

生成HTML模板和JSON数据文件

不用怕，解决方案也很简单。

首先，让AI学习前面几份看板，总结出一个看板模板，以及让模板读取的数据文件：

为了能让后续腾讯的财报都能用更稳定的模板展示（例如同样的结构、指标等），请你根据前面两份腾讯的财报，总结提炼出一个html模板，并且让html中的数据指标直接读取数据文件，这样下次我直接更新数据文件，html就能读取到最新的数据。

请给我HTML模板，以及2025年一季度的数据文件JSON。

要求：

1. 这个html我是直接通过chrome等现代浏览器打开的，你需要给我一个最简单且能确保正常读取到数据文件的方式

2. 我没有服务器，是纯html文件运行

3. 运行方式：通过用户上传json文件的方式让html读取json数据，也就是说需要在html里新增一个上传文件的功能。

4. json数据文件要保持简单，确保json里只需要存储指标和对应的数据、以及相关的文字，其余的复杂部分都写到html模板里

然后把AI给的HTML和JSON都复制到TXT文件，修改后缀，得到：

打开html后，会提示我们上传数据文件：

此时上传文件后就能得到数据看板，例如腾讯2025年一季度：

OK，接下来测试一下更新数据会怎样。

现在我们只需要在json里更新数据就好了，可以用python，也可以像我这样，让AI帮我从财报中提取数据放到JSON里：

把JSON上传到模板里，如下图腾讯2024三季度的财报数据，可以看到结构是一样的。

今天分享的是一个数据看板的示例，但是只要掌握了「 HTML模板+JSON数据文件 」的玩法，就能拓展到不同领域，实现稳定的模板输出，快速在业务中落地。

提示词

文章开头的腾讯财报数据看板：

## task

把附件的腾讯控股的财报做成符合以下规则的可视化报表

## role

你是一名资深的前端开发工程师，善于使用各种前端开发技术，精通如下技术栈提示的相关技术，分析并充分理解 {用户输入内容} ，并生成一个动态网页:

### 技术栈

1. HTML5: 基础结构。

2. TailwindCSS 3.0+ (CDN): 用于快速响应式布局和样式。

3. Framer Motion (CDN): 实现平滑的滚动动画。

4. Font Awesome (CDN): 提供专业的图标。

5. JavaScript: 配合Framer Motion实现动态效果和交互。

### 主题设计:

1. Bento Grid: 页面主体将由多个不同大小的卡片组成，形成Bento Grid布局。

2. 颜色主题: #000000 (纯黑) 作为背景, #E31937 (特斯拉红) 作为高亮色、边框、重点文字颜色。

### 排版:

1. 中文大标题、核心数字：大号、粗体、特斯拉红或白色。

2. 英文/辅助说明：小号、常规体、灰色或白色。

### 视觉元素:

1. 超大数字/文字: 突出核心数据，如收入、利润增长率。

2. 勾线图标: 使用Font Awesome，风格简洁。

3. 透明度渐变: 高亮色块或装饰元素会使用从特斯拉红到透明的渐变。

4. 简洁的勾线图形化作为数据可视化或者配图元素。

5. 模仿apple官网的动效，向下滚动鼠标配合动效。

6.

### 动效:

1. 当元素滚动进入视口时，会有淡入、向上浮现等效果，模仿Apple官网的质感。

2. 部分数字可能会有动态计数效果（为简化，此处主要用Framer Motion的入场动画）。

## 限制

1. 避免使用emoji作为主要图标。

2. 不要省略用户提供内容要点，梳理核心内容，并作出总结。

阿里巴巴财报的数据大屏：

请为我设计一个符合企业级标准的三维可视化数据大屏，参照现代科技感的紫色与橙色渐变风格，创建一个尖端科技风格的企业级数据可视化大屏HTML/CSS/JS完整应用，基于我提供的数据，做阿里巴巴2024年财报数据大屏，遵循以下规范：

## 设计风格

- 使用深色背景（深蓝/黑色）作为基底，创造沉浸式数据体验

- 采用紫色、粉色、蓝色渐变作为主色调，配以橙色/珊瑚色作为强调色

- 所有图表和界面元素应有发光边缘效果，增强科技感和立体感

- 设计布局应采用三维空间感，让数据图表悬浮于不同层级

## 核心功能需求

1.多维度数据可视化

- 包含折线图、柱状图、面积图、散点图、热力图等多种图表类型

- 所有图表需支持3D效果和悬浮式设计

- 图表间需有联动效果，一个图表的数据变化会影响其他相关图表

2.实时数据交互

- 所有图表支持鼠标悬停显示详细数据信息

- 提供数据筛选器，允许用户自定义数据展示范围

- 图表支持缩放、旋转等交互操作

3.动态效果

- 数据加载和更新时的流动动画效果

- 数据变化时的平滑过渡动效

- 背景元素（如粒子、光线）的微妙流动效果

- 3D空间中的数据元素漂浮动效

4.移动端适配

- 设计移动端控制面板，如参考图下方所示的手机界面

- 移动端界面应保持与大屏相同的设计语言

- 支持通过移动设备远程控制大屏展示内容

## 技术实现

- 纯前端实现：HTML5 + CSS3 + 现代JavaScript

- 基于Three.js或Echarts-GL实现3D可视化效果

- 使用WebGL处理大量数据渲染

- 支持多种数据源接入（API、CSV、数据库等）

## 适配性要求

- 设计应具有灵活的数据模型，能适应不同行业的数据结构

- 提供模板配置系统，允许用户自定义布局和图表组合

- 支持多种分辨率（16:9、21:9、4:3等）屏幕比例

## 交付成果

1. 完整的可视化大屏前端代码

2. 数据适配器和接口文档

3. 配置面板设计，支持拖拽式布局调整

4. 针对特定行业的数据模板（金融、制造、医疗、零售等）

5. 响应式设计确保在不同设备上的一致体验

请在设计中特别强调数据的立体感、层次感和流动性，让静态数据在空间中具有生命力，如参考图中的立体城市与流动曲线所展现的效果。整体应给人一种未来科技感和高端专业的印象。同时创建一个企业级质量的智能数据可视化大屏，兼具视觉震撼力、流畅交互体验和实用功能，且能在现代浏览器中完美运行。

文章来自于“饼干哥哥AGI”，作者“饼干哥哥”。