原文地址：https://motherduck.com/blog/vibecoding-dashboards-best-practices
你的 AI 仪表盘看起来很酷，但没人能从中学到任何东西
迈赫迪·瓦扎 | 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。
第 1 步：从问题开始，而不是从图表开始
这是经典的错误。你很兴奋，打开你的 AI 工具，输入类似"给我展示这个数据集的一些数据可视化"这样的内容。然后你得到......一堆什么都没说明的图表。
相反，在你输入任何提示之前，先回答三个问题：
- 受众是谁？ 政策制定者、记者或你的奶奶需要不同的视角。
- 这个仪表盘应该支持什么决策？ 如果没人会根据它采取行动，那它只是装饰。把它像画一样挂在你墙上吧。
- 关键要点是什么？ 如果什么都高亮，那就等于什么都没高亮。
对于我们的空气质量仪表盘，受众是普通人------我的奶奶、我的妻子、任何人。故事是：我所在城市的空气变得更干净了吗？在哪里，对谁而言？
在此之下：我的环境被污染得多严重？与地区相比如何？情况在变好还是变坏？我能为此做些什么？
这里有个很酷的点。"我能为此做些什么"这个问题------WHO 数据集实际上并没有答案。它告诉你哪些地方改善了，但没有告诉你原因。但你的 LLM 可能知道原因。例如，中国城市因为"蓝天保卫战"而改善了。所以，让数据告诉你谁 改善了，让 LLM 告诉你为什么。这才是真正知识所在。
第 2 步：将图表类型与问题类型匹配
图表类型对应问题类型，而不是装饰。有一些框架可以指导这一点，你不必猜测。
对于我们的数据：
- 演变 （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 多条线的"意大利面条"图
第 3 步：有意图地设计
你选对了图表类型------现在不要用糟糕的设计毁掉它。四个原则。
有意图地使用颜色
默认的 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 会理解。
第 4 步：构建叙事弧线
一个仪表盘应该讲述一个故事，而不仅仅是显示数字。这来自 Cole Nussbaumer Knaflic 的《用数据讲故事》。如果你只读一本关于数据可视化的书，就读这本吧。
叙事弧线：
- 设定 ------ 什么是正常情况？（全球测量了 8500+ 个城市）
- 张力 ------ 哪里出了问题？（93% 的城市超过安全污染水平）
- 洞察 ------ "啊哈！"时刻（一些城市将污染减少了 60% 以上）
- 行动 ------ 现在怎么办？（你所在的城市排名如何？你能做什么？）
对于我们最终的巴黎仪表盘，这转化为：
- KPI 卡片显示当前浓度（蓝色------安全区，但仍比 WHO 限值高 2.9 倍）
- 一个显示巴黎与其他欧洲城市比较的排名
- 一个显示多年趋势的图表
- 关于你可以做些什么来改善空气质量的可操作建议
第 5 步：使其具有交互性------但不要让人不知所措
注意我直到第五步才提到交互性。这是故意的。太多人一开始就到处添加过滤器，这只会让用户感到困惑。从一个静态仪表盘开始。只有当出现后续问题时，再添加交互性。
当你添加交互性时：
- 城市选择器 ------ 搜索/选择特定地点
- 年份切换 ------ 更改时间范围
- 交叉过滤 ------ 点击一个过滤器，它会应用于所有图表（否则会让人困惑）
- 工具提示 ------ 悬停时显示额外细节
交互性应该支持叙事，而不是分散注意力。
提示词的差异
事情是这样的。采用这五个步骤并将它们融入到你的提示词中会产生巨大的差异。
之前（懒惰的提示词）：
"基于这个数据集创建一些数据可视化。"
之后（信息充分的提示词）： 包含数据集路径、叙事弧线、具体的图表类型、十六进制颜色代码、布局说明、参考线和交互性规范。
相同的 AI。相同的数据。结果却是天壤之别。
额外加分：使其成为可重用的技能
你可能会想：我真的每次都要输入所有这些吗？不需要。你可以将这些规则转换成一个可重用的系统提示词 或 AI 技能 ------一个 SKILL.md 文件，它编码了决策树，阻止反模式（无渐变、无 3D），并强制执行设计规则（间距、字体、调色板）。
当加载了该技能时，即使是一个懒惰的提示词也能产生显著更好的结果。
但这就是为什么我没有一开始就介绍这个技能：AI 遵循规则，但它不理解规则。当某些东西看起来不对劲时------一个被裁剪的坐标轴标签、不匹配的颜色、一个超出比例范围的图表------你需要成为发现它的人。仪表盘是为人类设计的。最终检查也必须由人类完成。
太长不看版
- 在触碰图表之前，先定义一个问题
- 将图表类型与问题类型匹配 ------ 使用 From Data to Viz
- 有意图地设计 ------ 主题、颜色、布局、上下文线
- 构建叙事 ------ 设定、张力、洞察、行动
- 最后添加交互性 ------ 每个过滤器都应该回答下一个"那又怎样？"的问题
参考文献
- From Data to Viz --- Yan Holtz 和 Conor Healy
- 《定量信息的视觉展示》 --- Edward Tufte
- 《用数据讲故事》 --- Cole Nussbaumer Knaflic
- 《Knowledge is Beautiful》 --- David McCandless
- ColorBrewer 2.0 --- 颜色选择工具
- 《代理时代的 BI 指南》 --- MotherDuck
照顾好你的仪表盘。下次你"氛围编码"一个仪表盘时，让它有用------而不仅仅是"哇"。