大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



 
  
    
     
原文地址：https://motherduck.com/blog/vibecoding-dashboards-best-practices
 

迈赫迪·瓦扎 | 2026/04/10 - 预计阅读 9 分钟

现在构建一个仪表盘从未如此简单。输入一个提示词，得到 JavaScript 代码，30 秒后你就有了图表。恭喜。

但是，真的有人能从看它当中学到东西吗？还是他们只是“哦，哇”地惊叹一声，然后就关掉了标签页？

看看这两个仪表盘。相同的数据集。相同的 AI 工具。结果却完全不同。

区别不在于技术——而在于在你按下回车键之前，对数据可视化的一些基本原理有所了解。以下五个步骤将让你那些“氛围编码”出来的仪表盘真正有用，而不仅仅是好看。

我将通过提示词技巧来展示“应该做”和“不该做”的事情。演示使用 Claude 和 MotherDuck Dive，但这些技巧适用于任何你使用英语并得到 JavaScript 图表的工具。

注意
如果你对 AI 代理时代 BI 的更广阔图景感兴趣，我们为此制作了一份完整的指南：《代理时代的 BI 指南》。

我们的案例研究是世界卫生组织（WHO）环境空气质量数据库——包含 2010 年至 2022 年间 7000 多个城市的 PM2.5、PM10 和 NO2 测量值。单位始终是微克每立方米 (μg/m³)，数值越高，空气质量越差。

PM2.5 快速参考：

• ≤ 5 μg/m³: 安全（WHO 指南值）
• 5–15: 中等
• 15–35: 不健康
• > 35: 危险

剧透一下：很多城市都高于 WHO 的建议值。

官方来源是一个 Excel 表格（是的，很痛苦），但我们已经在公共 S3 上为你准备好了 CSV 和 Parquet 文件，你可以用你喜欢的数据工具来使用它们。没错——你应该使用 DuckDB，或者至少告诉你的 AI 使用 DuckDB。

这是经典的错误。你很兴奋，打开你的 AI 工具，输入类似“给我展示这个数据集的一些数据可视化”这样的内容。然后你得到……一堆什么都没说明的图表。

相反，在你输入任何提示之前，先回答三个问题：

1. 受众是谁？ 政策制定者、记者或你的奶奶需要不同的视角。
2. 这个仪表盘应该支持什么决策？ 如果没人会根据它采取行动，那它只是装饰。把它像画一样挂在你墙上吧。
3. 关键要点是什么？ 如果什么都高亮，那就等于什么都没高亮。

对于我们的空气质量仪表盘，受众是普通人——我的奶奶、我的妻子、任何人。故事是：我所在城市的空气变得更干净了吗？在哪里，对谁而言？

在此之下：我的环境被污染得多严重？与地区相比如何？情况在变好还是变坏？我能为此做些什么？

这里有个很酷的点。“我能为此做些什么”这个问题——WHO 数据集实际上并没有答案。它告诉你哪些地方改善了，但没有告诉你原因。但你的 LLM 可能知道原因。例如，中国城市因为“蓝天保卫战”而改善了。所以，让数据告诉你谁改善了，让 LLM 告诉你为什么。这才是真正知识所在。

图表类型对应问题类型，而不是装饰。有一些框架可以指导这一点，你不必猜测。

对于我们的数据：

• 演变（PM2.5 在改善吗？）→ 折线图
• 排名（哪个地区最差？）→ 条形图
• 相关性（PM2.5 与 NO2 的关系？）→ 散点图

我所知道的**参考资料之一是 Yan Holtz 和 Conor Healy 的 From Data to Viz。它是一个决策树：你拥有什么类型的数据，你想展示什么——分布、排名、演变、相关性。这些答案将你的图表选择缩小到两三个选项，然后你可以具体地提示这些选项，而不是祈祷 AI 大神能猜对。

饼图 vs. 条形图：一个经典例子

让我们直接应用到一个经典的反模式上。下面的两个图表都显示了各地区的平均 PM2.5。但对于饼图，真的很难区分不同切片的角度。而对于水平条形图，排名一目了然。人类擅长比较长度，极不擅长比较角度。

提示词技巧： 具体说明图表类型。不要让它靠运气。

“添加一个水平条形图，按最近可用年份的平均 PM2.5 浓度对所有世界地区进行排名（从高到低），使用 WHO 严重程度等级着色（绿色 ≤5，蓝色 ≤15，橙色 ≤35，红色 >35），并在 5 µg/m³ 处添加标注为 WHO 指南参考线的虚线。”

应避免的反模式

既然说到这里——有几种图表类型几乎永远不应该出现在你的仪表盘中：

• 类别过多的饼图（比如 124 个国家——拜托不要）
• 任何 3D 效果
• 无关的双轴
• 有 20 多条线的“意大利面条”图

你选对了图表类型——现在不要用糟糕的设计毁掉它。四个原则。

有意图地使用颜色

默认的 AI 仪表盘使用随机的彩虹色，没有任何意义。相反，使用一个严重程度调色板，其中颜色确实代表某种含义：

• 绿色 (#2d7a08): ≤ 5 — WHO 安全
• 蓝色 (#0777b3): 5–15 — 中等
• 橙色 (#e18727): 15–35 — 不健康
• 红色 (#bc1200): > 35 — 危险

最多使用五种颜色。保持一致性。直接在提示词中传递十六进制代码，这样 AI 就不会猜测。如果你没有灵感，像 ColorBrewer 2.0 这样的工具可以帮助你选择调色板。

减少杂乱

这源自 Edward Tufte 的《定量信息的视觉展示》。他的原则是：最大化数据-墨水比例。屏幕上的每个像素都应该有其存在的价值。

实践中：

• 移除过多的网格线——只保留水平的浅灰色网格线
• 移除图表边框和阴影
• 尽可能直接标记，而不是使用图例
• 图表区域不要有背景填充

提示词技巧：

“使用极简、干净的设计。移除图表边框和阴影。仅使用浅灰色网格线。图表区域不要有背景填充。”

你甚至可以提到 Tufte 的名字——LLM 知道他是谁。

视觉层次

人们以 F 形模式扫描屏幕——先是左上角，然后向右，然后向下。相应地构建你的仪表盘：

• KPI 卡片 —— 顶部的概览数字
• 主图表 —— 最重要的趋势（左上角）
• 辅助图表 —— 排名或比较（下方或旁边）
• 明细表 —— 用于深入查看的具体数字（底部）

提示词技巧：

“布局：顶部一行 KPI 卡片，然后是一个显示全球趋势的折线图，接着是一个排名地区的条形图，最后是一个改善最多城市的表格。”

指定布局。这非常重要，这样 AI 就不会为你猜测。

添加上下文

没有上下文的数字是毫无意义的。

• 添加参考线（例如，虚线的 WHO 安全限值线）
• 标注事件（例如，COVID-19 封锁的垂直线——你会看到空气质量急剧改善，因为我们都待在家里）
• 条形图始终从零开始——截断的坐标轴会夸大差异
• 始终包含数据源和时间段

提示词技巧：

“添加一条在 PM2.5 = 5 处的红色虚线参考线，标注为‘WHO 指南值 (5 µg/m³)’。在 2020 年添加一条橙色的垂直虚线，标注为‘COVID-19 封锁’。”

选择一个主题

颜色、字体、图表规则、整体感觉——这就是你的主题。它应该是一致的，并且感觉像你的品牌。可以尝试的一些参考：

• Tufte 极简风: Georgia 衬线字体，#FFFFFF 背景，最大化数据-墨水比例——没有装饰性元素
• 知识即美: 灵感来自 David McCandless 的《Knowledge is Beautiful》一书
• FT 三文鱼色: 经典的《金融时报》风格

你可以在提示词中将其中任何一个作为主题指令传递，LLM 会理解。

一个仪表盘应该讲述一个故事，而不仅仅是显示数字。这来自 Cole Nussbaumer Knaflic 的《用数据讲故事》。如果你只读一本关于数据可视化的书，就读这本吧。

叙事弧线：

1. 设定 —— 什么是正常情况？（全球测量了 8500+ 个城市）
2. 张力 —— 哪里出了问题？（93% 的城市超过安全污染水平）
3. 洞察 —— “啊哈！”时刻（一些城市将污染减少了 60% 以上）
4. 行动 —— 现在怎么办？（你所在的城市排名如何？你能做什么？）

对于我们最终的巴黎仪表盘，这转化为：

• KPI 卡片显示当前浓度（蓝色——安全区，但仍比 WHO 限值高 2.9 倍）
• 一个显示巴黎与其他欧洲城市比较的排名
• 一个显示多年趋势的图表
• 关于你可以做些什么来改善空气质量的可操作建议

注意我直到第五步才提到交互性。这是故意的。太多人一开始就到处添加过滤器，这只会让用户感到困惑。从一个静态仪表盘开始。只有当出现后续问题时，再添加交互性。

当你添加交互性时：

• 城市选择器 —— 搜索/选择特定地点
• 年份切换 —— 更改时间范围
• 交叉过滤 —— 点击一个过滤器，它会应用于所有图表（否则会让人困惑）
• 工具提示 —— 悬停时显示额外细节

交互性应该支持叙事，而不是分散注意力。

事情是这样的。采用这五个步骤并将它们融入到你的提示词中会产生巨大的差异。

之前（懒惰的提示词）：

“基于这个数据集创建一些数据可视化。”

之后（信息充分的提示词）： 包含数据集路径、叙事弧线、具体的图表类型、十六进制颜色代码、布局说明、参考线和交互性规范。

相同的 AI。相同的数据。结果却是天壤之别。

你可能会想：我真的每次都要输入所有这些吗？不需要。你可以将这些规则转换成一个可重用的系统提示词或 AI 技能——一个 SKILL.md 文件，它编码了决策树，阻止反模式（无渐变、无 3D），并强制执行设计规则（间距、字体、调色板）。

当加载了该技能时，即使是一个懒惰的提示词也能产生显著更好的结果。

但这就是为什么我没有一开始就介绍这个技能：AI 遵循规则，但它不理解规则。当某些东西看起来不对劲时——一个被裁剪的坐标轴标签、不匹配的颜色、一个超出比例范围的图表——你需要成为发现它的人。仪表盘是为人类设计的。最终检查也必须由人类完成。

1. 在触碰图表之前，先定义一个问题
2. 将图表类型与问题类型匹配 —— 使用 From Data to Viz
3. 有意图地设计 —— 主题、颜色、布局、上下文线
4. 构建叙事 —— 设定、张力、洞察、行动
5. 最后添加交互性 —— 每个过滤器都应该回答下一个“那又怎样？”的问题

• From Data to Viz — Yan Holtz 和 Conor Healy
• 《定量信息的视觉展示》 — Edward Tufte
• 《用数据讲故事》 — Cole Nussbaumer Knaflic
• 《Knowledge is Beautiful》 — David McCandless
• ColorBrewer 2.0 — 颜色选择工具
• 《代理时代的 BI 指南》 — MotherDuck

照顾好你的仪表盘。下次你“氛围编码”一个仪表盘时，让它有用——而不仅仅是“哇”。