第三篇：10 分钟上手：用自然语言生成一个全栈应用

无需安装本地环境，浏览器里直接跑通你的第一个 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 打开，看看你能否看懂它的结构。

我们下期见！