一次＂Vibe Coding＂的旅行攻略可视化

01  一场深夜对话

昨晚跟AI聊了几个回合。

目的地、天数、节奏、偏好——来回拉扯了几轮之后，一份还算完整的旅游攻略出炉了（但后来证明里面有很多细节错误）。每天去哪儿、吃什么、交通怎么衔接，条条列列，信息量不小。

但盯着满屏的文字，总觉得差点什么。

不直观。

我要在脑子里把每个地点"投影"到真实地图上，来回切换页面查位置、算距离、脑补路线。五六天的行程堆在一起，认知负荷直接拉满。

一个一个去查？太费劲了。

于是我做了一个决定：不查了，直接写个工具。

02  Vibe Coding了个啥

如果你还没听过这个词，简单解释一下：

Vibe Coding，指用自然语言跟AI对话式地写代码，边聊边生成、边调边改，不追求完美工程架构，主打一个"想法到产物"的高速通路。

换句话说，不是正襟危坐地写工程文档、搭项目结构，而是——

🎙️ 我对AI说的：

"我想做个html，既能看到全程，又能让我的行程在地图上按顺序标出来，点了能看详情"

AI说：好，给你生成一个文件。

我打开浏览器，看了一眼。

"颜色太丑了，换一套。"

"标注点增加数字顺序、时间点、补充上交通方式。"

"加个一键导出图片的按钮。"

几轮对话下来，一个可用的旅行地图可视化页面就立在屏幕上了。

PC端的html调好了以后，又顺手做了个手机端，发到微信里，可以随时点开看~~

这中间有个小插曲，因为是调用了高德地图，所以需要申请一个key

申请地址：https://lbs.amap.com/

申请完毕后让AI帮你写在Html里即可

03  有啥用呢

这个页面做的事情其实很简单，但正好解决了我最痛的点。

第一，地图标记。

每一天的行程地点，按顺序在地图上用数字序号标出来。点开每个标记，能看到：

• 地点名称
• 交通方式（比如"地铁""打车约15分钟"）
• 小建议（比如"记得预约""周二闭馆"）

不用再在笔记和地图App之间反复横跳。

第二，按天分组。

今天去的地方用一种颜色，明天换一种。地图上一眼就能看出每天的活跃区域在哪，行程密度是否合理。

第三，随时调整。

发现某天路线绕了？在地图上一看就明白。直接改数据，刷新页面，新的路线图立刻生效。不用重新画线、不用重新截图、不用重新做PPT。

第四，一键导出。

行程确定后，点个按钮就能把这份带地图的攻略导出成图片或链接，发给同行伙伴，或者存进备忘录。

04  为什么这件事让我挺开心

说实话，这个页面并不复杂，任何一个熟练的前端开发者花点时间都能写出来。

但让我开心的不是技术难度，而是从"发现问题"到"解决问题"之间那条路变短了。

以前遇到这种"不直观、查起来费劲"的痒点，我的路径通常是：

纠结一下 → 忍一忍 → 手动查 → 凑合用 

而这次，我几乎是"念头刚冒出来，就已经在动手指挥AI了"。

这种感觉很奇妙：

不是因为有技术所以能做，而是因为想做，技术在旁边随时等着帮你。

工具最好的形态，不是功能最多，而是刚好能接住你当下的那个念头。

附：导出的我的特种兵攻略（非最终版，乐呵一下）

— END —

如果这篇文章让你想起了自己某个"忍了又忍"的痒点，欢迎留言告诉我 👇