Vibe Coding 踩坑实录：我照着 Google I/O 的思路做了个能跑的东西

Vibe coding 上了 Google I/O 的主舞台，朋友圈又开始刷屏了。

但我猜你和我一样——看完演示之后打开编辑器，第一句话不知道怎么写。光标在那里闪，你盯着空白页，脑子里有个模糊的想法，手指却不知道往哪儿按。

这不是你的问题。这是因为大多数"vibe coding 教程"只告诉你结果有多酷，没告诉你中间卡在哪里。

这篇文章是后者。

---

第一章：Google I/O 上那五分钟，让 Vibe Coding 突然「合法」了

Google I/O 2025 上，Google DeepMind 在主舞台演示了一个让很多人重新审视"AI 辅助创作"的工作流。

核心主张不复杂，甚至有点反直觉：你不需要写代码，你只需要描述意图。

演示里，工程师用接近自然语言的方式描述了一个交互效果——"我想要一个随着鼠标移动会呼吸的渐变背景，情绪是平静但有点神秘"——然后 Gemini 直接给出了可运行的前端代码。整个过程没有一行手写代码，但结果是真实可用的。

这个概念本身不新鲜。Andrej Karpathy 在更早之前就提出了"vibe coding"这个词，意思是你只需要描述感觉（vibe），让 AI 处理实现细节。但登上 Google 主舞台意味着什么？意味着它从极客圈的实验性玩法，正式进入主流工具链的讨论范围。

给你一个判断标准：如果你现在用 AI 写代码的方式是"把需求翻译成技术指令再喂给 AI"，那你用的是传统的 AI 辅助编程。如果你能直接用创意语言描述"感觉"，让 AI 自己做技术决策，那才算真正的 vibe coding。

两者的区别不在工具，在你有没有把自己从"技术实现者"切换到"创意定义者"的角色。

---

第二章：我照着这个思路做了什么——项目还原

我决定做一个足够小、足够完整、又足够能暴露问题的东西：

一个「心情配色生成器」 —— 用户输入一个词描述当前心情（比如"焦虑"、"慵懒"、"兴奋"），页面生成对应的渐变配色方案，并配上一句契合情绪的短句。

选这个项目有三个原因：

1. 它需要创意判断：什么颜色代表"焦虑"？这不是技术问题，是审美问题，正好考验 vibe coding 的核心能力。

2. 它足够小：一个 HTML 文件就能跑，不需要复杂的工程配置，排除掉环境问题的干扰。

3. 它有明确的"好坏标准"：结果要么好看，要么不好看，没有模糊地带，方便快速验证。

最终结果是这样的：

初始界面：简洁的输入框 + 一个"感受一下"按钮，背景是中性的浅灰
交互效果：输入"疲惫"后，背景变成低饱和度的蓝紫渐变，短句出现："你不是在偷懒，你只是在充电。"
代码结构：主逻辑分成三个函数：getMoodColor()、getMoodPhrase()、renderResult()，各自独立，可以单独修改

从想法到第一个能跑的版本，我花了大概 40 分钟。但这 40 分钟里，有 30 分钟在踩坑。

---

第三章：全流程拆解——哪一步最卡人

这是这篇文章最重要的部分。我把每一个卡点都还原了，包括我当时的第一反应。

卡点①：创意描述写得太模糊

我最开始发给 AI 的提示词是这样的：

❌ 差提示词：

帮我做一个心情配色生成器，用户输入心情，生成对应的颜色和一句话。

AI 给了我什么？一个标准的表单页面，颜色方案是"红色=热情、蓝色=平静、绿色=自然"的教科书级别答案。没有任何创意感，像是从某个 UI 组件库里直接扒出来的。

我当时的第一反应是：这模型不行。

但后来我意识到：是我的描述不行。 我给的是一个需求清单，不是一个创意意图。

✅ 好提示词：

帮我做一个心情配色生成器。风格参考：Lo-Fi 美学，低饱和度，有颗粒感。

颜色映射不要用常识（不要红色=热情），要反直觉一点：
"焦虑"可以是一种很克制的橄榄绿
"兴奋"可以是接近土黄的暖色，而不是荧光色
"疲惫"可以是蓝紫色，但要偏灰

短句风格：像朋友发给你的消息，不是励志金句。
反例：不要"每一天都是新的开始"这种。

结果完全不同。AI 生成的配色有了真实的审美判断，短句也有了人味。

解法总结：创意描述里要包含三个要素——参考风格、反例排除、情绪限定词。缺一不可。

---

卡点②：上下文断裂

做到第三轮对话的时候，我让 AI 帮我调整"疲惫"的配色，它给了我一个高饱和度的橙红色。

完全忘了我在第一轮里说过"低饱和度、Lo-Fi 美学"。

这是多轮对话里最常见的问题：AI 不是真的在"记住"你的风格，它只是在处理当前窗口里的文本。 当对话变长，早期的设定就会被稀释。

解法：用一段固定的"风格宪法"开头，每次新对话都粘贴进去：

【项目风格设定 - 每次对话请保持】
整体美学：Lo-Fi，低饱和度，有颗粒感
颜色逻辑：反常识映射，避免高饱和原色
文案风格：朋友语气，不励志，不说教
技术要求：纯 HTML+CSS+JS，不引入外部库

把这段话固定在每次对话的开头，相当于给 AI 设置了一个"记忆锚点"。上下文断裂的问题基本消失了。

---

卡点③：代码能跑但不能改

第一版跑通之后，我想微调一下短句的字体大小。

我打开 AI 生成的代码，发现它把所有逻辑塞在一个 500 行的