我有一个博客，它焕然一新了～

Vibe Coding 新博客首页截图

这篇文章讲的是：我如何用 Vibe Coding 和 AI Agent，把一个 2019 年的 Vuepress 个人博客，迁移成新的 Astro 6 静态博客。

blog.kelegele.com，2019 年搭建的，用的 Vuepress。当时折腾了一个多星期，从选主题、调配色、改布局到部署上线，每一步都亲力亲为。那个博客陪我走过了大学和刚工作的日子，虽然更新频率堪忧，但它一直在那。

直到最近，我实在受不了了。

不是内容的问题，是技术栈的问题。Vuepress 越来越重，改个样式要翻半天主题源码，每次 npm run build 都像在抽签。我想给它换个大 makeover——新的框架、新的设计、新的体验。

但你也知道，这种”重做一遍”的事情，对个人项目来说意味着什么。大概率是：周末兴冲冲开工，周三就烂尾了 😅。

事情发生了变化

这次不一样。我把整个博客从零重建，连设计带开发，一晚上搞定了。

不是我变强了，是我多了一个搭档——AI Agent。

说实话一开始我也没抱太大期望。以前也试过让 AI 写代码，那种感觉就像让一个没看过需求文档的实习生直接上手，写出来的东西能跑但完全不是你想要的。

但这次不一样。

我先花了一段时间写了一份设计文档 DESIGN.md。不是给设计师看的，是给 AI 看的。我把 Vercel Blog 的设计风格拆解成了一整套规范——颜色系统、排版比例、圆角大小、阴影层次、组件结构，全部量化成具体的数值和规则。

然后我对 AI 说：

按 Astro 6 搭一个博客，设计规范全部在 DESIGN.md 里，首页参考 Vercel Blog 的文章列表布局，导航栏移动端要折叠，暗色主题也要支持。

它就开始干活了。

一个导航组件，带着 scoped styles、设计变量引用、暗色主题适配、移动端响应式，一气呵成。我看了看代码，挑了几个细节让它改——间距不对、圆角大小差了一点、hover 状态缺了过渡动画。改完，接近我想要的了。

这种感觉怎么说呢……像是一个手脚很快但品味一般的新人，你只要把方向给对了，执行速度是真的快。

一晚上的节奏

那晚上的工作节奏大概是这样的：

先搭项目骨架，选了 Astro 6——零 JS 框架，纯静态，构建速度飞快。这个选择我本来就需要做，AI Agent 只是在我确认之后帮我执行了。

然后是导航栏。我对它说了我想要的效果，参考 Vercel Blog 的设计，它给我生成了完整组件。我调整了两轮。

接着是首页、文章列表、文章详情页、暗色主题切换、Footer……每个组件都是类似的循环：我说需求，它出代码，我审查，它修改。快的几轮就过了，慢的大概来回五六次。

最让我意外的是 CSS。以前我写 CSS 最痛苦的就是调细节——padding 差个 4px、flexbox 对不齐、Safari 上多出个间距……这些琐碎的东西以前要花我大半天。现在这些 AI Coding 处理得还不错，当然也有翻车的时候，但比起自己一行行写，效率还是高太多了。

旧文章迁移也很快。两篇文章，复制过来调整一下 frontmatter 格式就好了。

到凌晨两点多，整个博客能看了。我打开预览，浏览了一遍各个页面，灯关了，满意地睡了 😌。

不是万能的

但也有翻车的时候。

有一次我让它做文章详情页的排版，它把标题和正文的间距搞成了 64px——我文档里明明写的是 24px。还有一次暗色主题切换的过渡效果，它写了一堆不必要的动画，闪烁得像故障艺术。

最有趣的是”感觉”这个事情。有次我说”这个区域太重了，轻一点”，它把所有颜色都改成了浅灰色……不是，我不是这个意思 😂。

所以你看，它还是需要你给的指令足够具体、足够精确。模糊的审美判断，它理解不了。你得把它翻译成数字和规则——这就是那份 DESIGN.md 的价值。

想到以前

想到 2019 年搭旧博客的时候，Vuepress 的主题我翻来覆去改了一个多星期。配色调了无数版，CSS 写了又删、删了又写，部署的时候还踩了一堆 Vercel 的坑。

这次用 Vibe Coding 重建，一个晚上。

工具变了，效率变了，但那件事没变——我就是想让我的博客好看一点，让写东西的体验舒服一点。这个想法 2019 年有，2026 年也有。

以前折腾 Minecraft 服务器 nOWorld 也是这样，花了大量时间在配置和调优上，但核心动力就是想创造一个属于自己的空间。

AI 把重复性的、机械的执行加速了，但”想要什么”这件事，还是得你自己来。

工具在进化，创造的渴望不变 ✌️