记一次 vibe coding 体验

最近维护博客网站的时候遇到了两个挺棘手的问题。

一个是数学公式渲染。之前的方案是在构建时用 KaTeX 编译所有公式，导致 build 过程内存占用极大，而 GitHub CI/CD 的构建内存有限。这个问题困扰了我很久，单纯加大内存治标不治本——博客内容只会越来越多，公式也只会越来越多。

另一个是布局问题。我希望无论左右有没有导航栏或侧边栏，正文都能保持一致的居中显示。这需要深入理解主题的 CSS 布局逻辑，甚至要去 node_modules 里翻源码。之前用 Cursor 或 Antigravity 试过，效果都不太理想，一方面模型能力有限，另一方面这类问题需要精准定位第三方库源码，普通 Agent 很难做到。

感谢在阿里的实习机会，每月有 500 次 Claude 4.6 Opus 额度（还有 1000 次 Sonnet），而且 Agent 的搜索能力很强大——代码库检索也好，网页搜索也好，都能精准定位。

1. 解决过程

第一个问题，我只是向 Agent 描述了一下，它就给出了完整方案。先是加了 10G swap 空间，还建议从 Vite 换成 Webpack，号称 Webpack 有内存分块管理能降低占用。同时把 KaTeX 输出格式从「html+mathml」改成了「html」。

结果实测发现 Webpack 构建太慢了，慢到本地 npm run dev 都能卡住。我跟 Agent 说这不行。它立刻换回 Vite，改成客户端构建——数学公式渲染不再发生在构建阶段，而是交给用户浏览器来完成。

方案确定后，代码几乎一分钟就写好了，没有任何错误，顺手把 CI 内存限制改回了 2G。推送后构建几乎无感，几分钟就部署完成。整个过程我只多沟通了一次，效果出奇地好。

第二个问题耗时稍长，可能也是我对 CSS 不太熟。Agent 第一版让整个页面挤成一坨。调了几轮后它给了个方案：把左右侧栏 fixed 住，独立在页面外，再限制页面大小实现居中。

这能凑合用，但侧栏显得很僵硬。既然有这么强的模型，我觉得没必要将就，又 battle 了一阵。我强调：不能 fix 侧栏，但要保证页面大小固定。

没想到 Agent 真的通读了整个代码库，完全理解了布局逻辑，想了个很巧妙的方案——用负 margin 让侧栏不占 page-container 的 flex 空间。这样侧栏视觉上正常，但 flex 布局计算时宽度为 0，主内容区域自然居中。微调之后就是现在的版本。

2. 一点感想

这两个问题都挺棘手的，解决方案也不常规。虽然第一版都没达到预期，但只要清晰表达诉求，Agent 几乎能立刻给出最佳方案并完美实现。它的表现已经超过了很多程序员了。

最近刷到一句话：「只要能标准化验证的任务，AI 都能替代」。确实有道理。只要有明确的验证标准和奖励机制，就能用 RL 训练模型完成任务。至少 coding 领域，模型已经很强了，难怪会引发焦虑。

我慢慢理解为什么 Paper 那么重要了。好的产品或程序，AI 来执行已经不难，但好的 idea 仍然稀缺，需要人有好的 taste 和感知力。可惜我更感兴趣的是 coding 本身，或许业务导向的工作真的会被替代。

不过最好笑的是，这篇博客我也用了 AI 润色🤣。So talk is cheap, show me your vibe coding。