Vibe Coding 教程：新手如何入门，一步一步来

新手的 vibe coding 可以归结为五个步骤：选一个能替你运行应用的工具，用平实的语言描述一个小应用，像用户一样试用它，每次只让 AI 修复一个问题，然后在它能正常工作时发布。你不需要懂编程。本教程会以一个真实的入门项目为例，逐步介绍每一步、要输入的具体提示词，以及大多数新手在第一周都会犯的错误。

如果你想先了解背景，例如这个术语从何而来，以及人们为什么对它争论不休，可以先读 什么是 vibe coding。本页讲的是实践部分。

开始之前你需要准备什么

比你想象的要少：

• 一个浏览器和一个 vibe coding 工具的账号。 新手应选择 AI 应用构建器，它会编写代码、运行并托管应用；而不是需要你自己管理文件和服务器的编程助手。
• 一个小想法。 不是你的创业项目，而是一个只供你自己（一个人）使用、只包含一两个页面的工具。
• 一两个小时，不受打扰。第一次练习会让你熟悉节奏。

就这些。无需安装，无需学习编程课程，也无需终端。

新手该选哪个工具

工具本身比习惯更不重要，但它至少应该做到三件事：构建时显示实时预览，允许你撤销错误的修改，并且能发布到可分享的链接。我们对 最佳 vibe coding 工具 的对比会客观介绍主流选项。Mythex 也是其中之一：你在聊天中描述应用，它会构建一个真正的全栈应用，提供实时预览；当应用需要记住信息时，它会添加数据库，并且可以一键发布。Mythex 免费版无需绑定信用卡。

第一步：选择一个你能完成的项目

新手通常失败的原因，是目标定得太大。一个好的第一个项目应该：

• 对你个人有用，这样你才会认真测试它。
• 只需一两个页面就能完成。
• 存储少量你自己的数据。
• 不涉及支付、团队协作，也没有敏感的个人数据。

适合的第一个项目：

在本教程的其余部分，我们将以阅读清单为例。

第二步：写出你的第一条提示词

你的第一条消息决定了之后一切的走向。说明它是给谁用的、它做什么、它应该长什么样。控制在一小段话之内。

一条较弱的第一条提示词：

给我做一个书籍应用。

一条好的第一条提示词：

给我做一个阅读清单应用。我可以添加一本书，填写书名、作者和状态（想读、在读、已读）。书籍以卡片形式展示，按状态分组，最新的在前。我可以修改一本书的状态或删除它。界面保持简洁：白色背景，一种强调色，并且在手机上好用。保存书籍数据，刷新页面后它们依然存在。

注意第二条提示词做了什么。它列出了字段、操作、布局，以及一条新手经常忘记的规则：保存数据，使其在刷新后依然存在。 如果没有这一句，许多工具会做出一个看上去完成了、但重新加载就会丢失一切的页面。

更多起点请参见我们的 vibe coding 提示词速查表。

不确定时，先让 AI 做计划

如果你不确定该如何描述某个功能，可以让 AI 先规划再动手：

在你动手构建之前，请用平实的语言告诉我：你会做哪些页面、会存储哪些数据，以及有哪些需要我做决定的地方。

在 Mythex 中，这正是计划模式的用途：智能体先列出实现思路，你批准之后才会修改任何文件。

第三步：像用户一样测试，而不是像做它的人那样看

预览出现时，不要只是欣赏它，要真正去用一用：

1. 添加三本书，其中包括一本书名很长的书。
2. 修改一本书的状态。卡片是否移到了正确的分组？
3. 刷新页面。书籍是否还在？
4. 尝试添加一本书名为空的书。会发生什么？
5. 在手机上打开预览，或者把浏览器窗口调窄。

把哪里有问题用平实的语言记下来。“很长的书名撑破了卡片布局”就是一份完美的问题报告。“它坏了”则不是。

第四步：每条消息只修一个问题

这个习惯是区分能做完和半途而废的关键。每次只提出一个修改，检查它，然后再提出下一个。

书名“银河系漫游指南：全三部曲完整版”超出了卡片边界。让长书名折成两行，多余的部分用“…”截断。

然后：

如果我提交一个书名为空的表单，什么都不会发生，也没有任何提示。在输入框下显示“请填写书名”，并且不保存这本书。

为什么要一次只做一件事？如果你一次要求五处修改，AI 可能把四处做得很好，同时悄悄破坏了其他地方，而你根本不知道是哪一处修改导致的。小步前进也让撤销更有用：如果某次修改出了问题，就回滚到它之前的版本，然后用更清楚的请求再试一次。

出错时怎么办

出错是难免的。所有构建器都会遇到错误。复制确切的报错文字，或者描述你点了什么、看到了什么，然后粘贴回去：

我在卡片上点击删除时，看到“出错了”的提示，书还留在列表里。请找出原因并修复它，并告诉我原因是什么。

要求它说明原因很重要。这能帮你理解应用是如何运作的，也能防止 AI 凭猜测修改代码。我们的 如何调试 AI 构建的应用 指南会深入讲解这一点。

第五步：让它成为你自己的

一旦它能正常工作，就用同样的小步方式去改进：

• “给已读完的书增加 1–5 星的评分显示。”
• “在卡片上方添加搜索框，可按书名或作者过滤。”
• “背景改用暖色调的米白色，强调色用深绿色。”
• “在顶部增加一个计数器：今年已读完的书籍数量。”

每一条都是一个可以单独测试的小改动。

第六步：发布并分享

当它能满足你的需求时，就发布它。在 Mythex 上，这只需一次点击，你会得到一个公开网址，可以在任何设备上打开，也可以发给朋友。如果以后你想使用自己的域名，这是 Pro 功能，我们关于 绑定自定义域名 的指南有详细说明。

在与超过几个朋友分享之前，请先阅读 vibe coding 安全吗？。对于个人阅读清单来说，风险很低。但对于陌生人会注册并存储数据的应用，你需要先完成一些检查。

新手应避免的错误

• 一次提出所有需求。 “给我做一个 Goodreads”会得到一个看起来很厉害、实际上效果很差的东西。从最小的可用版本开始。
• 不测试刷新。 刷新后数据消失，是新手最常遇到的意外。
• 每次都从头重写你的需求。 明确说出要改什么、保持什么：“布局保持不变，只改颜色。”
• 相信“已经修好了”。 AI 常常会说某个 bug 已经修复了。每次都要自己检查。
• 把密码或 API 密钥粘贴到聊天里。 如果你的应用需要外部服务的密钥，请放进工具的机密设置中，绝不要写在消息里或代码里。参见 如何保护 API 密钥。
• 遇到第一个错误就放弃。 出错很正常。把错误粘贴回去，并要求查明原因。

边学边了解的内容

你不需要上课程，但掌握几个概念会让每一次需求都更精准。让 AI 结合你自己的应用来解释它们：

• 前端与后端： 哪些代码运行在访客的浏览器中，哪些运行在服务器上。（前端与后端）
• 数据库： 你的应用把数据保存在哪里。（什么是数据库？）
• 身份验证： 应用如何知道某个人是谁。
• 密钥： 应用使用的私密凭证，访客绝不应该看到。

一条适合这个目的的提示词：“请解释我的阅读清单在我点击添加后，如何保存一本书，从点击到数据被存储的完整过程。用平实的语言，并指出实际涉及的文件。”

你的第二和第三个项目

完成第一个应用后，选一个难度稍高的项目：带每周图表的习惯打卡器，会发邮件通知你的预约表单，或者读取 Google 表格的小型仪表盘。我们的 vibe coding 示例 展示了各种真实的应用类型，以及背后的提示词和出现过的问题；如何用 vibe coding 做应用 则带你把一个更大的项目从构想一路做到有用户使用的已发布应用。

准备好开始时，打开 AI 应用构建器，粘贴上面的阅读清单提示词，然后把它改成你自己的想法。

常见问题