VibeCoding案例分享

做数据这行久了，你会发现一个尴尬的事实：数据量越大，决策反而越慢。不是缺数据，而是缺一种"一眼看到底"的能力。最近用 VibeCoding 的方式做了一个中国地市人口流动及空铁交通看板，从立项到交付不到一周，AI是真好用。

这个看板的核心目标很朴素：把全国三百多个地市之间的人口流动、航班运力、高铁班次揉在一起，让人能在地图上直观地"看"数据。用户选择一个城市，选择出发还是到达，调几个滑块，就能看到围绕这个城市的所有出行数据——哪个方向人多、哪条航线最贵、哪段高铁最慢，一目了然。后端压在 ClickHouse 上，设计了三张原始明细表——人口表、航班表、高铁表——加上一张逻辑视图，用 greatCircleDistance 实时算城市间距离，用月份自动映射航季，把人口、距离、等核心展示数据全部打平到一张宽表里。这个视图是整个系统的数据底座，所有查询都从它出，保证口径统一。

技术选型上，因为需求急，且内网访问量不算大，选型尽量用成熟快捷的实现方法。后端用 Flask 搭 API，Gunicorn + Gevent 扛并发，不引入 ORM 层，直接裸写 SQL 怼 ClickHouse，CH性能拉满。前端纯 HTML + CSS + JS，不搞框架，高德地图 JSAPI 2.0 做地图渲染，noUiSlider 做双滑块交互。整个项目三个文件——一个 HTML 页面、一个 CSS 样式表、一个 JS 脚本，外加一个 Flask 应用文件，结构干净还方便拓展。再用 Flask-Caching 做了两层缓存：基础接口 6000 秒缓存，核心地图查询的复杂业务函数用 cache.memoize 做了 300 秒的细粒度缓存，保证响应速度同时避免重复计算。

交互设计上花了些心思。根div使用@media做了响应式布局，适配电脑、手机等不同设备下的排版。八个筛选条件全部放在顶栏一行，flex 布局自适应换行，每个控件高度对齐，视觉上干净利落。地图上的城市点按人数着色，从浅黄渐变到深绿，鼠标悬停弹出信息卡，显示距离、人次、高铁和飞机的耗时区间。最有意思的是联动逻辑：点击地图上的一个城市点，它会放大 1.5 倍并加粗边框，同时右侧三个明细表格——人口、航班、高铁——自动刷新为该城市的明细数据。这个"地图点选驱动表格"的交互链条，让数据分析不再是看着表格发呆，而是像逛地图一样自然。还做了一个细节：往来城市的筛选区分"用户手动选"和"全选"两种模式，全选时不给后端传过滤条件以获取全量数据，手动选后才传参，可以避免了一次无意义的重复全量查询，这个小优化在数据量大时效果明显。

看板上也添加 AI 分析功能，先用Dify搭建了一个数据分析chatflow，通过API暴露给前端。用户在页面右侧打开一个侧边弹窗，用自然语言问问题——"南昌到深圳的航班客座率趋势怎么样？""哪些城市对的人口流动增长最快？""对比一下夏秋和冬春两个航季的高铁票价变化"——Agent 背后对接DeepSeek，结合nlp2sql能力，先生成sql，再检索数据，最后生成分析结论和建议。通过内部编排，实现不同节点能力的串联，RAG+Prompt+Function Calling让LLM生成的内容有充分的业务知识支撑，用户不需要知道底层 ClickHouse 的表结构和字段含义，只需要用业务语言提问就行。这个设计把"人找数据"变成了"数据找人"，让看板从被动展示升级为主动分析。

总结来说，这个项目让我对 VibeCoding 有了更深的理解。Vibe的方式不是"偷懒不写代码"，而是把精力花在真正创造价值的地方——数据模型设计、交互逻辑、风格样式、缓存策略——而不是纠结于框架选型和代码粘贴复制。一周时间，从零到交付，核心靠的是对业务场景的深入理解和对技术栈的精准把控。AI 不是替代开发者，而是让开发者能把更多时间花在思考"系统应该是什么样"这件事上。当 AI 帮你写代码的时候，你才有余力去想：用户真正需要的是什么？这个看板还可以怎么变得更好？这才是 VibeCoding 的本质。