快速上手 Vibe Coding

10 分钟做出你的第一个网页应用并部署上线

你好，我是程序员鱼皮，前腾讯全栈开发，全网 200 万粉的 AI 编程博主，也是 AI 导航和编程导航等 10+ 自研产品的创造者。

在上一篇文章中，我们聊了 Vibe Coding 的理念和思维方式。现在，是时候动手实践了！

这篇文章，我会手把手带你在 10 分钟内做出你的第一个网页应用，并且把它部署到互联网上，让全世界的人都能访问。

是的，你没听错，不需要你有任何编程基础，只要你会打字、会上网，就能跟着做。

一、准备工作

在开始之前，我们需要做一些简单的准备。别担心，这些都很简单，5 分钟就能搞定。

需要准备的东西：

一台能上网的电脑（Windows、Mac 都可以）
一个浏览器（Chrome、Edge、Safari 都行）
一个 AI 工具账号（我们用 Bolt.new，免费的）
一个 GitHub 账号（用来部署，也是免费的）

就这些，不需要安装任何编程软件，不需要学任何代码，一切都在浏览器里完成。

💡 什么是 GitHub？

GitHub 是目前最主流的、免费的代码开源托管平台，可以理解为一个存储和管理代码的 “网盘”。所有用户或团队都可以把自己的代码上传到 GitHub 进行共享和维护、从 GitHub 下载代码等。开发者们可以从 GitHub 上白票代码，进行学习或引用。

如果你对 GitHub 感兴趣，可以看鱼皮的保姆级 GitHub 学习路线免费学习。

如何选择 AI 工具？

对于完全零基础的新手，我强烈推荐从 Bolt.new 开始。它完全在线，不需要安装任何软件，打开浏览器就能用。而且最棒的是，你写完代码立刻就能看到效果，做完后一键发布到网上，完全零门槛。还有免费额度，够新手练习了。

等你熟练了，再去学习 Cursor 这样的专业工具也不迟。

注意，如果你的网络无法访问 Bolt.new，也可以尝试美团 NoCode 或者百度秒哒，都是类似的 AI 应用生成平台。

注册 Bolt.new

1）打开浏览器，访问：https://bolt.new

2）点击右上角的 "Sign in" 按钮

3）可以选择用 Google 账号 / GitHub 账号 / 邮箱密码登录（推荐用 GitHub，后面部署会用到）

登录成功后，准备工作就完成了。接下来你就可以在对话框中输入需求来生成项目了。

二、选择你的第一个项目

第一个项目很重要，它直接决定了你的学习体验。我建议选择一个简单但完整的项目，最好有实际用处，能看到效果。

根据我的经验，下面这几个项目比较适合新手，都是能轻松完成的。

1）个人名片网页：展示你的名字、头像、自我介绍和联系方式，简洁美观。适合想快速体验成就感的朋友。

2）待办事项应用：一个简单的任务管理工具（俗称 Todo List），可以添加任务、标记完成、删除任务。适合想做点儿实用工具的朋友。

3）倒计时网页：可以设置目标日期（比如考试、生日），实时显示剩余天数，有漂亮的视觉效果。适合想做点有创意的东西的朋友。

在这篇教程中，我会以经典的 待办事项应用 为例，因为它功能完整、实用性强，而且能让你体验到完整的开发流程。如果你想做其他项目也完全没问题，步骤是一样的，只需要把需求描述换成你想要的就行。

三、和 AI 对话生成代码

好了，现在开始最激动人心的部分 —— 和 AI 对话，让它帮你生成代码。

第 1 轮对话：描述基本需求

在 Bolt.new 的聊天框里，输入以下内容（你可以直接复制）：

▼
text
复制代码
请帮我做一个待办事项应用网页，要求：

1. 功能需求：
   - 可以输入任务内容并添加到列表
   - 每个任务前面有个复选框，点击可以标记完成
   - 已完成的任务显示删除线
   - 每个任务后面有删除按钮
   - 显示已完成和未完成的任务数量

2. 界面要求：
   - 简洁现代的设计风格
   - 使用清新的蓝色调
   - 圆角按钮和输入框
   - 适当的阴影效果
   - 响应式设计，手机上也能正常使用

3. 技术要求：
   - 使用 HTML + CSS + JavaScript
   - 数据保存在浏览器本地存储，刷新页面不会丢失

你还可以选择大模型、使用计划模式、添加附件、增强提示词等等，但是我建议刚开始不用关注这些，直接点击发送，然后等待 AI 的回应即可。

AI 在做什么？

发送后，你会看到 Bolt.new 开始工作。

AI 理解了你的需求，然后创建项目文件结构，再自动生成网页代码，整个过程大约需要 2 分钟。

代码生成完成后，右侧会自动显示预览效果。你会看到一个输入框、一个添加按钮、任务列表区域。

试着在输入框里输入 "跟鱼皮学习 Vibe Coding"，然后点击添加按钮，看看效果。

第 2 轮对话：优化细节

看到初版效果后，你可能会想调整一些细节。比如：

▼
text
复制代码
很好！但我想做一些调整：

1. 输入框的占位符文字改成 "今天要做什么？"
2. 添加按钮改成 "➕ 添加任务"
3. 标题改成 "我的待办清单"，并加个可爱的图标
4. 背景色改成渐变色，从浅蓝到浅紫
5. 添加一个 "清空已完成" 的按钮

还可以开启可视化修改功能，选中你想要修改的元素，哪里不爽点哪里~

AI 会根据你的要求修改代码，很快你就能看到新效果。

第 3 轮对话：添加新功能

如果你想添加更多功能，继续和 AI 对话：

▼
text
复制代码
再加几个功能：

1. 任务可以设置优先级（高、中、低），用不同颜色标识
2. 可以编辑已添加的任务
3. 添加一个 "全部清空" 按钮，并要求确认
4. 任务列表为空时，显示一个友好的提示

AI 会继续帮你实现这些功能。

对话技巧

在和 AI 对话时，记住这几点：

需求要具体：不要说 “做得好看一点”，要说 “背景改成蓝色渐变，按钮加圆角”
一次不要改太多：每次提 1~5 个要求就够了，改完看效果再继续
遇到问题直接说：如果有 bug 或者效果不对，直接告诉 AI “XX 这里有问题”
可以要求解释：不懂的地方，可以问 “这段代码是做什么的？”

四、验证效果

现在，你的待办事项应用已经做好

01 快速上手 Vibe Coding