无需安装本地环境，浏览器里直接跑通你的第一个 Vibe Coding 作品。
前言
这篇文章是本专栏唯一一个**“你只需要复制粘贴”**的章节。不要求你懂代码、不要求你配置环境，只需要：
- 一个能上网的浏览器
- 一个邮箱（用于注册）
- 10 分钟时间
我们将使用Bolt.new—— 一个完全免费的云端 AI 全栈开发环境。你只需要输入自然语言，它就能生成代码并在浏览器中直接运行预览。
💡 为什么选 Bolt.new？
- 零配置：不需要安装 Node.js、数据库、Git
- 免费额度：注册即送，足够完成本实战
- 所见即所得：左侧 Prompt，右侧实时预览
- 支持全栈：React + Node.js + 数据库一体化
第一步：打开 Bolt.new 并注册
- 访问https://bolt.new（无需翻墙，国内可直接访问）
- 点击右上角Sign In，使用 GitHub 账号或邮箱注册
- 注册完成后，你会看到一个空白工作区：
- 左侧是Prompt 输入框
- 右侧是代码编辑区（暂时空白）
- 底部是终端输出和预览区
第二步：输入第一个 Prompt
将下面这段文字完整复制到左侧 Prompt 输入框，然后按Enter或点击发送图标：
创建一个待办事项管理应用，要求如下： 技术栈： - 前端：React + Tailwind CSS - 后端：Node.js + Express - 数据存储：内存数组（不需要数据库） 功能： 1. 展示所有待办事项，每一项包含文字内容和完成状态 2. 可以添加新的待办事项 3. 可以勾选/取消勾选标记完成 4. 可以删除事项 界面要求： - 使用卡片式设计，圆角，柔和阴影 - 整体背景浅灰色，卡片白色 - 输入框和按钮使用蓝白配色 - 完成的文字显示删除线且颜色变浅 将前后端全部整合在一个项目中，通过 Express 提供 API，前端通过 fetch 调用。第三步：等待 AI 生成
提交后，你会看到 Bolt.new 的 AI 开始工作：
- 分析需求：识别出需要生成 Express 后端 + React 前端
- 创建文件结构：自动创建
server.js、package.json、前端组件文件等 - 编写代码：逐文件生成代码并显示在右侧编辑区
- 自动安装依赖：在终端运行
npm install - 启动服务：自动运行
npm run dev，并在预览区显示结果
⏱ 整个过程大约需要1-2 分钟。
🔍 你可以实时观察右侧文件树的变化和终端的输出。如果中途卡住，可以点击“重新生成”按钮。
第四步：体验你的第一个 Vibe Coding 应用
启动成功后，预览区会出现一个漂亮的待办事项应用：
- 顶部：输入框 + “添加”按钮
- 中间：待办列表，每项带复选框、文字和删除按钮
- 功能：
- 输入文字点击添加，新事项出现在列表底部
- 点击复选框，文字变成删除线并灰显
- 点击删除按钮，事项消失
如果 AI 生成的不完全符合预期（比如缺少删除线），你可以直接在 Prompt 中补充修复指令，例如：
“完成的文字要有删除线，并且颜色从黑色变成灰色。”
AI 会修改相关 CSS 并刷新预览。
第五步：查看代码（可选）
即使你是非技术背景，也可以点开右侧文件树，看看 AI 生成了哪些文件：
server.js—— 后端 API 路由（GET /todos, POST /todos, DELETE /todos/:id）index.js—— React 入口文件App.jsx—— 主界面组件index.css—— Tailwind 基础样式
你会发现，AI 连package.json里的依赖版本都帮你写好了。
第六步：保存并分享
Bolt.new 自动保存你的项目。你可以：
- 复制链接：点击右上角 Share，获得一个公开链接，发给朋友或面试官查看
- 下载代码：点击 Download，得到一个 zip 包，可以在本地继续开发
- 一键部署：点击 Deploy，连接到 Netlify/Vercel 账号直接上线
进阶玩法（5 分钟扩展示例）
如果你还想体验更多，可以在同一个 Prompt 输入框里追加需求：
“增加一个统计栏，显示‘还剩 X 项未完成’。”
AI 会在底部添加一个统计栏，实时计算未完成事项数量。
再追加：
“支持按‘全部/未完成/已完成’筛选。”
AI 会添加三个按钮和筛选逻辑，全程无需你写一行代码。
常见问题
Q: Bolt.new 免费吗？
A: 免费版提供每月 5000 次 AI 调用额度，足够完成本专栏所有实战。重度使用可升级 Pro（$20/月）。
Q: 生成的代码可以直接用吗？
A: 对于个人项目或 MVP 验证，完全可以直接用。生产环境建议人工审查安全性和性能。
Q: 我想用 Cursor/Windsurf 怎么做？
A: 第四篇开始我们会详细介绍这些工具。Bolt.new 只是最快速的上手方式。
Q: AI 生成的代码有 bug 怎么办？
A: 把报错信息直接复制到 Prompt 输入框，告诉 AI：“上面的代码运行时出现错误：[错误信息]。请修复。” AI 会自动修改代码。
你刚刚完成了什么？
- ✅ 用自然语言生成了一个全栈 React + Express 应用
- ✅ 全程没有安装任何软件，没有手写任何代码
- ✅ 得到了一个可运行、可分享、可下载的真实项目
- ✅ 体验了 Vibe Coding 的核心循环：需求 → 生成 → 反馈 → 迭代
这就是 Vibe Coding 的魅力。它不是科幻，而是你现在就能用的生产力工具。
下篇预告
你已经亲手跑通了第一个 AI 应用。从下一篇开始，我们将深入主流工具的内部：
第四篇：Cursor 深度评测 —— Composer 模式下的全栈 vibe 体验
你将了解为什么 Cursor 被许多开发者称为“Vibe Coding 的黄金标准”，以及它的 Composer 模式如何实现多文件协同编辑。
思考与练习
- 在 Bolt.new 中尝试修改 Prompt，把待办事项的“删除按钮”改成“垃圾桶图标”，看看 AI 如何响应。
- 让 AI 增加“编辑事项文字”的功能。
- 点击 Download 下载生成的代码，在本地用 VS Code 打开，看看你能否看懂它的结构。
我们下期见！
