光看不练假把式，动手试试才知道 AI 编程有多香。

上一章咱们聊了聊 Vibe Coding 的理念。现在，是时候撸起袖子开干了！

接下来这 10 分钟，我会带你从零开始，做出一个能用的网页应用，并且直接部署上线，让全世界都能访问到。准备好了吗？

一、准备工作

别紧张，准备工作超级简单，5 分钟搞定。

你只需要：

1. 一台能上网的电脑
2. 一个浏览器（Chrome、Edge 都行）
3. 一个「扣子」账号

没了。不需要装编程软件，不需要学代码，全程在浏览器里搞定。

注册「扣子」

1. 打开浏览器，访问：https://code.coze.cn/
2. 选「手机号登录」，输入手机号和验证码
3. 点击「登录/注册」

搞定！登录成功后，你就可以在对话框里输入需求，让 AI 帮你生成项目了。

二、选个你的第一个项目

第一个项目很关键，选对了能让你信心倍增。建议挑个简单但完整的，最好有点实用价值，做完能马上看到效果。

根据我的经验，这几个挺适合新手的：

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

2）待办事项应用 经典的任务管理工具（Todo List），能添加任务、标记完成、删除任务。适合想做点实用工具的朋友。

3）倒计时网页 设置目标日期（考试、生日、恋爱纪念日都行），实时显示剩余天数，加点视觉效果。适合想做点有创意的东西的朋友。

这篇教程我会用 待办事项应用 当例子，因为它功能完整、实用，能让你体验完整的开发流程。想做其他的也完全 OK，步骤一样，把需求描述换成你想要的就行。

三、和 AI 对话生成代码

好了，最激动人心的环节来了——跟 AI 聊天，让它帮你写代码。

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

在「扣子」的聊天框里，输入下面这段文字（可直接复制）：

请帮我做一个待办事项应用网页，要求：

1. 功能需求：
   - 可以输入任务内容并添加到列表
   - 每个任务前面有个复选框，点击可以标记完成
   - 任务分为「待完成」和「已完成」两类
   - 已完成的任务显示删除线
   - 每个任务后面有删除按钮
   - 显示已完成和未完成的任务数量
2. 界面要求：
   - 撕纸拼贴艺术 + 新粗野主义的设计语言
   - 使用高饱和色调
   - 采用 lucide 图标
   - 响应式设计，手机上也能正常使用
3. 技术要求：
   - 使用 Next.js
   - 数据保存在浏览器本地存储，逻辑完整，刷新页面不会丢失

你还可以选大模型、开计划模式、加附件什么的，但我建议刚开始别管这些，直接点发送，等 AI 回应就行。

发送之后，你会看到「扣子」开始忙活。

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

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

试着在输入框里输入「抱抱烨笙的小猫~」，然后点添加按钮，看看效果。

第二轮对话：优化细节

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

很好！但我想做一些调整：

1. 输入框里的占位符文字改成「今天要做什么呢？」
2. 「还没有任务，快去添加吧！」上方的图标换成一个可爱的「小猫睡觉」表情/图片
3. 添加一个「清空已完成」的按钮

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

第三轮对话：添加新功能

想加更多功能？继续聊：

再加几个功能：

1. 任务可以设置优先级（高、中、低），用不同颜色标识
2. 可以编辑已添加的任务
3. 添加一个「全部清空」按钮，并要求经过弹窗确认

AI 会继续帮你实现。

对话小技巧

跟 AI 聊天时，记住这几点：

1. 需求要具体：别说「做得好看点」，要说「背景改成蓝色渐变，按钮加圆角」
2. 一次别改太多：每次提 1~5 个要求就够了，改完看效果再继续
3. 遇到问题直接说：有 bug 或效果不对，直接告诉 AI「XX 这里有问题」
4. 改崩了可以重来：某次修改偏差太大，换个提示词或模型重新试试
5. 不懂就问：可以问「这段代码是干嘛的？」

四、验证效果

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

1. 在输入框输入「科研和竞赛总得成一个吧」，点添加按钮，任务出现在列表里
2. 点任务前的复选框，任务文字显示删除线；点删除按钮，任务从列表消失

最后手动调整预览区域大小，看看在手机和不同大小的屏幕上的效果。

如果发现哪个功能不正常，别慌。把问题详细描述给 AI，比如「我点删除按钮后，任务没被删掉」，AI 会帮你修 Bug，然后重新测试。

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

五、部署上线

应用做完了，现在把它发布到互联网上，让全世界都能访问！

快速部署（推荐）

「扣子」提供了最简单的部署方式，点右上角的「部署」按钮，然后下划点击「开始部署」：

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

部署成功后，你可以在任何浏览器访问你的应用，或者把地址分享给朋友。

恭喜，你的第一个网页应用上线了，就这么简单！🎉

本教程的示例代码部署在 https://85f56nbw96.coze.site/ ，欢迎体验

扩展知识 - 手动部署

作为新手小白，想手动部署到互联网，可能会遇到付费或网络环境的问题。别担心，这里推荐几种常用的部署方式：

六、理解你做的东西

做完项目，花几分钟理解一下你做的东西，这样能帮你日后做出更好的项目。

项目结构

首先，你要知道网页应用的基础是「前端三件套」：

• HTML（结构）：定义页面有哪些元素，比如输入框、按钮、任务列表、统计信息
• CSS（样式）：定义页面长什么样，包括颜色、字体、大小、布局、动画效果
• JavaScript（功能）：定义页面怎么工作，包括添加任务、标记完成、删除任务、本地存储的逻辑

不过在这个项目里，AI 用了 Next.js 这个现代前端框架来帮你实现。Next.js 是目前最流行的 React 框架之一，让开发更高效、代码更好维护，而且天生支持部署到各种平台。

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

现在不理解完全没关系。如果对前端开发感兴趣，可以看看 数字游牧人-前端开发速成课 来快速入门。

核心功能解析

来看看几个关键功能是怎么实现的：

1）添加任务 当你点「添加任务」按钮时，程序会先获取输入框里的文字，然后创建一个新的任务对象，把任务添加到列表里，同时保存到本地存储，最后清空输入框并刷新页面显示。整个过程就像你在纸上写下一个待办事项，然后把它贴到墙上一样自然。

2）标记完成 当你点复选框时，程序会找到对应的任务，修改它的完成状态，更新本地存储，然后更新页面显示（给任务文字加上删除线），同时更新统计数字。就像你用笔在纸上的任务上划了一道线。

3）本地存储 你可能会好奇，为什么刷新页面任务还在？

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

向 AI 请教

想深入理解某个部分，直接问 AI：

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

或者：

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

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

七、尝试修改和优化

现在你已经有了一个实用的小软件，来试试修改和优化，加深理解。

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

写在最后

恭喜，你已经完成了 Vibe Coding 的第一次实战！

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

通过这个项目，你学会了：

• 如何清晰地向 AI 描述需求
• 通过多轮对话不断优化项目
• 遇到问题如何跟 AI 协作解决
• 如何把项目发布到互联网

虽然你没写代码，但你已经理解了网页应用的基本结构、用户交互的实现方式、数据存储的基本概念。

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

这只是开始。随着你做的项目越来越多，你会发现：

• 需求表达能力越来越强
• 对技术的理解越来越深
• 能做的东西越来越复杂
• 创造力得到了真正的释放

记住：

在 AI 时代，创造力比技术更重要、想法比实现更重要、迭代比完美更重要。