摘要本文面向零基础新手手把手带你使用免费的 Bolt.new 在线工具在 10 分钟内制作一个待办事项网页应用并部署上线。全文涵盖准备工作、AI 工具选择、项目选型、与 AI 三轮对话生成和优化代码、对话技巧、效果验证以及一键部署和扩展学习等核心步骤。在上一篇文章中我们聊了 Vibe Coding 的理念和思维方式。现在是时候动手实践了这篇文章我会手把手带你在 10 分钟内做出你的第一个网页应用并且把它部署到互联网上让全世界的人都能访问。是的你没听错不需要你有任何编程基础只要你会打字、会上网就能跟着做。一、准备工作在开始之前我们需要做一些简单的准备。别担心这些都很简单5 分钟就能搞定。需要准备的东西1. 一台能上网的电脑Windows、Mac 都可以2. 一个浏览器Chrome、Edge、Safari 都行3. 一个 AI 工具账号我们用 Bolt.new免费的4. 一个 GitHub 账号用来部署也是免费的就这些不需要安装任何编程软件不需要学任何代码一切都在浏览器里完成。什么是 GitHubGitHub 是目前最主流的、免费的代码开源托管平台可以理解为一个存储和管理代码的“网盘”。所有用户或团队都可以把自己的代码上传到 GitHub 进行共享和维护、从 GitHub 下载代码等。开发者们可以从 GitHub 上白嫖代码进行学习或引用。如何选择 AI 工具对于完全零基础的新手我强烈推荐从 Bolt.new 开始。它完全在线不需要安装任何软件打开浏览器就能用。而且最棒的是你写完代码立刻就能看到效果做完后一键发布到网上完全零门槛。还有免费额度够新手练习了。等你熟练了再去学习 Cursor 这样的专业工具也不迟。注意如果你的网络无法访问 Bolt.new也可以尝试美团 NoCode或者百度秒哒都是类似的应用生成平台。注册 Bolt.new1) 打开浏览器访问https://bolt.new2) 点击右上角的“Sign in”按钮3) 可以选择用 Google 账号/GitHub 账号/邮箱密码登录推荐用 GitHub后面部署会用到登录成功后准备工作就完成了。接下来你就可以在对话框中输入需求来生成项目了。二、选择你的第一个项目第一个项目很重要它直接决定了你的学习体验。我建议选择一个简单但完整的项目最好有实际用处能看到效果。根据我的经验下面这几个项目比较适合新手都是能轻松完成的。1) 个人名片网页展示你的名字、头像、自我介绍和联系方式简洁美观。适合想快速体验成就感的朋友。2) 待办事项应用一个简单的任务管理工具俗称 Todo List可以添加任务、标记完成、删除任务。适合想做点儿实用工具的朋友。3) 倒计时网页可以设置目标日期比如考试、生日实时显示剩余天数有漂亮的视觉效果。适合想做点有创意的东西的朋友。在这篇教程中我会以经典的待办事项应用为例因为它功能完整、实用性强而且能让你体验到完整的开发流程。如果你想做其他项目也完全没问题步骤是一样的只需要把需求描述换成你想要的就行。三、和 AI 对话生成代码好了现在开始最激动人心的部分——和 AI 对话让它帮你生成代码。第 1 轮对话描述基本需求在 Bolt.new 的聊天框里输入以下内容你可以直接复制请帮我做一个待办事项应用网页要求 功能需求 可以输入任务内容并添加到列表 每个任务前面有个复选框点击可以标记完成 已完成的任务显示删除线 每个任务后面有删除按钮 显示已完成和未完成的任务数量 界面要求 简洁现代的设计风格 使用清新的蓝色调 圆角按钮和输入框 适当的阴影效果 响应式设计手机上也能正常使用 技术要求 使用 HTML CSS JavaScript 数据保存在浏览器本地存储刷新页面不会丢失你还可以选择大模型、使用计划模式、添加附件、增强提示词等等但是我建议刚开始不用关注这些直接点击发送然后等待 AI 的回应即可。AI 在做什么发送后你会看到 Bolt.new 开始工作。AI 理解了你的需求然后创建项目文件结构再自动生成网页代码整个过程大约需要 2 分钟。第 2 轮对话优化细节看到初版效果后你可能会想调整一些细节。比如很好但我想做一些调整 输入框的占位符文字改成 今天要做什么 添加按钮改成 ➕ 添加任务 标题改成 我的待办清单并加个可爱的图标 背景色改成渐变色从浅蓝到浅紫 添加一个 清空已完成 的按钮还可以开启可视化修改功能选中你想要修改的元素哪里不爽点哪里~AI 会根据你的要求修改代码很快你就能看到新的效果了。第 3 轮对话添加新功能如果你想添加更多功能继续和 AI 对话再加几个功能 任务可以设置优先级高、中、低用不同颜色标识 可以编辑已添加的任务 添加一个 全部清空 按钮并要求确认 任务列表为空时显示一个友好的提示四、对话技巧在和 AI 对话时记住这几点1. 需求要具体不要说“做得好看一点”要说“背景改成蓝色渐变按钮加圆角”2. 一次不要改太多每次提 1~5 个要求就够了改完看效果再继续3. 遇到问题直接说如果有 bug 或者效果不对直接告诉 AI“XX 这里有问题”4. 可以要求解释不懂的地方可以问“这段代码是做什么的”验证效果现在你的待办事项应用已经做好了。让我们测试一下各个功能1) 在输入框输入“Vibe Coding”点击添加按钮任务出现在列表中2) 点击任务前的复选框任务文字显示删除线点击删除按钮任务从列表中消失。最后点击预览窗口上方的设备图标看看在手机和不同屏幕上的效果。如果发现某个功能无法正常使用不要慌。把问题详细描述给 AI比如“我点击删除按钮后任务没有被删除”AI 会帮你修复 Bug然后重新测试就好了。这就是 Vibe Coding 的魅力——遇到问题AI 帮你解决五、部署上线做完了应用现在让我们把它发布到互联网上让全世界的人都能访问快速部署推荐Bolt.new 提供了最简单的部署方式只需要点击右上角的“Publish”按钮点击发布然后稍等片刻就能在聊天框中看到发布后的可访问地址了部署成功后你应该能在任何浏览器访问你的应用或者把地址分享给朋友让他们也能访问。恭喜你的第一个网页应用已经上线了就这么简单如果你觉得这个地址比较丑Bolt.new 还支持自定义域名但是仅高级版可用我觉得没必要。六、扩展知识-手动部署这里就不再展示其他部署方式关注小编后续内容会给大家进行更新vercel 项目部署教程云端编辑器vercel对象部署内网穿透 4 种方式部署Nginx 宝塔 2 种方式部署个人博客WordPress 搭建个人博客4 种主流前后端项目部署六、理解你做的东西做完了项目,让我们花几分钟理解一下你做的东西,这样能帮你日后做出更好的项目。项目结构首先,你要知道网页应用的基础是“前端三件套”:● HTML (结构):定义了页面有哪些元素,比如输入框、按钮、任务列表、统计信息。● CSS (样式):定义了页面长什么样,包括颜色、字体、大小、布局和间距、动画效果。● Javascript(功能):定义了页面怎么工作,包括添加任务、标记完成、删除任务、本地存储 的逻辑。不过,在这个项目中,AI选择了使用 React 这个现代化的前端开发框架来帮你实现功能。React 是目前最流行的前端框架之一,它让开发更高效、代码更容易维护。所以你会在项目文件中看到.tsx 后缀的文件,这些就是 React 组件文件。但本质上,它们最终 还是会被转换成浏览器能理解的 HTML、CSS 和 JavaScript这就涉及到了前端的技术知识内容了核心功能解析(可跳过)让我们看看几个关键功能是怎么实现的:1) 添加任务:当你点击“添加任务”按钮时,程序会先获取输入框里的文字,然后创建一个新的 任务对象,把任务添加到列表里,同时保存到本地存储,最后清空输入框并刷新页面显示。整个 过程就像你在纸上写下一个待办事项,然后把它贴到墙上一样自然2) 标记完成:当你点击复选框时,程序会找到对应的任务,修改它的完成状态,更新本地存储, 然后更新页面显示(给任务文字加上删除线),同时更新统计数字。就像你用笔在纸上的任务上划 了一道线。3) 本地存储你可能会好奇,为什么刷新页面任务还在?这是因为数据保存在浏览器的本地存储(localStorage)里。每次你修改任务,程序都会把最新的 数据保存到 localStorage;当你重新打开页面时,程序会从 localStorage 读取之前保存的数据。这 样即使关闭浏览器,数据也不会丢失。就像你把待办清单写在了一个不会丢的小本子上。向 AI 请教如果你想深入理解某个部分,可以直接问 Al:请解释一下本地存储是怎么工作的?或者:这段代码是做什么的?[粘贴代码]Al 会用通俗易懂的语言给你解释。七、尝试修改和优化现在你已经有了一个实用的小软件,让我们尝试一些修改和优化,加深理解。你可以试试:● 改变颜色主题(“把应用改成粉色主题,温柔可爱的感觉”)● 修改文字(“把所有文字改成英文版本”)● 调整布局(“把统计信息移到页面底部,并居中显示”)或者添加新功能,比如:● 任务搜索(“添加一个搜索框,可以搜索任务内容”)● 任务分类(“添加分类功能,可以给任务添加标签”)● 导出功能(“添加一个按钮,可以把所有任务导出为文本文件”)还可以优化用户体验,让应用更好用:● 添加快捷键(“按回车键可以快速添加任务”)● 添加动画(“添加任务时有一个淡入动画,删除任务时有一个滑出动画”)● 空状态优化(“当没有任务时,显示一个可爱的插图和鼓励文字”)。如果你觉得简单,可以尝试添加:● 截止日期功能● 任务提醒功能● 支持拖拽排序● 添加深色模式切换● 支持多个任务列表每次想添加新功能,就和AI 说“我想添加[功能描述],应该怎么做?,AI 会帮你实现。写在最后恭喜,你已经完成了 Vibe Coding 的第一次实战。你刚才做的事情,在几年前需要几个月的学习才能完成。但在今天,你只用了10分钟!这就是 Vi be Coding 的力量。通过这个项目,你学会了如何清晰地向 AI 描述需求、通过多轮对话不断优化项目、遇到问题如何 跟 AI 协作解决,还学会了如何把项目发布到互联网。虽然你没有写代码,但你已经理解了网页应 用的基本结构、用户交互的实现方式、数据存储的基本概念。更重要的是,你建立了Vibe Coding 的思维方式:关注“要做什么”而不是“怎么做”,先做出来再 不断优化,在做项目中学习而不是先学再做,把AI 当作编程伙伴而不是工具。这只是开始,随着你做的项目越来越多,你会发现你的需求表达能力越来越强、对技术的理解 越来越深、能做的东西越来越复杂、创造力得到了真正的释放。记住我在第一篇文章里说的:在 AI时代,创造力比技术更重要,想法比实现更重要,迭代比完美 更重要。下一步建议接下来,建议你再做2~3个类似难度的项目来巩固练习,比如个人名片网页、倒计时应用、简 单计算器、天气查询工具。实践是最好的老师,只有真正动手做,你才能真正理解 Vibe Coding 的魅力。当你熟练了 Bolt.new 平台和简单项目的开发后,可以学习专业级cursor工具
