Transcript
00:00:00欢迎来到 Vibe Coding 101。如果你不懂编程，但仍然想
00:00:04把创意变成现实，比如制作作品集网站、个人项目，或者你一直
00:00:10想构建的东西，那么这个视频就是为你准备的。看完后，你就能构建一个真实的运行平台，
00:00:15而无需编写任何代码。如果你是一名开发者，这个视频也会很有帮助，
00:00:21因为有时你只想快速完成工作，而不希望过度设计。所以，
00:00:26我将带你了解 Vibe Coding 的完整流程、每一步的最佳实践，
00:00:32并一起构建一个真实项目。我们将使用 Abacus AI
00:00:37Deep Agent 来构建应用。这是我最喜欢的 AI 任务平台，因为只需一个订阅，
00:00:43你就可以构建应用、网站、演示文稿等几乎任何东西。我主要用它来进行
00:00:50Vibe Coding，因为我发现它出错更少，而且与我尝试过的
00:00:54其他平台相比非常划算。我在描述栏中放了链接，记得去看看。
00:00:59正确进行 Vibe Coding 共有五个步骤。大多数人已经知道这些步骤，
00:01:05但问题在于他们不知道每一步中的最佳实践，这就是为什么他们
00:01:09从 AI 那里得到的效果很差且不稳定。让我们来解决这个问题。第一步是
00:01:14构思阶段。这是你决定要构建什么的时候。可以是你的作品集网站或
00:01:19其他任何东西。如果你还没有头绪，也可以利用 AI 获取创意建议。我
00:01:25正在使用的是 Abacus Chat LLM，它的效果非常好。它会根据任务
00:01:31自动选择最佳的 AI 模型，这样你就不用纠结该使用哪个模型，
00:01:36从而获得更好的结果。有了创意后，下一步就是把它写下来。只需打开
00:01:42Google 文档或 Word，用平实的语言描述你的想法。你在这里创建的内容被称为
00:01:47产品需求文档（PRD）。别被这个名字吓到。对于 Vibe Coding 来说，PRD 只是一个
00:01:53一两页的文档，解释你想构建的内容。这份文档稍后将成为你的初始提示词。
00:01:59我正在使用这篇文章中的一个简单 PRD 模板。感谢作者，如果你想了解更多，
00:02:05也可以去看看那篇文章。如果你想要一个现成的填写模板，
00:02:09下载链接在描述栏里。让我们快速浏览一下各个部分。在“一句话描述”部分，
00:02:14只需用一句话介绍你的应用。本视频中我们要构建一个费用分摊网站。
00:02:20我们的描述可以像这样。下一部分是描述
00:02:25该产品是为谁服务的，以及它解决了什么问题。之后，你将列出应用程序的
00:02:31几个主要功能。无需使用技术术语，只需用平实的语言写出你想要的，
00:02:36并且只提到主要功能。下一部分是提到“不构建什么”，
00:02:41这样你的项目就不会超出范围。如果你不确定，目前可以跳过这一步。
00:02:47接下来是用户流程部分，它解释了应用程序的主要操作流程。这也是
00:02:52可选的。最后一个是成功标准部分。在这里你只需提到
00:02:58各项功能的成功标准。这同样是可选的。就这样。如果这让你觉得复杂，
00:03:03有一个捷径：只需填写那一句话描述，
00:03:07把模板粘贴到 ChatLLM 中，让它帮你完成 PRD。完成后，
00:03:13你就可以进入第二步了。在这个阶段，你将选择一个 Vibe Coding 平台，并将 PRD
00:03:19作为初始提示词粘贴进去。选择一个好的编程平台非常重要，因为显而易见，
00:03:25如果你想要出色的结果，就需要使用出色的平台。我将使用 Abacus AI
00:03:30Deep Agent。你只需复制 PRD 并将其粘贴到提示词框中。如果你希望
00:03:36应用具有某种设计，可以上传设计文件并要求它作为参考。但请记住，
00:03:41你不能直接上传 Figma 文件。另一种方式是用平实的语言描述你的设计。
00:03:47现在点击发送并等待。发送请求后，Agent 可能会问一些后续问题。
00:03:53大多是非技术性的，所以只需写下你的偏好即可。如果你有
00:03:59不明白的地方，可以直接让 AI 澄清其含义。发送偏好后，Agent
00:04:05将开始为你的应用程序编写代码。这是我最喜欢的部分，因为我可以刷会儿
00:04:10短视频，看着它为我生成代码。片刻之后。好了，我想我们的应用
00:04:17已经准备就绪。现在我们进入下一步。这个阶段主要是测试应用、修复 Bug、
00:04:23改进设计或添加功能。这也是大多数人容易出错的地方。在讨论
00:04:28那个之前，先快速浏览一下我们的平台。我们的应用运行良好。现在来谈谈
00:04:58在这个“测试与完善”阶段不该做什么。大多数人犯的一个大错误是，他们
00:05:04列出所有需要修复的问题，并将其塞进一个巨大的提示词中。AI 在这种情况下
00:05:09表现不佳。最佳实践是一次只修复一件事，并在提示词中描述得非常具体。
00:05:15假设一个按钮不起作用。不要写这样的提示词。相反，你可以使用
00:05:20这个提示词模板来修复问题。接下来，让我们看看添加额外功能的过程。
00:05:25你在 PRD 中已经描述过功能了。重用同样的格式即可。例如，在我们的网站上，
00:05:32让我们添加“不均等费用分摊”。目前，当我们创建一笔费用时，成本是
00:05:38均分的。但通过不均等分配，我可以控制每个人的费用。按照我们的模板，
00:05:44我已经为我们的新功能创建了描述。现在回到 Agent 那里并粘贴。但
00:05:50在那之前，确保加上这一行，然后粘贴你的描述。现在点击发送并
00:05:56等待。我们的新功能准备好了。现在来测试一下。看起来一切都很棒。
00:06:17这一步就是这些。添加一个功能，测试它，然后重复。在进入
00:06:23下一步之前，我还想补充几点。首先，不要犹豫是否恢复旧的更改。恢复
00:06:29旧的更改意味着你回退到代码的旧版本。在某些情况下，
00:06:33添加新功能或修复 Bug 可能会导致其他后果。在这种情况下，只需向
00:06:39AI 发送提示词，说明新更改破坏了代码，并让它修复。这在大多数情况下都有效。
00:06:44但如果无效，最好恢复到旧版本。我想补充的下一件事是，
00:06:49可以根据需要对我提供的提示词模板进行额外修改。
00:06:54现在进入下一步：最终验证。在添加完所有功能后，
00:06:59你需要对应用程序进行最终测试。这并不复杂。只需浏览
00:07:04你的平台并测试每个功能。确保每个输出都正确，每个行为
00:07:09都符合预期。如果发现任何问题，请再次回到“测试与完善”阶段。这
00:07:14基本上就是为了确保在上线前一切正常。最后一步是
00:07:20部署。使用 Abacus AI Deep Agent，部署只需点击几下。要部署应用，
00:07:27请找到顶部的“部署”按钮。点击部署，你会看到三个选项：使用 Abacus AI
00:07:33域名、自定义域名或自定义子域名。选择 Abacus 域名意味着你部署的
00:07:40站点 URL 将遵循此模式。如果选择自定义域名，你需要购买域名并
00:07:45通过 DNS 设置将其指向 Abacus。子域名则更简单。如果你拥有一个域名，可以
00:07:51直接使用类似的子域名，无需额外购买。现在，我们先使用 Abacus
00:07:57域名。输入你喜欢的名称，这将成为你部署后的网站 URL。
00:08:03恭喜！我们的第一个 Vibe Coding 应用终于上线了。你可以将此 URL 分享给他人，
00:08:09让他们也开始使用你的应用。在你去创建自己的应用之前，最后
00:08:14还有一件事我想补充。纯 Vibe Coding 生成的应用并不适合大规模商业产品。
00:08:20它们最适合个人项目、小工具、原型和有限的用户。这是因为
00:08:26可能存在安全问题、性能问题以及可扩展性的限制。如果你计划大规模扩展，
00:08:32最终还是需要开发者的。这就是 Vibe Coding 的五个步骤及其行之有效的
00:08:38最佳实践。一定要去看看 Abacus AI Deep Agent，链接在描述栏里。
00:08:44如果这个视频对你有帮助，请务必点赞、分享、订阅，并在下方留言
00:08:49分享你的想法。我们下期再见！