快速上手Vibe Coding：10 分钟做出你的第一个作品，并部署上线！

这是AI 进化社的第一篇文章。

在第一篇文章中，我们不聊任何的AI概念、理论、晦涩难懂的技术，直接上手实操，我会手把手带你在10分钟内做出你的第一个应用，并且把它部署到互联网上，让全世界的人都能访问它。（体验地址在文章末尾）

不需要你有任何编程基础，只要你会打字、会上网，就能跟着做。是的，你没听错! 不用会编程，不用一行行手撸代码，也能开发你的第一个专属应用。

1. 准备工作

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

1.1 基础环境

需要准备的东西：

1. 一台能上网的电脑（Windows、Mac 都可以，开发机最好不要用Linux）

2. 一个浏览器（Chrome、Edge、Safari 都行，首选Chrome）

3. 一个 AI 工具账号（至于要用哪个AI工具，这个后面讲）

4. 一个 GitHub 账号（免费的，懂得都懂）

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

如果你是非技术人员，不清楚GitHub是什么？简单普及一下💡 ：

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

后续AI进化社的项目实战源码，也会统一托管到GitHub上，所以请提前注册好帐号。（已有帐号的可忽略）

如果你的网络无法正常访问GitHub，这是一个敏感话题，不方便在这里明讲，后面偷偷在AI 工具百宝箱中单独更新一篇专门来讲吧（内部开放）。

1.2 如何选择 AI 工具？

既然要动手开发应用，不用传统编码的方式，那也得要挑选一款趁手的AI工具，总不能对着空气说吧 😄。

那如何选择AI工具呢？

老实说，我的建议，如果你完全没有接触过Vibe Coding, 属于完全零基础的新手，不要一上来就直接使用Claude Code、Cursor、Windsurf、CodeX等这类专业的AI编程工具，而应该从那些用户界面更友好的编程助手或AI应用开发平台开始。比如说，像Google AI Studio、V0.dev、Bolt.new，或者是国内的如z.ai、百度秒哒、美团 NoCode、阿里灵光，都是类似的 AI 应用生成平台，核心是零代码 + 自然语言生成。

因为像这类型的AI工具，他们的操作界面一般都比较简单，对新手的引导和教程也都做得比较好。从这些平台开始用，等到你完全了解了Vibe Coding的流程，然后触碰到了这些软件的上限的时候，再进阶到比如说像Cloud Code或者是Cursor这类更专业、功能更强大的AI编程软件。到那个时候，我觉得你应该更懂得如何去跟AI做协作，以及说如何去写提示词来驾驭这些专业的AI编程工具了。

那上面列举了那么多的零代码AI应用生成平台，又该怎么选？

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

注意，如果你的网络无法访问 Bolt.new，用国内的z.ai或者百度秒哒都是可以的，要记住，用什么工具，并不是最重要的！

1.3 注册 Bolt.new

这里就以Bolt.new为例，

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

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

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

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

2. 如何选择你的第一个开发项目

第一个项目选择很重要，直接会影响你的入门体验!

我的建议是，优先选简单完整、能落地用起来的小项目入手，做完能快速看到成果，既易上手建立信心，也能完整体验开发流程。

结合新手适配性，推荐以下 3 个易上手、有实际价值的入门项目，按需选择即可：

1. 个人名片网页：简洁展示姓名、头像、个人简介和联系方式，做好就能直接用，适合想快速体验开发成就感的同学；

2. 待办事项应用（经典 Todo List）：实现任务添加、完成标记、删除核心功能，是实用性极强的基础工具开发练手项；

3. 倒计时网页：支持自定义目标日期（如考试、生日、节日），实时展示剩余时长，可搭配视觉设计做创意落地，适合喜欢趣味开发的同学。

接下来，本教程将以待办事项应用为例展开讲解 —— 它功能完整、实用性强，能让你沉浸式走完「需求梳理 - 功能开发 - 部署发布」的完整流程。

如果更想做另外两个项目也完全没问题，核心开发步骤一致，只需把需求替换成对应的内容即可。

3. 需求梳理

不管是传统编程，还是如今的Vibe Coding编程，需求梳理都是不可或缺的，即便你不用像在公司里产品经理那样，每次都撰写详尽的需求文档，但最起码，让AI帮你干活前，你自己要先想清楚：究竟要让它打造一个什么样的应用。把它形成需求，作为你的提示词，喂给AI。

以待办事项(Todo List)应用为例，需求梳理内容，比如：

1. 功能需求：
     - 可以输入任务内容并添加到列表（任务内容长度在1~50字符之间）
     - 每个任务前方设置复选框，点击复选框标记任务为“已完成”，再次点击取消标记
     - 已完成任务：文本显示删除线、字体颜色变浅（与未完成任务区分明显），复选框默认勾选
     - 未完成任务：无删除线、字体颜色正常，复选框默认未勾选
     - 添加成功后，自动清空输入框，聚焦输入框，方便连续添加多个任务
     - 每个任务后面有删除按钮，点击删除按钮，弹出确认提示，避免误操作
     - 在任务列表顶部或底部，清晰显示两个核心数据：未完成任务数量、已完成任务数量
   ​
2. 界面要求：
     - 简洁现代的设计风格、清新柔和，无多余装饰
     - 使用清新的蓝色调，重点突出任务列表，视觉舒适（适合长时间使用）
     - 圆角按钮和输入框
     - 适当的阴影效果
     - 响应式设计，手机上也能正常使用
   ​
3. 技术要求：
     - 使用 HTML + CSS + JavaScript
     - 数据保存在浏览器本地存储，刷新页面不会丢失
     - 页面加载速度快，任务数量较多（如50条以上）时，无卡顿、无延迟

当然，需求梳理，到底要梳理细化到何种程度，并没有严格标准，你的需求越细，AI生成后的效果就可能会越接近你的实际预期，哪怕，你一上来就直接喂给AI一句话：帮我开发一个待办事项的应用 也未尝不可，我们再根据AI反馈的结果，来适时调整提示词，持续优化直到能满足自己的要求就行。

4. 让AI帮你干活

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

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

在 Bolt.new 的聊天框里，把上面整理好的需求作为提示词，输入到对话框，如输入以下内容（你可以直接复制）：

请帮我做一个待办事项网页应用，具体需求如下：

1. 功能需求：
     - 可以输入任务内容并添加到列表（任务内容长度在1~50字符之间）
     - 每个任务前方设置复选框，点击复选框标记任务为“已完成”，再次点击取消标记
     - 已完成任务：文本显示删除线、字体颜色变浅（与未完成任务区分明显），复选框默认勾选
     - 未完成任务：无删除线、字体颜色正常，复选框默认未勾选
     - 添加成功后，自动清空输入框，聚焦输入框，方便连续添加多个任务
     - 每个任务后面有删除按钮，点击删除按钮，弹出确认提示，避免误操作
     - 在任务列表顶部或底部，清晰显示两个核心数据：未完成任务数量、已完成任务数量
   ​
2. 界面要求：
     - 简洁现代的设计风格、清新柔和，无多余装饰
     - 使用清新的蓝色调，重点突出任务列表，视觉舒适（适合长时间使用）
     - 圆角按钮和输入框
     - 适当的阴影效果
     - 响应式设计，手机上也能正常使用
   ​
3. 技术要求：
     - 使用 HTML + CSS + JavaScript
     - 数据保存在浏览器本地存储，刷新页面不会丢失
     - 页面加载速度快，任务数量较多（如50条以上）时，无卡顿、无延迟

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

将需求以自然语言指令发送给AI后，你会看到 Bolt.new 开始工作，AI 会先尝试理解了你的需求，然后创建任务清单

接着，创建项目文件结构，再自动生成网页代码，整个过程大约需要 2~3 分钟左右。

代码生成完成后，右侧会自动显示预览效果。

你会看到一个输入框、一个添加按钮、任务列表区域。我们试着在输入框分别输入两个任务：

狂师・AI 进化社，期待你的加入
跟着狂师学AI

点击添加按钮或者直接按Enter键，就能看到效果。

第2轮对话：优化细节

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

我想做一些调整：

1. 输入框的占位符文字改成 "今天要做什么？"
2. 标题改成 "我的待办清单"，并加个emoji可爱的图标
3. 添加一个 "清空已完成" 的按钮

同样，很快，AI就帮我自动完成了修改

除了上述，可以直接在对话框中输入自然指令外，Bolt.new还可以开启可视化修改功能，选中你想要修改的元素，哪里不爽点哪里~

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

第3轮对话：添加新功能

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

帮我再加几个功能：

1. 任务可以设置优先级（高、中、低），用不同颜色标识
2. 可以编辑修改已添加的任务
3. 添加一个 "全部清空" 按钮，不论任务状态，都可以一键清空，清空前要求确认
4. ...

🥺白嫖额度不多了，我就不再演示了，和上述执行效果类似，人下达指令，AI帮你干活，坐等出效果。

小结：与AI对话小技巧

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

1. 需求要具体：不要说 “做得好看一点”，要说 “背景改成蓝色渐变，按钮加圆角”

2. 一次不要改太多：每次提 1~5 个要求就够了，改完看效果再继续

3. 遇到问题直接说：如果有 bug 或者效果不对，直接告诉 AI “XX 这里有问题”

4. 可以要求解释：不懂的地方，可以问 “这段代码是做什么的？”

5. 验收效果

现在，你的待办事项应用已经做好了。让我们测试一下各个功能：

1）在输入框输入 "跟着狂师学AI"，点击添加按钮，任务出现在列表中

2）点击任务前的复选框，任务文字显示删除线；点击删除按钮，任务从列表中消失。

还可以点击预览窗口上方的设备图标，看看在手机和不同屏幕上的效果。（可以选择不同移动端设备来预览，有很多可选项）

需要注意，让AI帮你干活时，并不是每次，AI都能100%帮你还原你的要求，总会出现一些达不到预期或存在BUG的地方，因此每轮AI对话完，一定要人工验收效果、持续迭代，直到满意。

如果发现某个功能无法正常使用，不要慌。把问题详细描述给 AI，比如 "我点击删除按钮后，任务没有被删除"，AI 会帮你修复 Bug，然后重新测试就好了。

这就是 Vibe Coding 的魅力 —— 遇到问题，AI 帮你解决！

6. 部署发布

好了，待办事项应用已经开发完成了，现在就让我们把它发布到互联网上，让所有人都能随时访问吧！

你或许会觉得，把网站或应用部署到公网是件复杂又繁琐的事儿 —— 既要准备服务器，又要购买域名，还得配置 SSL 证书，步骤一大堆。但别担心，如果你是用Bolt.new开发的应用，这一切都会变得无比简单，甚至不用花费一分钟，就能让你的应用面向全世界开放访问。

6.1 快速部署（推荐新手）

Bolt.new 提供了最简单的部署方式，只需要点击右上角的 "Publish" 按钮，点击发布：

然后稍等片刻，就能在聊天框中看到发布后的可访问地址了：

部署成功后，你应该能在任何浏览器访问你的应用，或者把地址分享给朋友让他们也能访问。

如上，在线体验地址：https://to-do-list-web-appli-21av.bolt.host/

💡 如果你觉得这个地址比较丑，不好记，Bolt.new 还支持自定义域名，但是仅高级版可用（要收费），觉得没必要，不建议弄。

到此，恭喜，你的第一个网页应用已经上线了，全程不用你写一行代码，就和平常与人对话一样，就这么简单！🎉

6.2 手动部署

手动部署应用到互联网组合方式有很多，当然，现在不讲，等后面在其他更复杂的实战项目中，再单独讲解吧~

7. 学习和理解AI 帮你做的内容

虽然AI已经帮你干完活了，但你的工作还没有完成，做完了项目，让我们花几分钟理解一下AI做的东西，这其实也是一种学习方式。

有了AI，我认为应该是让学习变得更简单、高效，而不是让AI一味地代替人来学习、思考。

比如，以上述的这个网页应用为例，你要知道网页应用的基础是 "前端三剑客"：

• HTML（结构）：定义了页面有哪些元素，比如输入框、按钮、任务列表、统计信息。

• CSS（样式）：定义了页面长什么样，包括颜色、字体、大小、布局和间距、动画效果。

• JavaScript（功能）：定义了页面怎么工作，包括添加任务、标记完成、删除任务、本地存储的逻辑。

不过，在这个项目中，AI 选择了使用 React 这个现代化的前端开发框架来帮你实现功能，React 是目前最流行的前端框架之一。

你可能会问，你怎么知道AI选用的是React框架呢？答案，当然是直接看AI生成的项目源码了啊。

如果你想看项目源码，可以将Bolt.new预览模式，切换到源码模式（预览按钮右侧的两个尖括号就是源码模式按钮了）

你会在项目结构中看到 .tsx 后缀的文件，这些就是 React 组件文件。但本质上，它们最终还是会被转换成浏览器能理解的 HTML、CSS 和 JavaScript。

你还可以在package.json文件中，查看到项目用到了React哪个版本，这也是学习过程中的一个小技巧，

特别是当我们用AI开发好了应用，如果要发布上线，你起码要知道AI开发时，到底用了哪些组件，以及对应的版本，否则你的网站哪天被人入侵了，都还不知道🥺。

比如去年React在某些组件特定版本下就纰漏出存在严重安全漏洞，被一些不法份子利用，当时还牵连了很大知名网站暴雷了。

再比如，你可能会好奇，为什么刷新页面任务还在？我的这个应用并没有配置数据库啊。

这是因为数据保存在浏览器的本地存储（localStorage）里。每次你修改任务，程序都会把最新的数据保存到 localStorage；当你重新打开页面时，程序会从 localStorage 读取之前保存的数据。这样即使关闭浏览器，数据也不会丢失。就像你把待办清单写在了一个不会丢的小本子上。

如果你还想深入理解某个部分，可以直接问 AI：

请解释一下本地存储是怎么工作的？

或者：

这段代码是做什么的？
[粘贴代码]

AI 会用通俗易懂的语言给你解释。

8. 尝试动手和优化

现在你已经有了一个实用的小软件了，看到这里，大家不要光看了，可以尝试做一些修改和优化，加深理解。

你可以试试：

• 改变颜色主题（"把应用改成粉色主题，温柔可爱的感觉"）

• 调整布局（"把统计信息移到页面底部，并居中显示"）

或者添加新功能，比如：

• 任务搜索（"添加一个搜索框，可以搜索任务内容"）

• 任务分类（"添加分类功能，可以给任务添加标签"）

• 导出功能（"添加一个按钮，可以把所有任务导出为文本文件"）

还可以优化用户体验，让应用更好用：

• 添加快捷键（"按回车键可以快速添加任务"）

• 添加动画（"添加任务时有一个淡入动画，删除任务时有一个滑出动画"）

如果你觉得简单，可以尝试添加：

• 截止日期功能

• 任务提醒功能

• 支持拖拽排序

• 支持多个任务列表

• 。。。

每次想添加新功能，就和 AI 说 "我想添加 [功能描述]，应该怎么做？"，AI 会帮你实现。

9. 写在最后

恭喜，你已经完成了 Vibe Coding 的第一次实战，相信你应该也能感到AI带来的魅力了。

你刚才做的事情，在几年前需要几个月的学习才能完成。但在今天，你只用了 10 分钟！这就是 Vibe Coding 的力量。

通过这个项目，相信，你已经基本学会了如何清晰地向 AI 描述需求、通过多轮对话不断优化项目、遇到问题如何跟 AI 协作解决，还学会了如何把项目发布到互联网。虽然你没有写代码，但你已经理解了网页应用的基本结构、用户交互的实现方式、数据存储的基本概念。

更重要的是，你建立了 Vibe Coding 的思维方式：关注 "要做什么" 而不是 "怎么做"，先做出来再不断优化，在做项目中学习而不是先学再做，把 AI 当作编程伙伴而不是工具。

这只是开始，随着你做的项目越来越多，你会发现你的需求表达能力越来越强、对技术的理解越来越深、能做的东西越来越复杂、创造力得到了真正的释放。

记住一句话：在 AI 时代，创造力比技术更重要，想法比实现更重要，迭代比完美更重要。

9.1 下一步建议

接下来，建议你再做 2 ~ 3 个类似难度的项目来巩固练习，比如个人名片网页、倒计时应用、简单计算器、天气查询工具。

布置个小作业：可以将动手实操做好的应用部署发布出来，将访问地址，分享到留言区哦👈

实践是最好的老师，只有真正动手做，你才能真正理解 Vibe Coding 的魅力。

当你熟练了 Bolt.new 这类平台和简单项目的开发后，再学习进阶那些，更专业的 AI编程工具。

加油，你一定可以的！💪