“Vibe Coding”全栈应用程序的结构化工作流程

第五步：闭环——AI辅助文档

“氛围编码”现在炒得沸沸扬扬。你可能见过一些 AI 大佬宣称，只需几个工具和提示，就能在 15 分钟内构建出 SaaS 应用。

但是，正如您可能已经猜到的那样，这些示例工作流程非常脆弱。

是的，您可以复制登录页面，或构建一个不错的 CRUD 应用程序，但您无法使用它们构建复杂的 SaaS 或内部工具。

但这并不意味着没有能够有效增强开发流程的工作流程。任何尝试过各种AI辅助技术的人都会告诉你，这些工具确实有神奇的魔力。

这就是为什么我花了几周时间研究最佳技术和工作流程技巧，并通过构建功能齐全的全栈应用程序对它们进行测试。

下面，您会看到我的真实评论以及我发现在使用 Cursor 与 Google 的 Gemini 2.5 Pro 以及可靠的 UI 模板时确实有效的工作流程。

顺便说一句，这个工作流程是我在业余时间测试和构建一个全栈个人理财应用时想出来的，期间不断调整和改进流程。之后，在确定了一个好的模板和工作流程后，我又重新构建了这个应用，并从启动到部署，完整地录制成了一个大约 3 小时的 YouTube 视频（见上文）。

本文总结了实现此工作流程的关键方法。

第一步：奠定基础

现代全栈 Web 应用程序中有很多动态组件。试图让你的法学硕士 (LLM) 将所有组件紧密地粘合在一起是行不通的。

这就是为什么您应该从坚实的基础开始并利用我们现有的工具来为您的 AI 助手提供帮助。

从实际意义上讲，这意味着使用如下内容：

1. UI 组件库
2. 样板模板
3. 包含电池的全栈框架

组件库和模板是为 LLM 提供已知基础的绝佳方法。它还能消除样式设计中的猜测，并帮助这些样式在应用程序发展过程中保持一致。

使用功能齐全的全栈框架，例如适用于 JavaScript（React、Node.js、Prisma）的Wasp或适用于 PHP 的Laravel，可以简化将堆栈各个部分拼凑在一起的复杂性。由于这些框架各有各的特色，它们选择了一套能够良好协作的工具，并且还具备在后台完成大量工作的优势。最终，AI 可以专注于应用的业务逻辑。

以 Wasp 的主配置文件为例（见下文）。您或 LLM 只需定义后端操作，框架就会负责管理服务器的设置和配置。此外，此配置文件还充当中央“真实来源”，LLM 可以随时参考该文件来了解应用在构建新功能时的定义方式。

app vibeCodeWasp {
  wasp: { version: "^0.16.3" },
  title: "Vibe Code Workflow",
  auth: {
    userEntity: User,
    methods: {
      email: {},
      google: {},
      github: {},
    },
  },
  client: {
    rootComponent: import Main from "@src/main",
    setupFn: import QuerySetup from "@src/config/querySetup",
  },
}

route LoginRoute { path: "/login", to: Login }
page Login {
  component: import { Login } from "@src/features/auth/login"
}

route EnvelopesRoute { path: "/envelopes", to: EnvelopesPage }
page EnvelopesPage {
  authRequired: true,
  component: import { EnvelopesPage } from "@src/features/envelopes/EnvelopesPage.tsx"
}

query getEnvelopes {
  fn: import { getEnvelopes } from "@src/features/envelopes/operations.ts",
  entities: [Envelope, BudgetProfile, UserBudgetProfile] // Need BudgetProfile to check ownership
}

action createEnvelope {
  fn: import { createEnvelope } from "@src/features/envelopes/operations.ts",
  entities: [Envelope, BudgetProfile, UserBudgetProfile] // Need BudgetProfile to link
}

//...

第 2 步：充分利用你的 AI 助手

一旦你有了坚实的工作基础，你就需要为你的编辑和法学硕士创建一套全面的规则。

要制定一套可靠的规则，您需要：

1. 开始构建一些东西
2. 注意法学硕士（反复）不符合你期望的情况，并为其制定规则
3. 不断要求法学硕士帮助你改进工作流程

定义规则

不同的 IDE 和编码工具对您定义的规则有不同的命名约定，但它们的功能大致相同（我在这个项目中使用了 Cursor，因此在这里我将参考 Cursor 的约定）。

Cursor 弃用了其.cursorrules配置文件，转而采用.cursor/rules/包含多个文件的目录。在这组规则中，您可以打包符合您编码风格的通用规则，以及特定于项目的规则（例如约定、操作、授权）。

这里的关键是为 LLM 提供结构化的背景，以便它不必依赖更广泛的知识。

这到底是什么意思？这意味着要告诉 LLM 你当前要构建的项目和模板，它应该使用哪些约定，以及它应该如何处理常见问题（例如，上面的示例图，取自教程视频的附带 repo）。

您还可以将通用策略添加到规则文件中，以便在聊天窗口中手动引用。例如，我经常告诉法学硕士 (LLM) “考虑 3 种不同的策略/方法，选择最佳的，并说明选择它的理由”。因此，我为其创建了一条规则，7-possible-solutions-thinking.mdc每当我想使用它时，我都会将其传入，这样就不用一遍又一遍地输入相同的内容了。

使用人工智能来批评和改进您的工作流程

除此之外，我将规则集视为一个流动的对象。在开发应用程序时，我首先从一套规则开始，然后对其进行迭代，以获得我想要的输出。这意味着需要添加新的规则来处理 LLM 课程中可能出现的常见错误，或者克服那些不符合 LLM 课程总体预期的项目特定问题。

当我修改这些规则时，我也会花时间使用 LLM 作为反馈来源，要求它批评我当前的工作流程并找到改进的方法。

这意味着将我的规则文件连同计划和自述文件等其他文档一起传递到上下文中，并要求它寻找可以改进的领域，并使用过去的聊天会话作为上下文。

很多时候，这只是意味着向法学硕士询问类似这样的问题：

您能否审查一下文档的广度和清晰度，并在必要时提出一些改进方法？请记住，这些文档将用作 AI 辅助编码工作流程的上下文。

步骤 3：定义“什么”和“如何”（PRD 和计划）

所有这一切中极其重要的一步是用于指导生成产品需求文档 (PRD) 以及从中创建的逐​​步可行计划的初始提示。

PRD 基本上只是有关应用程序的外观和行为的详细指南，以及有关如何实现的一些指南。

生成 PRD 后，我们要求 LLM 生成一个可操作的分步计划，该计划将使用适合 LLM 辅助开发的改进垂直切片方法分阶段实施应用程序。

垂直切片的实现非常重要，因为它指导法学硕士 (LLM) 以全栈“切片”的方式开发应用程序——从数据库到用户界面 (DB)，并逐步增加复杂性。这看起来像是在早期阶段开发一个全栈功能的超级简单版本，然后在后期阶段为该功能添加更多复杂性。

这种方法突出了此工作流程中一个常见的主题：构建一个简单、坚实的基础，并在重点部分中增加附加的复杂性

在每份文档初次生成后，我通常会要求LLM审查自己的工作，并根据项目结构以及文档将用于辅助编码的情况，寻找可能的改进方法。有时，LLM会发现一些有趣的改进，或者至少会发现一些可以删除的冗余信息。

以下是生成分步计划的示例提示（演练视频中使用的所有示例提示都可以在随附的 repo中找到）：

基于此项目需求文档 (PRD)，使用适合 LLM 辅助编码的改进型垂直切片实现方法，创建一个可操作的分步计划。在创建计划之前，请考虑几种适合此项目的不同计划样式，并选择最佳的实现样式。请说明您认为我们应该使用此计划样式的理由。请记住，我们将不断参考此计划来指导我们的编码实现，因此该计划应结构良好、简洁明了且可操作，同时仍提供足够的信息来指导 LLM 课程。

觉得本教程有趣吗？

Wasp 团队正在努力创建这样的内容，更不用说构建一个现代的开源 React/NodeJS 框架。

表达支持最简单的方式就是给 Wasp 代码库点个星！🐝 但如果您能访问代码库（无论是贡献代码还是测试产品），我们将不胜感激。点击下方按钮，给 Wasp 点个星，表达您的支持！

⭐️感谢您的支持💪

步骤 4：构建端到端 - 垂直切片的实际应用

如上所述，垂直切片方法非常适合使用全栈框架进行构建，因为它们可以为您和 LLM 完成繁重的工作。

例如，这种方法并非从一开始就尝试定义所有数据库模型，而是逐个处理全栈功能的最简单形式，然后在后续阶段在此基础上进行构建。这意味着，在早期阶段，我们可能只定义身份验证所需的数据库模型，然后定义其相关的服务器端功能，以及其 UI，例如登录表单和页面。

在我的 Wasp 项目中，实现阶段/功能的流程看起来很像：
->schema.prisma仅为该功能定义必要的 DB 实体-> 在文件
中定义操作 -> 编写服务器操作逻辑-> 在文件 中定义页面/路由 -> src/features 或 src/components UI- > 通过 Wasp 钩子和其他库钩子和模块（react-router-dom、recharts、tanstack-table）连接事物。main.wasp

main.wasp

这为我和 LLM 带来了巨大的优势，能够逐步构建应用程序，而不会因复杂性而陷入困境。

一旦这些功能的基础运行顺利，我们就可以提高它们的复杂性，并添加其他子功能，几乎不会出现任何问题！

这样做的另一个好处是，如果我意识到计划中没有我想要添加的功能，我可以请法学硕士（LLM）审核计划，并找到最佳的实施时间/阶段。有时这个时间就是当时，有时它会给出很好的建议，建议将新功能的想法推迟到以后。如果是这样，我们会相应地更新计划。

第五步：闭环——AI辅助文档

文档编制常常被搁置。但在人工智能辅助的工作流程中，追踪事物构建的原因以及当前的实施方式变得尤为重要。

除非你提供，否则AI不会天生“记住”三个阶段之前的上下文。所以我们让LLM自己提供它 :)

在完成计划中定义的重要阶段或功能片段后，我养成了让AI记录我们刚刚构建的内容的习惯。为了简化操作，我甚至为此创建了一个规则文件。

该过程大致如下：

• 收集与实现功能相关的关键文件（例如，main.wasp、schema.prisma、operations.ts 文件、UI 组件文件的相关部分）。
• 提供 PRD 和描述该特征的规划的相关部分。
• 使用 Doc 创建任务引用规则文件
• 让其审查文档的广度和清晰度

重要的是让它专注于核心逻辑、不同部分如何连接（数据库->服务器->客户端）以及做出的任何关键决策，并参考可以找到实施细节的特定文件。

然后，AI 会在ai/docs/目录中生成一个 markdown 文件（或更新现有文件），这有两个好处：

1. 对于人类而言：它为入职或未来开发创建了清晰的、人类可读的功能记录。
2. 对于人工智能而言：它在项目内部建立了一个知识库，可以在后续阶段反馈到人工智能的环境中。这有助于保持一致性，并降低人工智能忘记先前决策或实施的可能性。

这个“闭环”步骤将文档从一件苦差事转变为一种维护工作流程有效性的清晰方法。

结论：相信炒作……但不要全部相信

那么，你能在短短几个小时内写出一个复杂的 SaaS 应用吗？嗯，有点儿，但过程可能比较枯燥。

但您可以做的是利用人工智能来显著增强您的开发流程，加快构建速度，更有效地处理复杂性，并在您的全栈项目中维护更好的结构。

经过数周的测试，我最终确定的“Vibe Coding”工作流程可以归结为以下核心原则：

• 强势开局：使用坚实的基础，如全栈框架（Wasp）和 UI 库（Shadcn-admin），以减少样板并限制 AI 的问题空间。
• 教你的 AI：创建明确、详细的规则 (.cursor/rules/)，指导 AI 了解项目惯例、特定技术以及常见的陷阱。不要仅仅依赖它的常识。
• 构建对话：使用共享工件（如 PRD 和分步计划（与 AI 协作开发））来协调意图并分解工作。
• 垂直切片：以可管理的增量切片方式端到端地实现功能，并逐步增加复杂性。持续记录：在构建功能时，使用AI帮助记录功能，从而为人类和AI协作者维护项目知识。
• 迭代和改进：将规则、计划和工作流程本身视为活文档，使用人工智能来帮助批评和改进流程。

遵循这种结构化方法确实取得了良好的效果，我能够在创纪录的时间内实现功能。有了这个工作流程，我构建复杂应用程序的速度比以前快了20到50倍。

事实上，你还有一个拥有丰富知识的同伴，可以帮助你完善想法和测试假设，这也是很神奇的

虽然您无需亲自接触代码即可完成很多工作，但这仍然需要您（开发者）指导、审查和理解代码。但这确实是一种切实有效的方法，可以与 Cursor 中的 Gemini 2.5 Pro 等 AI 助手协作，超越简单的提示，高效地构建功能齐全的应用程序。

如果您想从头到尾了解此工作流程，请查看完整的约 3 小时 YouTube 演示和模板仓库。如果您还有我遗漏的其他技巧，请在评论中告诉我 :)