第 01 课：Vibecoding 入门
踏上构建生产级应用的旅程。
Vibecoding 是一种构建软件的方式：你用自然语言描述你想要什么，让 AI 智能体替你写代码。你不需要编写代码，也不需要阅读代码。你只需要描述你想要的东西，智能体就会构建出来。你给出反馈，它进行迭代。整个过程就是这样一个循环。
这个术语于 2025 年初被创造出来，当时 AI 智能体已经强大到足以根据自然语言描述构建真实可用的软件。在此之前，AI 可以辅助编码（例如自动补全一行代码或建议一个函数），但你仍然需要理解编程才能构建应用。Vibecoding 改变了这一切。现在，关键技能不是写代码，而是清晰地描述你想要的东西，让 AI 能够构建出来。
可以把这个过程想象成雇一个承包商盖房子。你不需要知道如何砌砖，你只需要知道自己想要什么：什么样的房子、几个房间、什么风格、窗户在哪里。承包商负责具体的施工。在 Vibecoding 中，AI 智能体就是你的承包商。
过去，请一家代理机构构建一个生产级的在线应用要花费 30 万到 40 万美元。如今，你只需要 10 到 20 美元加上一份清晰的描述，就能走得很远。
什么是 AI 智能体？
你可能用过 ChatGPT 或其他聊天机器人。你输入一个问题，它给出一个回答。这就是聊天机器人（chatbot）。它根据提示返回文本。
AI 智能体（AI agent） 不一样。智能体不仅会回答，还会采取行动。你交给它一个任务，它就会动手去完成。它会创建文件、编写代码、做出决策、运行命令、修复错误，并在过程中向你提问。聊天机器人 vs. 智能体，就像问别人怎么走 vs. 雇一个司机送你到目的地。
当你 vibecode 时，你正在与一个 AI 智能体协作。你说"帮我搭一个深色主题的个人网站，附上我的社交链接。"智能体随后会创建项目文件夹、编写 HTML、CSS 和 JavaScript、搭建布局、挑选字体和颜色，并把结果展示给你。
你完全不需要碰代码。你是创意总监，智能体则是整个工程团队。
聊天机器人和 AI 智能体的区别是什么？
工具
本课程中你将主要使用两种 AI 编码环境：
Replit — 一个基于浏览器的编程环境，内置 AI 智能体。无需安装，所有功能都在云端运行。免费版足以让你上手。
OpenAI Codex — 一个安装在本地终端运行的 AI 智能体。Codex 在一定额度内免费使用，超过后需要购买更多额度。
如果你已经有付费的 Claude 订阅，也可以使用 Claude Code 替代 Codex。它是另一个基于终端的智能体（由 Anthropic 出品），用法相同。
两条路径做的事本质相同：你描述你想要什么，智能体来写代码。选哪个主要取决于你更喜欢在浏览器里工作（Replit）还是在终端里工作（Codex 或 Claude Code）。
AI 编码智能体在哪里运行？
重要：AI 智能体可能存在风险
大多数人会在自己的本地电脑上运行 AI 智能体——也就是那台保存着你的文件、照片、密码以及其他敏感数据的电脑。当智能体工作时，它会浏览互联网、读取文件，并处理来自外部的内容。这些内容中任何一处都可能包含提示注入（prompt injection）：精心设计的隐藏指令，目的就是劫持智能体。一旦智能体读到这些指令，它就会在你毫不知情的情况下执行它们，而它对你电脑上的一切都拥有完全访问权限。
这并非假设。这是一种已知且活跃的攻击手段，安全研究人员目前还没有可靠的修复方案。
什么是提示注入？
你听说过钓鱼攻击：一封伪装成银行的假邮件，目的是窃取你的登录信息。提示注入的思路相同，只不过攻击对象是 AI 智能体。攻击者不再是骗你点击链接，而是把隐藏指令藏进智能体会读取的内容里。当智能体处理这些内容时，它会像执行你的指令一样执行那些指令——你完全看不到这一切发生。
最佳实践
在沙箱中运行智能体，而不是在本地电脑上。 沙箱是一个云端的隔离环境，与你的个人文件和敏感数据相互分离。即便智能体在沙箱中被攻陷，损害也会被限制在沙箱内。
我们推荐两种选择：
- Replit — 基于浏览器，无需任何配置，适合新手。
- GitHub Codespaces — 在云端运行 VS Code，需要 GitHub 账号。
绝不要把真实的私钥、密码或 API key 交给智能体。 一旦你把这些交给智能体，就应当把它们视为已经泄露。请始终使用没有真实资金或敏感访问权限的开发专用账号。
把智能体的输出当作来自陌生人的代码来对待。 在部署前审查它构建的内容，尤其是涉及金钱或用户数据的部分。
什么是提示注入攻击？
为什么应该在沙箱中运行 AI 智能体？
循环
Vibecoding 遵循一个简单的循环。无论项目多复杂，都只是这个循环的不断重复：
- 描述 — 用自然语言告诉智能体你想要什么
- 构建 — 智能体编写代码并创建文件
- 审视 — 在浏览器里查看它的成果
- 反馈 — 告诉智能体需要改什么
- 重复 — 不断迭代，直到你满意为止
整个过程中没有任何一步需要你打开代码文件开始打字。所有这些都由智能体处理。
为什么「重复」是 Vibecoding 循环的一部分？
关键技能：Prompting
如果说 Vibecoding 是过程，那么 Prompting（提示） 就是关键技能。Prompt 就是你输入给智能体的指令。你 Prompt 的质量直接决定了输出的质量。
糟糕的 Prompt：
帮我做个网站
优秀的 Prompt：
帮我搭建一个个人作品集网站。深色背景（#111），白色文字，
干净的无衬线字体。包含：一个带我名字"Jordan"的页眉，一段两句话的
个人简介，一个由 4 张项目卡片组成的网格（每张带标题和描述），以及一个
带 Twitter 和 GitHub 链接的页脚。需要在移动端响应式适配。
同样的需求，输出却天差地别。仔细想想你要构建的是什么、它的样子、它的功能，以及它的目标用户。你不需要使用专业术语，但学习常见 UI 组件的名称会很有帮助。"加一个下拉菜单"比"加一个点了之后会显示选项的东西"要清晰得多。
小技巧： 推荐 Component Gallery，里面收录了几乎所有常见 UI 组件的可视化参考，并附有标准名称。
什么样的 Vibecoding Prompt 才算有效？
为 AI 智能体编写指令的这项技能被称为 _____。
当事情出问题时
事情一定会出问题。智能体会误解你的意图，应用会显示空白页，错误会突然弹出。这很正常——这种事每天都在发生在专业开发者身上。
当你看到错误信息时： 把完整的错误信息复制下来，原封不动地粘贴给智能体。不要自己总结。完整的错误信息能让智能体获得修复所需的上下文。
当你觉得某处不对劲时： 准确地描述你看到的现象。
当你卡住时： 直接告诉智能体。它能自行诊断并修复大多数问题。
当你看到错误信息时应该怎么做？
Vibecoding 能做什么、不能做什么
Vibecoding 能：
- 构建网站、Web 应用、工具、游戏、仪表盘、作品集等等
- 处理前端的设计、布局、交互和样式
- 配置数据库、身份认证、支付和 API
- 修复 bug、重构代码、为已有项目添加新功能
Vibecoding 暂时还不能：
- 第一次就完美完成所有事情——你总是需要迭代
- 替代你"知道自己想做什么"的能力
- 在没有技术评审的情况下，保证大规模生产环境下的代码质量
Vibecoding 中最重要的技能是什么？
接下来是什么
现在你已经理解了什么是 Vibecoding、AI 智能体如何工作以及整个循环是怎么运转的。在下一课，你将运用刚刚学到的一切，从零开始构建并发布你的第一个应用。
0/9 正确
0% — 全部答对即可完成