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" 按钮，点击发布：

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