小白 Vibe Coding 0-1 零基础入门教程

本文适用于 0 编程基础，希望免费体验 Vibe Coding，不安装任何软件，能 2-3 个小时快速落地实现自己一些小想法的小白。本文将手把手教你如何通过 Vibe Coding 开发上线简单产品。

Vibe Coding是去年火起来的概念，是我们用自然语言描述需求，让AI 生成代码、解决 bug” 的高效开发范式。我们只需要想清楚想要做什么，剩下的繁琐工作全交给 AI 解决，全程只需要和 AI 聊天，就能将 idea 落地上线。

一、从想法→需求文档

用电脑打开豆包/deepseek/千问，在对话框中输入你想要实现的idea，懒得打字可以用语音输入，让大模型根据你的想法整理成一个需求文档。

输入 idea 这一步，丰俭由人。如果你的想法已经非常明确了，可以尽量完整、丰富地描述你的想法。如果你现在只有一个模糊的大概想法，可以通过和大模型的多轮对话，完善想法再让大模型输出需求文档

小白 Vibe Coding 0-1 零基础入门教程

二、从需求文档→代码（使用 Google Studio）

在浏览器搜索“Google AI Studio”，进入官网后，注册一个自己的 google 账号并登录，就可以进入开发流程了。

在登录使用 AI Studio 时，可能会遇到，你所在的地区限制使用 AI Studio 的提示。有两种情况会出现这个提示：一个是你注册了 google 后没有进行年龄认证，会判定你未满 18 岁不能使用该功能，这种情况点击 google 账号，按照要求上传照片/证明，完善年龄认证后即可继续使用。另一种情况是节点被污染了，这个时候需要换节点试试或者找一个地址再尝试。

登录进入 AI Studio 后，在左侧菜单点击【Build】，进入以下页面。将刚才大模型生成的需求文档内容粘贴到会话框内，确认无误后点击会话框右下角的【Build】按钮。

小白 Vibe Coding 0-1 零基础入门教程

三、让大模型调整、优化代码适配需求

接下来就是大模型的 coding 时间，我们只需要等待。生成后，我们可以在【Preview】的下方预览大模型生成的页面和功能。如果有需要调整的地方在下方的会话框内描述需要调整的地方，点击发送，大模型会根据的你描述调整、优化代码。

整个通过对话让大模型修改代码的过程同样丰俭由人，可以进行多轮，每个人对功能、布局、样式的要求复杂程度和精细化程度的高低对应调整时间的长短。【Preview】展示的内容满足你的要求后，就可以进行代码提交的操作了。

小白 Vibe Coding 0-1 零基础入门教程

四、提交代码到 GitHub

代码会提交到一个代码托管平台“GitHub”，用于存储、更新代码，以及项目管理。我们需要在提交代码前注册一个 github 账号（当然，节约时间也可以利用大模型 coding 的时间进行 github 的注册）。注册流程也很简单，在浏览器搜索“github”，用之前注册过的google 账号可以直接注册并登录上该平台。

注册完后，回到 AI Studio 平台页面，点击页面右上角的【Pbulish】按钮，并选择【GitHub】选项。简单填写项目名称、描述后，选择可见范围，Private 是仅个人可见，Public 是大家可见，大家根据应用是否需要仅个人使用进行选择。

小白 Vibe Coding 0-1 零基础入门教程

填写完成项目信息后，点击下方按钮【Create GitHub repository】提交代码。提交完成后，打开 github 官网查看代码是否提交成功。当页面左侧列表出现你刚才命名的项目名称即提交成功。

小白 Vibe Coding 0-1 零基础入门教程

五、使用 Vercel 部署上线

如何一键上线项目并分享给他人你的项目呢？需要使用到 vercel，vercel 是一个云部署平台，和 github 深度集成，可以快速部署上线项目，把 github 里的 “代码文件” 变成 “可在线访问的网页”。

我们在浏览器里搜索 vercel 并打开网页，用 github 的账号登录，点击 Add New Project，在新页面里选择需要上线的项目，点击【Import】按钮

小白 Vibe Coding 0-1 零基础入门教程

其他信息都已经自动搜集并填写好了，只需要关注填写上 Environment Variables 里的 key。如果应用代码是简单的纯前端代码，不涉及调用其他应用的接口，就不需要填写，但如果调用了其他应用的接口能力（比如使用到调用大模型能力对发音进行评分）就需要填写该应用的api key。如果我们不确定是否需要填写，可以直接选择填写上 key。

小白 Vibe Coding 0-1 零基础入门教程