禅意地图：拥抱 Vibe Coding 工作流

前言

Vibe Coding 的概念从兴起开始应该已经火了有一年了吧，作为一个右侧交易者我没有立刻选择尝鲜。不过最近感觉时机已经成熟，且市面上也有了一些可用的免费API服务，于是就也来跟风体验下。体感做技术的人对于新技术总是有一种很难摆脱的焦虑感，好像当其他人嘴里说出了自己没听过的名词时就会担心自己是不是落伍了。虽然我已经尽力让自己客观看待流行风向，但是好玩的东西变得可玩时，总还是会觉得手痒痒的 🤓

这篇博文记录了我用 Vibe Coding 开发小玩具 禅意地图 (ZenMap) 的流程，这不是我用 Vibe Coding 写的第一个 App，但是之前的太个人化了，而 Vibe Coding 又实在有趣，不得不触动我也来水一篇

免费羊毛狠狠薅

在故事开始前，先介绍一下我薅羊毛的整体配置：Claude Code + OpenRouter + Pony Alpha。Claude Code 是比较出名的 Coding Assistant，此外还有 CodeX，Copliot，Cursor 啥的 … Claude Code 也算是其中很典型且产品化很不错的 Code Agent 代表，我这里用的是 CLI 版本

因为 Claude Code 本身是接 Anthropic 自家的 Claude 模型，使用时默认需要登录账户，有点不太方便。所以我是替换了环境变量来走其他的 API 中介（中介网站选择了 OpenRouter），进而使用其他底座模型（我选了 Pony Alpha，目前免费‼️）。所以这一套下来就是没花钱，没、花、钱！而且速度不慢，而且模型不笨，还要啥自行车

💡 我又有一个 idea

中午我在天台晒太阳的时候，正琢磨着下一个 App 写点啥呢？我环顾四周看到了后面的茶山，想起我有一个午后曾经在天台隐约听到来自灵顺寺的钟声，我恰好是一个很喜欢到处打卡寺庙道观的生物，时不时要在小红书、高德地图、大众点评搜索我还没去过的地儿，我还手工维护了一个 notion list 来记录我的打卡进展。要不然就做一个寺庙打卡App吧，有地图的那种，还能自动记录进度！

那就让 LLM 🤖 来实现它吧

说干就干，今时不同往日啊，我已经有了赛博 co-worker，写个 Web App 还不是手拿把掐。虽然这个 App 看上去比之前写得稍微复杂一些，但是我相信 LLM 还是可以做到的

不那么丝滑但还可以接受的开发体验

由于已经有过 Vibe Coding 的初步经验，这次上手就比较顺畅了，我还是按照比较传统的需求分解、技术栈确认、开发&迭代、部署上线的流程来进行

先沟通一下需求

我先把自己的想法细化了一下告诉 Claude Code（以下简称CC），然后询问了它对技术栈、对功能的建议。达成一致后，在它的建议下我们一起完善了 CLAUDE.md 和 必要的数据文件，这里我也手动从其他 App 检索了更多寺庙信息补充到 CC 已经初始化好的数据文件中。为了省事儿，它能做的数据转换我就都外包了（比如经纬度、备注信息 etc.），我只给出最小必要信息。对于技术栈的选型，我基本选择了它的推荐配置。但是在地图的绘制方法上我没有首选它推荐的 leaflet 而选了 SVG，因为它说 SVG 更简约（我属于是过于追求简约把自己带坑里了😅）

SVG 效果不行，换！

在多次尝试用 SVG 绘制地图之后，我发现怎么都达不到我想要的效果。主要的问题是它用 SVG 来绘制区域边界，边界和边界之间的衔接就很不丝滑，比如 区 是一块一块绘制的。还有一个问题是在经纬度坐标和区域之间的对应也因此变得非常麻烦。从下图可以看出，CC 直接输出的可视化效果是很离谱的…

在多次讨论和反复尝试之后，我询问是不是该换下绘制地图的技术栈了，CC 表示确实如此，我们还是切回 leaflet 的方案

“我们在等服务器启动吗？” “不，是我把代码改坏了”

在多次迭代和 debug 的过程中也出现了一些让人哭笑不得的局面，比如因为迭代太多轮，CC 提示我 context 超长需要 /compact 或者 /clear；而且迭代过程中还出现了新 bug，甚至原来已经 ready 的部分也开始不对起来…不过好在 CC 自己 debug 都能修好，就是要多等等，总不至于还得我自己去 debug。实话说真让我 debug 我也 de 不了，因为这个技术栈我不熟。曾经一度 CC 卡住了，我多嘴问了它一句我们是不是在等服务器启动，它说不是，是它把代码改坏了🤣（对话见下图）

至此，Vibe Coding 的抽卡本质已经暴露无疑…

帮我提交

改吧改吧总之最后还是做完了，而且效果出人意料还不错。虽然很简陋且仍然存在一些问题，不过我一开始预想中的功能都还是实现了的，动画也比较自然。反正让我自己来写肯定没法这么快搞定（哦，从需求设计至此大约 90min，共计消费 Tokens 数 14.1M，消费金额 0 元）

开发完了我想着就部署一下呗，更 AI-Native 的做法肯定是让 CC 直接帮我部署了。不过现在 Web Agent 好像还没那么成熟，我还是自己手动在 Github 上创建了一下仓库，然后把本地 build 和 push 代码的环节都交给 CC 了。它完成得很好 👍 我再手动在网页上配置一下 Github Page 就可以直接访问了

仍然存在一些问题

虽然东西是做出来了，但是也确实还有一些问题（我不保证自己还会再迭代 V2/V3 … 兴趣来了再说吧）

• 地图坐标还是不太准确，可能因为调用的是开源地图服务…只能说比 SVG 稍强吧
• 地图也不够美观，我一开始想要的是像素风，但是怎么都搞不出来😂
• 地图上的小图标…它的设计能力也还需要加强
• …

成品：⛩️ 禅意地图

按照惯例还是介绍一下这个简陋的小 App 的功能：

• 首先是大的布局上：左边是随机景点+景点的分类列表，右边是一个完整的地图。地图上方有一个小进度条记录已经打卡的景点数量。进度条最右边有一个 重置 选项，可以一键清空打卡进度。
• 点击左边的随机景点，可以自动定位到地图上的位置
• 点击分类列表里中的景点，也会自动定位到地图上
• 点击地图上的景点，可以进行打卡操作，打卡时会显示 功德+1

差不多就这些功能，比较简单，也还可以扩展。比如加上景点介绍、把 UI 设计得更好看一点，还有…把经纬度坐标和地图对准🤣

Meta-Instruction: 期待下一个 ZenMap ~

除了这个 App 本身，我在仓库的 docs/CLAUDE.md 里让 CC 写了一个 Meta-Instruction 来指导其他的 LLM 写类似的、其他城市的 ZenMap。不过我自己还没试过，姑且当它能用！

一点碎碎念

这一套玩下来我自己感触还是很多的，可能要从不同的角度来分别讨论一下

开发者

首先是从开发者的角度，我觉得 AI Coding 真的是个人开发者的福音。我的博客大概是从 2020 年开始写的，当时刚起步的我还在摸索数据库和前端的联动 ，之后是一些更现代的前端框架、服务器运维 什么的。维护自己的网站和网站上的服务其实是相当麻烦的一件事情，需要了解各种东西比如 Linux 使用、Web 服务器配置、反向代理、https 认证、数据库配置、域名解析…这些都还不涉及实际写的 App 的逻辑，或者说业务逻辑？感觉我还配不上这么高大上的词 😂

总之这个过程中尽管也有更现代的各种云服务了，但是你还是得找个小本本把你要用的命令、SOP 都记清楚，要不然下次换服务器或者遇到什么问题又得熬夜 debug+踩坑。当谈到具体开发一个 App 的时候呢，又要去学习新的技术文档、语法和各种 demo（顺便继续踩坑），还不一定能做出好看的、想要的效果。LLM 的出现首先就是节省了自己去查小本本的环节，当我只想做一个简单的 App 的时候也不用再去吭哧吭哧学一大堆别人定义的语法了。就比如在做禅意地图的时候，我们的技术选型是涉及 React 的（应该吧反正 CC 是这样说的🤣），React 是我一直很想去了解但是一直没有去看的框架，估计以后也不用看了

对于个人开发者而言，LLM 作为 Coding Assistant 无疑是更有趣且有用的，大家的双手和心智带宽终于可以从无尽且繁琐的 Linux / Vim 命令、各种技术文档中解放出来，投入更好玩的创造中了

LLM 研究

其次是从 LLM 研究的角度，碰巧我曾经也做过一段 Code LLM 的研究。当时做的时候，LLM 的 Coding 能力还没有今天这么厉害，虽然当时 Claude 就已经是第一梯队了。考虑到 LLM 能力的进化速度也是突飞猛进，所以也很难预计我今天在 Vibe Coding 中遇到的问题 10 个月后是否还会存在（尤其再考虑到我薅的是免费羊毛，也许换 Opus 4.6 来这些问题都不是问题）。我有的时候也会想，我做的到底是过去的研究还是未来的研究，闭源模型也许已经在 next-level 了，但这倒不会降低做开源模型这件事本身的意义，至少从讲故事的角度…只是偶尔会有点怅然若失吧。考虑到这里只是博客不是论文，也就不再展开了。也许我很快会让 AI 来接手我自己的代码库 XP

普通人

最后呢，我想抛开开发者、抛开做过 Research 这些角色，从更本质的身份，一个普通人的角度来谈谈 AI Coding。最近一段时间，我越来越多地在餐厅、在咖啡馆、在奶茶店听到周围的人谈论 AI，尤其是 AI 对就业的冲击。我相信，根据一些报道，这个冲击正在且将会更大规模的爆发，从我自己 Vibe Coding 的体验看，我觉得某些工作确实已经不再需要那么多人了。

我对于工作这件事情的看法受《工作、消费主义和新穷人》这本书的影响比较大，我觉得很多现代工种因为种种历史原因其实就是把人变成工具人，而 LLM 的工具属性就是在替代这种“工具性”。所以被替代，是必然的。当人抛开工具属性之后，我们还剩下什么呢？我喜欢观察其他和我一样的普通人，我看到街上孩子们追逐打闹，看到情侣手挽手在夕阳下回家去，看到年迈的老人拄着拐杖走上公交车，这一切在我眼里就是一曲关于生命的宏大的交响曲。我们生而为人的本质大约不是也不可能是为了成为工具人的，作为生命，我们本身就是奇迹。LLM 的出现也许是为了让我们有进一步追逐生命本质的自由，但愿如此 🙏