Vibe Coding 101：立即用 AI 构建你的第一个真正应用或网站

你见过那个帖子。你认识的人——不是开发人员，也不是技术人员——展示他们自己构建的东西。一个可用的工具。一个真实的链接。而标题听起来对于它的实际内容来说，几乎过于随意。

现实检验：这不是炫耀，也不是夸大。用简单的英语描述一个应用程序并得到真实的回应，现在对于一个零编程背景的人来说，确实是可行的。它不是——这对于本课程的其余部分很重要——跳过思考的魔法。你仍然需要知道要问什么，以及“完成”实际意味着什么。这就是接下来的一切。

对于一个真正的第一个项目：从 Lovable 或 Replit 开始。两者都旨在引导真正的初学者一路走到上线，而不只是演示。

起点不是教程。它是一个小小的想法，和一个清晰的简报。键盘技能在这里的重要性远不如以前——你想要什么的清晰度更重要。

初学者最大的错误：从雄心勃勃的事情开始。“为我构建一个类似 Instagram 的东西”会立即失败，原因与你对一个没有其他信息的人类开发人员说这句话会失败的原因相同——它不是一个项目，它是一个类别。一个可行的第一个项目有一个清晰、可命名的工作。第 5 节将详细介绍如何界定范围。

每个主要工具都有一个真正的免费层级——确实足以零成本构建和测试第一个项目。一旦你超出这个范围，付费层级在主要工具中大约每月 20-25 美元。

诚实的提醒：免费层级对于探索来说是慷慨的，但是大量的来回迭代——在一个会话中不断要求更改——可能会比你预期的更快地耗尽每日或每月额度。这不是退缩的理由；这是知道它正在发生而不是感到惊讶的理由。

在打开任何工具之前，请先回答这些问题。它们决定了您的项目是一次性构建还是意外地持续数周。

1. 它是否需要在不同访问之间记住任何内容？如果它只需要在一次会话中工作——接收输入，显示结果——这是最简单的层级。如果它需要保存某些内容并在下次仍然存在（一个列表、一个账户、任何人的保存数据），那这就是一个真正的数据库，复杂性会真正地增加。对于第一个项目：选择不需要记住任何内容的。

2. 交互式，还是仅限固定内容？固定内容意味着页面总是显示相同的内容——对于信息页面来说没问题，但称不上是“构建”。交互式意味着它会对用户的输入或点击做出反应。对于第一个项目：选择交互式。它并没有难很多，而且这是一个页面和一个工具之间的区别。

3. 是否有任何内容需要保密？没有登录、没有支付详情、没有敏感内容——整个项目可以在浏览器中完全运行，无需真正的后端安全考虑。一旦涉及密码或真实用户数据，您就已经离开了第一个项目的范畴。对于第一个项目：没有任何隐私内容，没有任何需要登录的。

4. 托管——第一天完全不需要决定这个。现在每个对初学者友好的工具都提供了一个可工作、可分享的链接，并内置了一个“发布”按钮。这只有在项目真正超出其最初使用的工具时，才会成为一个独立的决定。

简而言之：您的第一个项目应该是交互式的，不需要保存任何内容，也不需要登录。这种组合在今天确实可以构建——它不是真实事物的玩具版本，而是正确的第一步。

快速、粗略且迭代。您描述您想要的。它会出现——通常在一分钟内。您查看它，它很接近但不太对。您用简单的英语纠正它。它会改变。

三到四轮的修正完全正常，这不是任何地方出错的迹象。将第一个结果视为您对本目录中任何其他初稿的态度——需要反应和完善的东西，而不是作为成品来判断的东西。

这是最重要的一个期望，值得您记住，比本课程中的任何工具名称都更长久：Vibe Coding 能让您快速完成大约 80% 的工作——通常在同一时间内完成。一个可运行的原型，真正具备功能，明显接近完成。

剩下的 20% 才是真正耗费时间的地方——润饰、大多数人想不到要测试的边缘情况、错误处理，以及使其真正稳健。最后这段路程可能需要数天，有时甚至数周的迭代，而不是几分钟。这并非任何单一工具的缺陷；跨主要平台的测试发现，大多数 AI 生成的应用程序在未经修改的情况下，无法通过首次真正的安全审查。

关键是，“完成”的定义会因使用者而异：

为自己或内部团队开发？80% 的版本通常已经真正完成。发布它，使用它，如果想的话稍后再迭代。

为真实客户开发，或涉及支付、密码或其他个人数据的任何内容？剩下的 20% 并非可选的润饰——这是演示与实际安全运行之间的区别。为此预留真实的时间，或者在它接触真实用户之前，请人进行适当的审查。

在开始之前，而不是在您已经分享链接之后，请先了解您正在针对哪个基准进行开发。

一个真正有用的项目，特别是对于分布式或大型团队中的任何人：输入几个城市，即时查看每个人的工作时间重叠。

1. 打开 Lovable 或 Replit 的免费套餐。

2. 粘贴这段简报：

“构建一个名为‘时区重叠查找器’的简单网络应用。让我可以从下拉菜单或搜索框中一次添加多个城市。对于每个添加的城市，显示其当前本地时间。在其下方，显示一个简单的视觉时间轴，突出显示所有添加城市的典型朝九晚五工作时间重叠的小时数。设计简洁，单页，无需登录，无需在每次访问之间保存任何内容。”

3. 观看它构建 — 预计在一分钟内完成第一个工作版本。

4. 使用真实城市进行测试 — 尝试您自己团队的实际位置。

5. 迭代三到四次。尝试：“让重叠时间在视觉上更明显”、“添加移除城市的方法”、“在每个城市旁边显示与我所在时区的时间差”。

6. 发布它。在每个主要工具中，一键即可完成。您现在拥有一个真实、可分享的链接，今天就构建了 — 根据第 7 节，这是一个真正完成的个人/团队工具，达到 80% 的完成度。除非您想继续，否则无需进一步工作。

Deadline Countdown。输入截止日期，实时查看剩余天数/小时/分钟。这个项目是提升技能的好机会——与其制作一个关闭后就忘记所有内容的页面，不如利用一种称为“本地存储”的技术，让它在您再次访问时记住您的截止日期。

什么是本地存储？回到第五节，“是否需要在再次访问时记住任何内容”是您的四个范围界定问题之一——对于一个真正的第一个项目，答案是否定的。本地存储是第二个项目的答案。它将数据直接存储在您自己的浏览器中，在您自己的设备上——无需真正的数据库、账户或服务器。关闭标签页，明天回来，您的截止日期仍然存在。

值得清楚了解的注意事项：它只会在该设备、该浏览器上记忆。在您的手机上打开同一个应用程序，它会是空的——没有任何内容被实际分享到任何地方。这就是与完整数据库的真正区别，完整数据库会为所有人、在任何地方记住相同的数据。对于一个不需要其他人看到的个人工具，本地存储正是“记忆”的适当程度——真正的持久性，而不会带来数据库所带来的真正复杂性跳跃。

“构建一个名为‘Deadline Countdown’的简单网络应用程序。让我输入截止日期名称和目标日期与时间。显示剩余天数、小时和分钟的实时倒计时，自动更新。让我添加多个截止日期并查看它们的列表，最近的排在最前面。使用本地存储保存我的截止日期，这样即使我关闭标签页稍后回来，它们仍然存在。简洁、简单的设计，单页，无需登录。”

与您已经尝试过的计算器形状相同 — 但这个引入了一个第 5 节中四个范围界定问题没有涵盖的考量：它是否需要来自应用程序本身以外的真实、实时数据？

一个固定数字计算器只会使用它已有的数字。一个实时货币转换器需要获取实际的、当前的汇率 — 这些数据每小时都在变化，存储在别人的服务器上。这是一个真正的进步：应用程序现在依赖于外部数据源的正常运作，而不仅仅是它自己的逻辑。这仍然是一个合理的项目 — 只是与其它项目不同种类的“小”。

“建立一个名为‘实时货币转换器’的简单网络应用程序。让我选择两种货币并输入一个金额。使用真实、实时的汇率显示转换后的金额，而不是固定数字 — 从公共汇率 API 中提取。当我更改任何输入时更新结果。简洁、简单的设计，单页，无需登录，无需在不同访问之间保存任何内容。”

一个诚实的提醒：让实时数据连接正常运作可能需要比您的第一个项目多几轮迭代。这是预期的，而不是任何地方出错的迹象 — 这是第 7 节“最后阶段需要更多迭代”的原则，只是由于外部数据依赖性而比平时稍早出现。

想要更精确地控制它的运作方式？当您准备好时，Cursor 或 Claude Code 等工具会为您提供更技术性、更实用的层面。

建立了一些您真正想展示给真实用户的东西？在此之前，您需要进行真正的安全和生产准备检查 — 认真对待第 7 节的 20%，而不是将其视为一个脚注。

意识到您真正想要的是自动化，而不是一个独立的应用程序？无代码代理构建路径涵盖了这种不同但相关的技能。

Nexa 的评语：炒作程度 4/5 · 成熟度 3/5 — 前 80% 确实像网上看起来那么容易。最后 20% 是真正的工作，而预先知道这一点是区分一个有趣的周末项目和一个令人沮丧的项目的关键。

1. 现在，即使没有任何编程背景，也能通过简单的英语描述应用程序，并获得真实可用的成果。

2. 从 Lovable 或 Replit 开始——两者都能让真正的初学者做出实际运行的产品，而不仅仅是演示。

3. 用四个问题来规划你的第一个项目：它是否需要记住任何东西？它是否具有交互性？是否有任何东西需要保密？以及第一天不要决定托管方式。

4. Vibe coding 能让你快速完成 80% 的进度——剩下的 20%（润饰、边缘情况、真正的健壮性）可能需要数天或数周，而且大多数 AI 生成的应用程序未经修改都无法通过首次安全审查。

5. “完成”的定义会因对象而异——80% 的版本对于个人或内部使用通常已算真正完成；任何面向客户或涉及真实数据的产品，在发布前都需要完成最后的 20%。

6. 预计三到四轮的修正都是完全正常的——将第一个结果视为草稿，而不是最终定论。

7. 需要真实、实时外部数据（例如当前汇率）的项目，其复杂性与固定数字计算器不同——预计这些项目需要额外的几轮迭代。

8. 本地存储允许项目在不同访问之间记住数据，而无需真正的数据库——但仅限于该单一设备和浏览器，不会在其他任何地方共享。