> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# 复盘一个Vibe Coding的仪表盘
- URL: https://www.hubwiz.com/blog/reviewing-a-vibe-coded-dashboard/
- Published: 2026-05-15T15:58:45.000Z
- Updated: 2026-05-15T15:58:45.000Z
- Description: Vibe Coding消除了数据清洗和Web开发中的大量繁琐工作，但你仍然需要编辑的眼光——以及一些软件工程技能——才能让内容准备好发布。
- Author: admin
- Tags: AI, #Import 2026-10-14 14:41

我花了一周时间为菲律宾2025年全国人口与健康调查（NDHS）构建了[一个数据可视化和分析仪表板](https://tordecilla.github.io/ph-ndhs-2025-web/?ref=hubwiz.com)，这份报告每三年发布一次，跟踪健康、生育、人口统计和文化态度方面的关键指标。该调查由[菲律宾统计局](https://psa.gov.ph/statistics/national-demographic-health-survey?ref=hubwiz.com)（PSA）于3月底发布，包含的丰富数据不仅对记者有用，对政策制定者和公民也是如此。

但在发布一个多月后，关于该报告的大多数新闻[只涵盖了一个数据点](https://news.google.com/search?q=2025%20National%20Demographic%20and%20Health%20Survey&ref=hubwiz.com)：菲律宾的总生育率已降至1.7，低于更替水平。虽然这是一个重要的全国性新闻，但调查还包含大量其他有价值和有趣的关于生育、孕产妇保健、避孕、儿童死亡率、疫苗接种、管教和惩罚、幼儿发展以及亲密伴侣暴力的数据。调查中的数据可以进一步挖掘以获取对记者、政策制定者和不同领域的社会倡导者有用的洞察。

通过这个项目，我希望能通过地图、图表甚至AI生成的洞察让受众更容易访问数据，以便他们更深入地探索。以下是我用一周时间vibe coding这个仪表板学到的东西。

## 1、耐心

即使你不知道如何开始，也可以创建构建模块，但需要大量耐心。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-bOot3WlsUUIkopJjVJZG7g.png)

通过vibe coding构建的带数据面板的菲律宾下钻地图。

当我开始这段旅程时，并没有打算构建NDHS仪表板。我只是想尝试用编程智能体来构建很酷的地图。

菲律宾开发者James Faeldon维护着[一个菲律宾行政区域地图的Github仓库](https://github.com/faeldon/philippines-json-maps?ref=hubwiz.com)，允许任何人构建一个可以从大区到省到市/自治市一路下钻到描笼涯（该国最低级别的政府）的地图。我想把他的工作用于我的项目，但我没有编程能力来把它组合在一起，直到编程智能体出现。

在Claude Code中规划项目时，我只是给了它仓库的地址并描述了我想要的行为：它必须加载按大区划分的整个菲律宾地图。点击一个大区会显示该大区内的省份，点击省份会显示该省内的市和自治市。我还需要一个在每个层级都会显示的数据面板。

活动一开始就令人印象深刻，Claude Code在一小时左右读取了Github仓库中的文件并构建了一个类似于我脑海中想象的网站。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-6wRCUd8xddqL-cIBqlbmrA.png)

通过vibe coding构建的菲律宾怡朗省地图，怡朗市位置偏移。

尽管如此，我最终还是花了整整一天时间来调整一切。我遇到的问题看起来很小，但需要了解菲律宾地方政府是如何组织的知识。例如，有些城市被归类为高度城市化城市（HUC），地理上属于某个省但在政治上独立于省级政府。例如，怡朗市政治上不属于怡朗省，尽管地理上属于该省。在实际操作中，这意味着怡朗省的地图渲染时不包含怡朗市，这可能对政治家有意义，但对用户来说说不通。

即使在给Claude Code一份高度城市化城市列表后，它仍然难以正确渲染地图。反反复复，它只是把城市画在海里，远离其所属省份。其他时候，它将HUC渲染成拼图游戏中不匹配的碎片。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-DaxrOopYJOqHN7oZhgJ5Kg.png)

通过vibe coding构建的菲律宾邦板牙省地图，安赫莱斯市突出。

调整正确的过程意味着与Claude Code进行了大量的来回调试，因为它试图修复我发现的错误。有几次，我的Claude账户使用量达到了限制，这意味着我不得不休息一下，等限制重置后再继续。

与编程智能体合作的经历让我想起了[那个古老的程序员笑话](https://en.wikipedia.org/wiki/Ninety%E2%80%93ninety%5Frule?ref=hubwiz.com)，"前90%的代码占用了前90%的开发时间。剩下的10%的代码占用了另外90%的开发时间。"这在整个项目中一次次地被证明是正确的。

但我最终让地图看起来可以接受，即使不是完全完美。意识到我和其他人可以将此作为其他数据可视化项目的构建模块，我让Claude将项目[上传到Github](https://github.com/tordecilla/ph-drilldown-map?ref=hubwiz.com)。这是一个[工作演示](https://tordecilla.github.io/ph-drilldown-map/?ref=hubwiz.com)。

## 2、魔法

使用编程智能体进行数据清洗和提取感觉像魔法。

在Github上发布我的下钻地图模板后，我想用它来处理各种数据集。我在Claude Code中启动了一个新项目，创建一个网站来展示不同的[分级统计地图](https://en.wikipedia.org/wiki/Choropleth%5Fmap?ref=hubwiz.com)来表示菲律宾的不同数据集。

我浏览了PSA网站，看看有哪些具有地理粒度的数据集。在菲律宾，从政府获取数据意味着在加载缓慢的网站上搜索来下载Excel电子表格中的数据——这里没有花哨的MCP服务器、API或任何其他自动化数据管道。将数据用于新闻和可视化项目意味着大量的清洗和转换。对于世界各地的许多新闻编辑室来说，这就是现实。

我从一个包含菲律宾贫困发生率的数据集开始。就格式而言，它不是最干净的数据集，但也不是最复杂的。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-Tq7w9yCFR4YI78_lfSxICw.png)

显示菲律宾贫困门槛数据的Excel电子表格。

我指示Claude Code提取数据并将其插入我们的模板地图。由于它只包含到省级的数据，我让编程智能体简单地禁用进一步下钻的功能。

它像魔法一样工作——不需要繁琐的数据清洗或转换。它甚至能弄清楚电子表格中的点表示层级，并相应地导入数据。对地图面板中导入数据的抽查也显示它准确地提取了所有内容。我只需要Claude Code调整一些展示细节。例如，与该国其他大区不同，首都大区包含的是市和自治市而不是省，所以地图必须反映这一点。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-KFN_2kRPZaIpeFBEmSFfHw.png)

基于菲律宾统计局电子表格的菲律宾贫困发生率下钻地图。

我尝试了其他能找到的数据集——年度家庭收入、基尼系数、按地区计算的国内生产总值——它处理得都很好。令人印象深刻。

## 3、探索

编程智能体让你轻松转向和追求新想法。

就在那时，我偶然发现了[NDHS数据集](https://psa.gov.ph/sites/default/files/dhsd/Statistical%20Tables%5F2.xlsx?ref=hubwiz.com)。与其他电子表格不同，这个更复杂，有多个工作表，以及地理之外的其他指标。我让Claude Code从一张表中提取地理数据并构建地图——[总生育率](https://tordecilla.github.io/ph-ndhs-2025-web/?ref=hubwiz.com#fertilityrate--map)——它完美地完成了。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-P71vSYStN9OmmQgIDPCmeA.png)

2025年菲律宾全国人口与健康调查中显示青少年怀孕数据的表格。

从其他工作表构建地图就没那么简单了。例如，[青少年怀孕](https://tordecilla.github.io/ph-ndhs-2025-web/?ref=hubwiz.com#teenage-pregnancy-2025--tmap--meverpregnant)表有五个不同的维度。我让Claude Code构建一个标签系统让用户导航这些维度，它一次就搞定了。在从数据集构建了其他五张地图后，我意识到我可以转向将其变成一个专门关注NDHS调查的独立仪表板。

我在Claude Code上为NDHS数据集启动了另一个新项目。查看报告中的数据后，我意识到如果除了地图之外还能展示其他指标，项目会更加丰富。

所以我让它创建另一个标签系统，这次是让用户导航到包含其他非地理数据的图表页面。然后我让它从每个工作表中提取非地理数据并将它们渲染成图表。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-F4eILNZPHfm9s-_1S9Cx5g.png)

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-aWcF_-SoRaWF9LLZVZp5ew.png)

一对显示NDHS青少年怀孕数据的图表，一个是柱状图，另一个是棒棒糖图。

即使对于设计选择，转向也很容易。意识到我希望图表是棒棒糖图而不是柱状图，因为我觉得它看起来更干净，而且，因为感觉。只需要一条指令，编程智能体就能改变一切。说到这个……

## 4、迭代

你需要不断做出编辑和设计选择。

如果我能把整个电子表格交给编程智能体让它施展魔法，这篇文章会短得多，但事实并非如此。当然，作为记者的训练要求我每次生成地图或图表时都检查它是否准确导入了数据。

但数据集的性质也需要做出影响项目编辑和设计方向的决策。例如，女性避孕偏好的数据包含16个不同的维度。如果我只是把它全部放到仪表板中，那导航体验会很糟糕。所以我决定将那个特定的表格拆分为三个不同的部分：[一个避孕使用页面](https://tordecilla.github.io/ph-ndhs-2025-web/?ref=hubwiz.com#contraception-all-women-2025--tmap--manymethod)（展示使用任何方法、任何现代方法、任何传统方法和未使用者的分类）、[一个现代避孕页面](https://tordecilla.github.io/ph-ndhs-2025-web/?ref=hubwiz.com#modern-contraception-all-women-2025--tmap--manymodernmethod)（细分不同使用的方法）和[一个传统避孕页面](https://tordecilla.github.io/ph-ndhs-2025-web/?ref=hubwiz.com#traditional-contraception-all-women-2025--tmap--manytraditionalmethod)。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-cZqcf36GTBjGEjttJtWtEQ.png)

编程智能体第一次尝试基于NDHS数据渲染华夫饼图。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-OYsx7ckeRfxmIE6EWb5SGw.png)

正确的华夫饼图，显示根据NDHS数据菲律宾女性对现代避孕方法的偏好。

我还需要找出一种优雅的方式来在图表中可视化这些数据——分组棒棒糖图对于一个有这么多维度的数据集根本不合适。我决定尝试使用华夫饼图，它在展示所有这些维度的数据分布方面效果很好，但这需要一些迭代才能让编程智能体完全理解我想要什么。

我对[疫苗接种数据](https://tordecilla.github.io/ph-ndhs-2025-web/?ref=hubwiz.com#vaccinations-12-to-23-vaccination-status-2025)也做了类似的编辑决策，所有这些数据在原始数据集中都集中在一张工作表中，但在仪表板中最终分布在五个不同的页面上。

这些设计和编辑决策也以其他方式影响着编程智能体。例如，当我整张工作表提取时，它直接使用了该工作表的描述。但当我将该工作表拆分为不同页面时，编程智能体会猜测该页面数据的描述。除了需要检查准确性之外，我还需要检查风格和长度，以便不同页面的描述保持一致。

大部分其他工作涉及确保小细节正确工作。大多数情况下，编程智能体准确地导入了数据，但有时会遗漏表格注释之类的内容，我必须发现它们。我必须检查图表在移动端是否渲染良好（起初不行，我不得不多次要求增加尺寸直到满意）、棒棒糖是否画得离坐标轴标签太近、数据标签是否离棒棒糖头太近。我必须要求在每个地图的数据面板中添加全国平均值，完成后再将其放在区域排名列表的上方。

作为一名曾经的主编，过去不得不[领导主要的数据可视化项目](https://www.gmanetwork.com/news/lifestyle/content/873155/gma-news-online-s-eleksyon-2022-wins-sopa-award-for-excellence-in-regional-infographics/story/?ref=hubwiz.com)[（链接二）](https://www.gmanetwork.com/news/eleksyon2022/?ref=hubwiz.com)，这段经历就像与图形设计师和Web开发人员合作，给他们反馈来调整一切。只不过这次，由于我是唯一的人类参与者，没有把同事拖入无休止的修改和修订中精疲力竭的危险。

## 5、架构

氛围可以带你走很远，但你最终需要思考架构。

虽然AI编程智能体确实不会累，但它们仍会以使用限制的形式让你停工。因为我无休止的修改需求，我会很快用完使用量。由于我订阅了Claude Pro和ChatGPT Plus，我想知道一个编程智能体能否接续另一个智能体中断的地方。

事实证明，确实可以。我甚至懒得处理记忆相关的事情——我只是把最新的CLAUDE.md复制到AGENTS.md中（反之亦然），编程智能体就能搞清楚，我可以继续vibe coding。

当然，这一切都很有趣，直到你掀开引擎盖，发现编程智能体把里面搞得一团糟。在我的情况下，我试图调试一个元素时发现更新没有反映在前端的原因：其中一个页面有两个地图渲染器。当智能体更新一个渲染器时，服务器在提供另一个。

这促使我开始更认真地思考项目的架构。我不是从头开始，因为智能体已经做了大量工作。理解了它们做了什么之后，我将所有内容标准化为一个简单的架构：

**展示层。** 我让Codex创建地图、图表（棒棒糖和华夫饼）和数据表的标准空白模板，我应该从一开始就准备这些模板，因为它让我能快速检查数据提取的准确性，并给用户一个更透明的方式来检查数据的来源。后来，我添加了AI生成洞察的另一个部分。每当创建新的数据页面时，编程智能体只需复制模板并根据可用数据进行定制。完成这些后，我让编程智能体按照模板标准化所有页面。

**提取层。** 对于仪表板上的每个页面，编程智能体编写一个脚本从原始电子表格中提取数据并保存到JSON文件中。这意味着如果数据提取中发现错误，编程智能体只需修补提取脚本，重新运行，并更新仪表板上的数据。当我实施这个架构时，大多数但不是所有现有页面已经有了这些。

**数据层。** 每个页面都有一个data.json文件，作为提取和展示之间的交接。它存储该页面的结构化内容（地图值、图表块、表格块、注释和洞察），这样UI可以保持可重用，而数据保持页面特定。在我实施这个之前，少数页面仍然直接在HTML文件中写入数据。

这种结构让编程智能体在几个方面更高效。因为它们主要修补现有的脚本和文件，所以不需要从头生成大量代码，这减少了token使用量。标准模板也让更新更容易实施，因为相同的模式在页面间重复使用。独立的数据层有助于调试，更容易判断问题是在渲染代码中还是在提取的数据中。尽管如此，各页面之间仍然有很多不一致，可能需要在某个时候进行重构，使其更可维护和可扩展。

说到更高效的智能体，我发现使用较旧的模型——在本例中是Codex上的GPT-5.3-codex medium——在使用量方面更经济，同时仍然足够好地将项目带到终点线。我最终在项目的大部分时间里使用Codex，只在剩余部分使用Claude Code来调试一些东西。

## 6、价值

AI生成的洞察可以为数据项目增加很大价值。

我想尝试使用AI从数据中生成洞察。为此，我经历了一个两步流程。我让编程智能体生成一个提示词并保存到提示词库中。然后我在让智能体运行之前审查提示词。输出随后被存储，然后插入到数据页面中。

这有几个原因。我想能够在运行之前手动审查和编辑提示词，并单独检查输出，看看提示词是否有效。有一次，在生成关于青少年怀孕的洞察时，AI宣布了它的重大发现：19岁的人比15岁的人更有可能怀孕。这当然是准确的，但很难说是智能体认为它发现的突破性洞察。提示词需要进一步修改。

先生成提示词供审查还可以防止过拟合，即智能体在指令中已经包含了它对数据的分析，这阻止它找到更有洞察力的模式。它还允许我使用表现良好的提示词作为模板，再次让我节省token使用量。

洞察本身在呈现难以从地图、图表和数据表中获取的信息方面非常有价值。看看AI生成的关于[亲密伴侣暴力](https://tordecilla.github.io/ph-ndhs-2025-web/?ref=hubwiz.com#intimate-partner-violence-2025--tmap--mphysicalorsexualoremotional)的洞察中的这段话："高头条数字的大区在构成上并不相同。卡拉加区将非常高的情感暴力（21.8）与较高的身体暴力（6.8）和性暴力（3.7）结合起来。比科尔区在三个主要组成部分上都很高，包括9.1的身体暴力。中吕宋区20.5的头条数字主要由情感暴力（18.9）驱动，相对于较低的性暴力（2.1）。"

## 7、护栏

事实核查工作流可以帮助审计过程，但需要强有力的护栏。

![None](https://www.hubwiz.com/blog/content/images/2026/05/1-Eu6C0L6D0PEpoi9u1W7aoQ.png)

事实核查子智能体的报告，标记了几个问题，同时显示了支持评分的数据。

当然，每当记者面对任何AI生成的内容时，脑海中第一个问题是：它准确吗？

为了解决这个问题，我在编程智能体中构建了一个事实核查工作流来对照数据检查洞察。起初，事实核查智能体会提取单个主张，验证它们，并建议重写。但孤立地检查主张通常会剥离同一洞察块中已有的上下文，所以重写变得重复。

然后我转向块级事实核查，每个洞察块作为一个整体对照数据进行检查。每个块被评为支持、大部分支持、部分支持或不支持。只有不完全支持的块才需要重写；完全支持的块保持不变。

在实践中，这仍然不够。当运行变长时，智能体倾向于走捷径：它们重复使用熟悉的证据模式，引用附近但错误的值，或者指向看起来正确但不完全匹配源单元格的字段。输出可能听起来很有说服力，但仍然是错误的。

所以我添加了更严格的护栏。每个证据行必须指向一个精确的数据指针和精确值，验证脚本在接受结果之前检查结构有效性和证据质量。失败的输出被拒绝并重新运行。这将过程变成了一个更严格的审计管道，而不是一次性的AI检查。

对于每个洞察页面，事实核查智能体生成了一份评分报告，不仅显示了评分，还显示了它做出判断所依据的数据点。它还给出了"大部分支持"、"部分支持"和"不支持"评级的解释。最终，事实核查工作流检查了273个块，发现258个是支持的，12个大部分支持，2个部分支持，1个不支持。

虽然它仍然不是一个完善的新闻编辑室工具，但这使手动检查过程更容易，因为报告能快速显示哪些主张直接得到数据支持，哪些需要更仔细的阅读，以及哪些需要重写或删除。如果让我重新做一遍，我会在洞察生成后立即运行事实核查器，这样在逐页级别检查会更容易，而不是一次性处理273个大块。

事实核查智能体可以使审计AI生成的写作更可靠，但需要强有力的护栏来确保一切都是结构化的、可重复的，并且可以追溯到源数据。

## 8、先行者

早期测试者立刻看到了实际应用价值。

测试了仪表板的利益相关者立即看到了它对其工作的潜在价值。

Romelei Camiling-Alfonso是一位医生和健康创新专家，她说仪表板将对省级卫生官员、市级卫生官员和"乡村医生"项目的成员很有用，这些是部署到全国各地为服务不足和偏远社区提供初级医疗服务的医生。

Athena Presto是澳大利亚国立大学研究性别和政策的社会学家，她说该项目让调查数据在不看数字的情况下就能立即理解。"我认为一个低感官需求的网站对那些只是快速查看并立即需要信息的人来说也很棒，"她说。

Pumapodcast联合创始人和内容总监Tricia Aquino过去曾报道过NDHS，她对基于仪表板数据和洞察在新闻编辑室之间合作的可能性感到兴奋。"这个项目让查看数据、与之交互和分析它变得容易得多。找到模式和联系也更容易了，"她说。"有大量AI生成的洞察可以作为全国各地报道的起点，我可以想象新闻编辑室跨地区合作，呈现可以影响政策的本地发现。"

## 9、可能性才刚刚开始

一个自然的下一步是构建区域交叉报告，显示每个大区所有NDHS数据的摘要。这对那些不太关注全国模式而更专注于数字对其特定区域意义的政策制定者、记者和倡导者来说特别有用。

另一个可能性是在仪表板上叠加聊天机器人。用户不必通过地图和图表导航来找到答案，而是可以直接问"哪个大区的计划生育未满足需求率最高？"并获得直接基于数据的回答。这方面的基础设施已经存在于数据的结构方式中；主要是在其上构建正确的接口。当然，这也需要一个内置的事实核查层。

仪表板还可以通过添加PSA和其他来源的其他数据集变得更加丰富。NDHS数据本身就很有洞察力，但与贫困发生率、区域GDP或医疗设施获取等其他指标结合时会变得更强大。交叉引用这些可以发现单个数据集无法展示的联系。

也许最令人兴奋的可能性是，整个仪表板——地图、图表、AI生成的洞察、事实核查管道——是由一个人在一周内构建的。

Vibe coding使之成为可能。但正如这个项目也展示的那样，仅凭氛围是不够的。行业现在需要弄清楚如何培训记者和新闻编辑室工作人员实际构建东西，给他们足够的架构和数据理解来达到目标，同时让他们牢牢扎根于编辑判断中。

---

原文链接：[I Vibe-Coded a Complex Data Visualization and Analysis Dashboard. Here's What I Learned.](https://freedium-mirror.cfd/https://medium.com/generative-ai-in-the-newsroom/i-vibe-coded-a-complex-data-visualization-and-analysis-dashboard-heres-what-i-learned-146398657149?ref=hubwiz.com)

汇智网翻译整理，转载请标明出处