Vibe Coding：成年人的乐高，属于创造者的心流时刻

如果说这一年有什么让我从头皮发麻到拍案叫绝的时刻，那绝对是 Claude Code 第一次帮我跑通代码的那一瞬间。

那种感觉，就像是你一直手里攥着一把散落的拼图碎片，怎么也拼不上，突然有人轻轻一推，所有碎片 咔嚓 一声，严丝合缝地扣在了一起，眼前瞬间展开了一幅完整的画卷。

这就是 Vibe Coding。对于我们这种非科班出身、但满脑子想法的人来说，它不只是一个新工具，它是那张通往“创造者世界”的门票。

乐高积木 vs. 泥巴糊墙

为了验证这种“魔法”，我拿自己的博客主题做了场大实验。

最开始，我用 11ty 框架写第一版主题。说是“写”，其实更像是“糊”。

那时候我不懂怎么跟 AI 沟通，像个只会喊“这里坏了！马上给我修好！”的甲方。结果 AI 也就真成了只会到处打补丁的乙方。

那两周简直是噩梦。代码像是一座用泥巴糊起来的房子，今天修好这里的窗户，明天那边的墙角又塌了。我看着那一堆乱七八糟的 if-else 和硬编码的样式，甚至都不敢大声呼吸，生怕哪一个细小的修改成为压垮这座房子的稻草。

但这次，换了 Astro 5.0，配合最新的 Antigravity（集成了 Gemini 和 Claude），我决定换个活法。

三天，仅仅三天时间，一座崭新的城堡拔地而起。

这不是因为我代码水平突飞猛进，而是因为我学会了Vibe Coding 的真正奥义：你不是在写代码，你是在设计“意图”。

👇 下面的这两张图，左侧的是 11ty 架构的网站首页截图，右侧是 astro 新架构的网站首页截图

在这个过程中，我发现了一种前所未有的心流体验。我不必再因为一个 Flex 布局是不是要加 justify-content 而中断思路去查文档，我可以把全部的精力都放在“我想要什么感觉”上。

• “这里的卡片阴影太硬了，我要那种类似 Apple 官网的漫反射光感。”
• “文章列表不要直接跳出来，给一个 0.2 秒的交错上浮动画。”

这种指哪打哪的快感，真的会让人上瘾。Astro 的模块化设计就像是精密的乐高积木，每一块都标准、优雅、可复用。看着那些功能模块在屏幕上一个个被点亮，我久违地感受到了小时候搭积木既然完成时的那种纯粹的欣喜。

从“修修补补”到“指挥若定”：我的 Prompt 进化史

这三天里，变化最大的其实不是工具，而是我跟 AI 说话的方式。

回看我最早的聊天记录，简直惨不忍睹：

“帮我把这个标题居中。”
“那个颜色不对，换一个。”
“报错了，你看看咋回事。”

这简直就是在浪费 AI 的智商。Vibe Coding 玩久了，我慢慢摸索出了一套跟 AI “降维共振”的方法。我现在是怎么提需求的？

1. 赋予身份，拉齐认知

“你现在是一位拥有 10 年经验的资深前端架构师，擅长使用 Astro 5.0 和 TailwindCSS 构建高性能、极简主义风格的网站。请你不仅要关注功能实现，更要关注代码的可维护性和最佳实践（Best Practice）。”

2. 给足背景，让它懂“为什么”

不要上来就扔代码。我会先把我的整个文件结构发给它，甚至把我想要的最终效果截图丢进去：

“这是我目前的目录结构，我希望在一个新的 Timeline 组件中实现一个时间轴效果，参考图如下。”

3. 邀请它思考，而不是只做执行

这招最管用。以前我只让它写代码，现在我会把决策权分给它一半：

“我想实现这个功能，目前想到了方案 A 和方案 B，你觉得哪种在性能上更优？或者你有更好的方案 C 吗？请先调研一下，列出优缺点告诉我。”

4. 善用“黑话”

用 AI 听得懂的专业词汇，能极大提高命中率。

• 不要说“好看一点”，要说 “Elegant（优雅）”、“Minimalist（极简）”。
• 不要说“快一点”，要说 “Performant（高性能）”、“Lazy Loading（懒加载）”。
• 不要说“别写这就是一坨”，要说 “Modular（模块化）”、“Clean Code（整洁代码）”。

当我学会这样沟通后，AI 给出的代码质量简直是指数级上升。它不再是那个只会改 bug 的实习生，而是成了真正能跟我背靠背作战的技术合伙人。

尾声：未来的样子

看着眼前这个运行如丝般顺滑、代码结构清晰得像教科书一样的新主题，我突然意识到，我们可能正站在一个时代的门槛上。

在这个时代，想象力是唯一的限制，技术不再是那道难以逾越的高墙。

无论你是想做一个像我这样的博客，还是一个帮助自己管理生活的小工具，Vibe Coding 都把那把“钥匙”交到了你手里。

你也想试试吗？那种亲手把脑海中的城堡搬进现实的感觉，真的，太棒了。