超强!DeepSeek+HTML制作数据看板,老板看了都点赞

boyanx4个月前技术教程16

DeepSeek以极强的推理能力,支持生成各种代码,比如Python、SQL、Matlab、JS、HTML等,你可以拿这些代码放到编译器里,就能直接跑出结果,比如机器学习算法、exe应用、可视化图表、web应用。

最近发现了一个好玩的场景,使用DeepSeek生成HTML来制作可视化数据看板。

数据看板是职场中常见的数据展现形式,一般用Excel、Tableau、PowerBI来做,但现在DeepSeek也能帮你完成简单的看板搭建工作。

你只需要给到数据和需求描述,DeepSeek便直接给出HTML代码,放到浏览器里就能生成酷炫的数据看板。

第一步:上传csv数据

以手机销售的数据集来测试,格式为csv,上传到DeepSeeK并提问,让它生成一份数据监测看板。

因为目前DeepSeek只能识别文本格式的文件,所以最好是将数据保存为csv格式。

第二步:输入提示语

上传文件后,直接输入模板化提示语,或者根据需求做调整,也可以做一些提示优化,有可能会得出更好的结果。

后台回复:看板,获取模板提示语+示例数据+示例代码

第三步:执行HTML代码

DeepSeek会根据你的需求,先分析数据,再将分析的结果生成HTML代码。

DeepSeek的网页版支持直接执行HTML代码,你可以先预览下效果,不满意的话再优化提示语。

最后的效果如下:

这仅仅是使用模板提示语的情况下生成的数据看板,不管是UI还是数据布局,都还算不错,但不够定制化。

下面咱们提一些自定义需求,让DeepSeek优化一下看板。

接下来优化数据看板,重新输出HTML。
首先,给看板加个标题:手机销售数据监测看板。
然后,下面有一组横向的数据总览,展示几个关键的数据指标。
最后有四个数据图表,上下各两个,分别展示月度销售额趋势、手机颜色销量占比、不同内存配置销售额的分布、不同颜色总利润的占比。

这回DeepSeeK根据特定需求做调整,生成数据看板看起来专业很多。

除了可以在DeepSeek网页上执行HTML代码之外,还可以在电脑本地新建一个HTML文件,将代码复制进去,用浏览器打开即可。

浏览器打开效果如下:

类似上面的数据看板,你还可以制作其他各种卡片,比如小红书图文。

小红书有特色的卡片形式,能清晰地展示各种内容和流程,这种卡片相比文字往往会有更高的浏览量。

比如,先问DeepSeek如何打造一个爆款小红书笔记, 然后让它将内容整理成小红书卡片。

接着让DeepSeek梳理内容,并输出为html代码。

最后会渲染出一个小红书卡片,里面是打造爆款小红书的教程。

以下是我尝试做过的各种小红书卡片,仅供参考。

相关文章

用好通义和Deepseek,3分钟生成小红薯读书卡片,要几张就有几张

今天想到一个问题,就是很多人都在小红薯上分享读书心得,要做出漂亮的读书卡片,势必要花费很多时间,消耗很多精力。那么能不能使用AI工具,快速制作小红薯卡片呢?答案是一定行!1、第一步,用通义千问生成代码...

如何用deepseek v3 新版本模型制作文字卡片用来介绍开源工具

文字卡片便于携带和复习,能帮助梳理知识要点,提升学习效率。它内容简洁,利于专注记忆,适合碎片化时间学习。制作过程还能加深理解和记忆,是高效学习的好工具。下面是X大佬分享的卡片制作prompt。效果如下...

Deepseek:精美文章生成卡片的提示词

# 文章概念卡片设计师提示词 ## 核心定位 你是一位专业的文章概念卡片设计师,专注于创建既美观又严格遵守尺寸限制的视觉概念卡片。你能智能分析文章内容,提取核心价值,并通过HTML5、Tailwin...

历时4个多月,学习了这 66 个CSS 特效

这 66 个特效,是我历时4个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱...

DeepSeek新技能Get!知识卡片也能如此惊艳

DeepSeek 也能绘制知识卡片啦,而且效果绝佳!各位快跟着小师妹一起一键生成吧!1Deepseek输出代码第一步,向它发送指令,要求以 HTML 格式输出 ,提示词如下:【请你提取下面内容,做成小...

css实现的卡片式渐变色卡html页面前端源码

大家好,今天给大家介绍一款,css实现的卡片式渐变色卡html页面前端源码(图1),送给大家哦,获取方式在本文末尾。不同颜色的渐变,给用户炫酷的视觉体验(图2)源码完整,需要的朋友可以下载学习(图3)...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。