Vibe Coding零基础入门：用AI做出并发布第一个网页

为什么第一次用AI做网页总会卡住

很多人第一次尝试用AI生成网页，真正的障碍往往不在于“生成页面”本身——AI几句话就能吐出一个完整的HTML页面。真正让人卡壳的，是生成之后的问题：文件到底存在哪里？想改一处细节该怎么改？改坏了怎么恢复？最后又该如何把成果发给别人看。

这期B站UP主分享的教程，正是围绕这条完整链路展开：从一个空文件夹开始，做出一个个人介绍网页，再修改、保存，最后发布成任何人都能访问的在线链接。整个流程被拆解成三个核心知识点：工具怎么准备、网页保存在哪里、如何围绕现有页面继续修改。这套方法的价值在于，它不绑定某一款具体工具——工具会过时，但“把需求一步步做成作品”的方法不会过时。

不纠结选哪款工具：用提示词让AI帮你决策

AI编程工具层出不穷，功能也一直在变。与其死记某一款工具的操作，不如先掌握“如何找到并上手工具”。UP主给出的思路很实用：不要笼统地问AI“有哪些AI编程工具”，这样得到的回答会非常宽泛，反而无从下手。

正确做法是把需求说清楚——告诉AI你的电脑是什么系统、你想做什么事情。这样AI会推荐当前比较热门的几款工具，并给出详细的安装与使用步骤。如果你心里已经有了目标工具（比如教程中演示用的某款Coder应用），直接指定工具名称，让AI给出针对性的上手指引即可。这个“让AI帮你选工具”的方法，比记住任何单一工具都更耐用。

创建第一个项目：工作区就是一个文件夹

“项目”这个词听起来复杂，其实说白了就是一个存放网页文件的文件夹。教程里的做法非常直观：在桌面新建一个文件夹，命名为 MyWeb。

接着打开AI编程工具，在工作区点击加号，选择刚创建的 MyWeb 文件夹并打开。现在主流的AI Agent产品都有“选择工作区”的功能。UP主特别建议：每做一个新任务就创建一个新工作区，这样后续查找文件会清晰很多，不会把所有文件混在一起。

工作区就位后，就可以把提示词粘贴进去生成个人主页了。这里有一个关键细节——提示词中特意要求AI使用原生的HTML、CSS、JS。原因是原生HTML生成的页面更轻量，也更方便后续部署，对于一个简单的个人主页完全够用。本次只做两个板块：“关于我”和“我分享的内容”，先把最简单的页面跑通。

生成完成后，右侧会自动打开预览，也可以通过工具右上角选择“在外部浏览器中预览”，在真实浏览器里查看效果。

定位修改法：让AI精准改到你想改的地方

Vibe Coding的现实是：很少有一次对话就能做出完全满意的界面，几乎都需要反复修改。但直接对AI说“把名字改成红色”，它有时会改错位置。UP主分享了一个在任何编程工具里都通用的小技巧——定位修改法。

具体操作：在浏览器里按键盘 F12 打开开发者工具，点击左上角的元素选择图标，选中你要修改的区域（比如名字），对应的代码就会被高亮选中。右击选择“编辑HTML”，全选并复制这段代码。然后回到AI编程工具，把这段代码粘贴到对话框，再告诉它“把这里改为红色”并发送。

这样AI就能精准定位到你指定的那段代码，大幅减少改错位置的情况。改完刷新页面，就能看到文字颜色被准确修改。这个方法不依赖具体工具，是通用的实战技巧。

F12开发者工具是所有现代浏览器（Chrome、Edge、Firefox、Safari）内置的调试面板，无需安装任何插件。其中的「元素选择器」（快捷键通常是 Ctrl+Shift+C 或 Cmd+Shift+C）允许你用鼠标直接点击页面上的任意视觉元素，右侧的 Elements 面板会同步高亮对应的 HTML 代码片段。这个工具最初是为前端工程师排查 Bug 设计的，但在 Vibe Coding 场景下它有了新用途：把你「看到」的视觉区域和 AI「读到」的代码片段精准对应起来，充当人与 AI 之间的翻译层。复制出来的 HTML 片段通常包含元素的标签、class 名称和内联样式，这些信息足以让 AI 在整个文件中唯一定位到目标位置，从而避免「全局搜索替换」带来的误改。

版本恢复：三种从简到专业的备份方法

改坏了想回到上一个版本怎么办？教程给出了三种由浅入深的方法：

第一种，手动备份。 直接找到 MyWeb 文件夹，复制一份出来，就相当于保存了一个版本。方法最朴素，但对新手足够直接。

第二种，工具自带的撤销功能。 AI编程工具每次执行完修改后，通常都有“撤销”选项，选择“撤销文件修改”即可回退，右下角会有相应提示，刷新页面就能看到还原效果。很多Web Coding工具都带这个功能，使用时可以留意一下。

第三种，Git版本管理工具。 这是最专业的方案，适合作品变复杂、需要完整修改记录时使用。对于入门阶段，UP主建议先把手动备份和撤销这两种走通即可，掌握这两个就完全够用。

Git 是目前软件行业最主流的分布式版本控制系统，由 Linux 内核作者 Linus Torvalds 于 2005 年创建。它的核心概念是「提交（commit）」：每次你觉得代码处于一个相对稳定的状态，就做一次提交，Git 会记录下那一刻所有文件的快照。日后无论改了多少次，都可以精确回退到任意一次提交的状态。对于初学者来说，Git 的命令行界面有一定门槛，但许多 AI 编程工具已经将常见的 Git 操作（初始化仓库、提交、回退）封装成可视化按钮，或者可以直接用自然语言让 AI 代为执行。入门阶段不必深究 Git 的底层原理，只需建立「定期提交 = 定期存档」的意识，等项目变复杂后再逐步深入。

一键部署上线：用AI工具自带的站点功能

网页做好了，但只能自己看——还需要一个任何人都能访问的链接。部署方式有很多：可以部署到自己的服务器，也可以用在线托管平台。本期教程选择了最省事的方案：用AI编程工具自带的网站/站点功能，直接通过提示词部署上线。

操作上，点击加号选择“站点”，输入提示词“帮我把当前生成的页面部署到线上”并发送。部署需要一点时间，完成后右侧会显示“已发布”状态。

这里有个容易忽略的细节：默认可见范围通常是“仅自己可以访问”，需要手动改为“任何人都可以访问”，并选择允许公开访问。设置好后复制链接，粘贴到浏览器就能打开，这个网址发给朋友也同样可以访问。至此，从创建项目到部署上线的完整流程就全部跑通了。

「部署（Deploy）」在 Web 开发中指将本地代码上传到公网服务器、使其可被外部用户访问的过程。传统部署需要购买服务器、配置域名和 HTTPS 证书，流程相对繁琐。现代托管平台（如 Vercel、Netlify、GitHub Pages 等）通过「静态站点托管」大幅简化了这一过程：对于纯 HTML/CSS/JS 构成的静态网页，平台只需将文件存储到 CDN 节点并分配一个公网子域名即可，整个过程可以在一分钟内完成，且通常提供免费套餐。教程中 AI 编程工具自带的「站点」功能，本质上就是对此类托管服务的进一步封装，让你无需离开工具界面、通过一句提示词就能完成上传和发布。理解这个背景有助于你日后在工具不支持或需要更多控制权时，知道如何独立选择托管方案。

跑通流程只是第一步

整个教程的核心价值，不在于教你用哪款工具，而在于建立一条可复用的工作流：准备工具 → 创建工作区 → 生成页面 → 精准修改 → 版本备份 → 部署上线。工具会变，但这套把需求一步步做成作品的方法可以一直沿用。

熟悉这些步骤后，无论是做活动介绍页，还是工作中需要的小工具，你都会知道该从哪里开始。当然，“网页能做出来”只是第一步——UP主预告下一期将继续用这个页面，分享如何把一个朴素的网页一步步改得更美观、更有设计感。对想入门Vibe Coding的新手来说，这是一条值得照着走一遍的清晰路径。