Appearance
改变你的习惯：如何以正确的姿势用 AI 来编程
为什么需要"改变习惯"？
很多人第一次用 AI 编程工具时，都会犯一个错误——把 AI 当成搜索引擎。
他们会问："怎么用 JavaScript 写一个按钮？" 然后把 AI 返回的代码片段复制粘贴到项目里。
这不是 Vibe Coding。这只是"用 AI 来搜代码"。
真正的 Vibe Coding 是一种全新的工作方式，它要求你从根本上改变"做事情"的思路。
思维转变：从码农到指挥官
🚫 旧思维（码农模式）
text
我要做一个登录页面
→ 我需要学 HTML 写结构
→ 我需要学 CSS 写样式
→ 我需要学 JavaScript 写交互
→ 我需要了解 API 调用
→ 花几天时间终于做出来了✅ 新思维（指挥官模式）
text
我要做一个登录页面
→ 我告诉 AI：帮我做一个现代风格的登录页面，
要有用户名和密码输入框，登录按钮，
还要有"忘记密码"和"注册"的链接
→ AI 生成完整代码
→ 我看看效果，提出修改意见
→ 几分钟搞定区别在哪？你不再需要关心"怎么做"，只需要关心"做什么"和"好不好"。
正确的 Vibe Coding 工作流
第一步：明确你要什么
在开口之前，先想清楚：
- 我要做的东西是什么？（一个网页？一个工具？）
- 它应该长什么样？（简洁风？科技风？可爱风？）
- 它需要哪些功能？（越具体越好）
- 谁会用它？（自己用？给别人看？）
💡 技巧：把你的想法写下来，哪怕只是几个要点。有文字比脑子里想要靠谱得多。
第二步：用自然语言描述需求
不需要用任何专业术语。就像你在跟一个非常能干的助手对话：
❌ 不好的描述：
"做个网站"
✅ 好的描述：
"帮我做一个个人简历网页。页面上方是我的名字和头像，下面分成几个区域：关于我、工作经历、技能、联系方式。整体风格简洁现代，用深色背景配亮色文字。页面需要适配手机。"
如果你想把这个示例真正做出来，可以直接跟着极速上手：用 AI 开发一个个人简历页面做一遍。
看出区别了吗？好的描述包含：
- 具体的内容（有什么元素）
- 明确的结构（怎么排列）
- 风格偏好（什么感觉）
- 额外要求（响应式等）
第三步：查看结果并反馈
AI 生成代码后，你需要做的是看效果，而不是看代码：
- 在浏览器里打开，看看长什么样
- 点点各个按钮，试试交互
- 对照你的需求，看看哪里不对
第四步：迭代优化
不满意的地方，直接告诉 AI：
"标题太大了，缩小一点" "联系方式那块加一个微信二维码的位置" "整体颜色换成蓝色系" "手机上看的时候文字有点挤，间距大一些"
这就是 Vibe Coding 的核心循环：描述 → 查看 → 反馈 → 迭代。
常见误区与避坑指南
误区一：一次性提出所有需求
错误做法：写一大段需求，把所有功能都塞进去。
正确做法：先做核心功能，确认没问题后再逐步添加。
记住 MVP 思维！先让东西跑起来，再慢慢加功能。
误区二：对 AI 的输出完全不质疑
AI 很强，但它不是完美的。它可能会：
- 生成有 bug 的代码
- 理解错你的意思
- 用了过时的方法
- 在某些边界情况下出错
正确做法：始终测试AI 的输出。用浏览器打开看看，多点几下，试试各种情况。
误区三：不告诉 AI 上下文
AI 不知道你之前做了什么、你的项目是什么样的。
正确做法：
- 每次对话时说清楚背景
- 告诉 AI 你在用什么技术
- 说明当前的项目状态
误区四：遇到问题就放弃
AI 生成的代码出了 bug？太正常了。
正确做法：
- 把错误信息复制给 AI
- 描述你期望的行为是什么
- 描述实际的行为是什么
- 让 AI 修复
这个过程就是“调试”。在 Vibe Coding 中，调试 = 把错误信息丢给 AI。
误区五：提示词太模糊
❌ "做好看点" → AI 不知道你觉得什么好看 ✅ "用类似苹果官网的风格，大量留白，无衬线字体，黑白配色为主" → 明确具体
实操演示：好描述 vs 坏描述
场景：做一个待办事项应用
❌ 坏描述：
"帮我做个 todo list"
✅ 好描述：
"帮我做一个待办事项网页应用。功能包括：
- 顶部有一个输入框和添加按钮，可以添加新任务
- 下方显示任务列表，每个任务前面有复选框
- 点击复选框可以标记任务完成（显示删除线效果）
- 每个任务右边有删除按钮
- 底部显示剩余未完成任务数量
- 使用本地存储，刷新页面数据不丢失
风格要求：圆角卡片，浅色背景，整体简洁。"
小结
| 关键点 | 说明 |
|---|---|
| 思维转变 | 从写代码到描述需求 |
| 工作流 | 描述 → 查看 → 反馈 → 迭代 |
| MVP 思维 | 先跑起来，再加功能 |
| 好描述 | 具体、有结构、有风格偏好 |
| 调试方式 | 把错误信息丢给 AI |