用AI生成完整功能Web应用的技巧 | 前端进阶之旅

用AI生成完整功能Web应用的技巧 | 前端进阶之旅

Full translation

完整中文译文

我是一名独立开发者，喜欢做各种有趣的业余项目，比如拥有约 4,000 名用户的 SaaS 应用 CoverLetterGPT。因此，我一直在寻找 AI 辅助编程工具，希望能尽快启动新的全栈 Web 应用。

我尝试了很多工具，但发现其中大多数生成的代码库都过于简单，难以真正用于开发；或者，为了得到一个令人满意的结果，花费的时间几乎和我自己编写代码一样多。

不过，在尝试不同工具和方法的过程中，我偶然发现了一个技巧，它能帮助我为全栈应用生成全面且真正可用的代码库，其中包含 Auth、API routes、Tailwind CSS、DB 管理以及其他更复杂的功能。

秘诀是什么？让 ChatGPT 为你想要创建的应用编写一份详细的 Product Requirement Doc，然后将其交给 Wasp 的 GPT Web App Generator。

生成结果确实令人惊喜。与我尝试过的其他工具相比，它能提供一个好得多的初始代码库，这主要得益于生成器本身具有很强的针对性。

最棒的是，它可以免费使用！🤑

我是一名自学成才的全栈 Web 开发者，非常享受开发业余项目的过程。

比如，我最引以为傲的业余项目是一款开源的求职信生成 SaaS 应用 CoverLetterGPT，目前已经拥有接近 4,000 名用户！

我还有很多荒诞的业余项目创意，比如开发一款应用，把你最喜欢的科技博主发布的 YouTube 视频变成喝酒游戏。🤣

正因如此，我一直在尝试各种 AI 辅助编程工具，希望尽快生成真正可用的全栈 Web 应用。

目前比较常见的工具包括在 IDE 中使用 ChatGPT 和 Copilot，但新的工具也在不断涌现，尤其是那些以 AI 助手或“Agent”形式工作的工具。

我有机会试用过其中一些工具，甚至还写过一篇长篇对比文章，对两款此类工具进行了实际测试。如果你感兴趣，可以去看看。

不过，这些工具存在一个严重问题：尽管它们能够生成一些不错的样板代码，但其中往往包含大量错误，最终并没有真正让开发者的工作轻松多少。

从理论上看，AI 辅助编程工具通常能够为开发者节省时间和精力，尤其是在处理相互独立的代码片段时。

一方面，我们拥有 ChatGPT 和 Copilot 这类工具，它们可以帮助你重构代码、修复错误或生成一段代码。这很像拼拼图：工具会把下一块恰好能填补眼前空缺的拼图递给你。

但编程并不只是填补下一个空位，还需要设想完整的画面，理解更大的系统，以及各个部分之间如何相互关联。

行为方式更接近 Agent 的 AI 辅助编程工具，有潜力理解生成大型代码库所需的这种宏观上下文，但说起来容易，做起来却很难。目前，市面上的大多数工具最终生成的代码仍然充满错误。

最糟糕的是，它们输出的某些代码可能混乱到反而给你增加更多工作。

AI 助手很像刚入门的学徒，需要全面理解自己究竟应该朝着什么目标工作。为了做到这一点，你需要制定一份详细的大纲和完整的指令集，尽可能为 AI 提供更多上下文。

从本质上说，你需要扮演 Product Manager/Designer 的角色，并向 AI 提供一份 Product Requirement Document（PRD），也就是一份具有权威性的文档，清晰概述待开发产品的

相关内容。

但提供 PRD 仅仅完成了一半工作。这是因为 Web 应用前端和后端中的各个组件还需要了解彼此。

而这正是大多数此类工具的短板。以 Smol-Developer 为例，它能够创建质量不错的客户端和服务端代码，这些代码各自独立运行时表现很好，可惜放在一起却无法协同工作！

鉴于这一点，最理想的选择似乎是这样一种 AI 工具：它已经了解整个系统的方方面面，并且理解 Web 应用不同部分之间的相互联系。

简而言之，我们需要的工具不能只是“完成自己的任务”，还要能够“理解整个项目”。

别忘了，这里关注的是生成全面的全栈代码库，而 Wasp 的 GPT Web App Generator 在这方面的表现出乎意料地好。

它是如何做到的？完整答案要从 Wasp 这个框架如何帮助你构建全栈 React/NodeJS Web 应用说起。

详细解释这一点已经超出了本文的讨论范围，但简而言之，Wasp 拥有一个 compiler，可以根据配置文件帮助你构建应用。这个配置文件就像一组 compiler 能够理解的指令，compiler 会利用它将全栈应用的各个部分组合在一起。

这正是 AI 更容易正确生成应用所有组成部分的原因！当 AI 编写好基础的客户端代码、服务端代码和主配置文件后，Wasp compiler 就会接手并将它们组合起来，从而消除许多潜在的出错可能！

最终，你会得到一个 React/NodeJS 代码库，其中包含以下功能：

server config 和 API routes
server config 和 API routes
Tailwind CSS config 和样式
Tailwind CSS config 和样式

另一个很酷的地方在于，这款工具并不要求你把需求描述得极其明确，因为具体的规则已经内置在工具本身之中。换句话说，它可以为你节省大量时间和精力，同时又不会牺牲最终产品的质量或一致性。

好吧，但如果你和我一样，可能并不知道如何编写一份优秀的 PRD。而且，编写详细的 PRD 也相当耗时。幸运的是，ChatGPT 知道该怎么写。

因此，为了让 Wasp 的 GPT Web App Generator 生成真正出色的结果，我会先让 ChatGPT（使用 GPT-4）为我编写一份详细的 Product Requirement Doc，例如：

Write a Product Requirement Document for the following full-stack app:An app where users can track their house plants and their watering schedule.

然后，我会对 ChatGPT 的输出稍作修改，再将其交给 GPT Web App Generator：

Product Requirements Document for a House Plants Tracking Application1. **Product Title**: GreenLush: Your House Plant Care Companion2. **Purpose**: The GreenLush app is designed to help users manage their house plants and keep track of their watering schedules. This app will serve as a reminder tool, a database for plant types, and a platform for users to know more about house plant care. 3. **Features and Functionality**:    3.1. **User Registration & Profile Management**: To allow users to create and manage their account.        3.2. **Plant Database**: A comprehensive directory of house plants, with visuals and information about each type.        3.3. **Plant Profile**: Users can create a profile for each house plant they own, fill in its type, and assign a custom nickname and photo.        3.4. **Watering Schedule**: By selecting or inputting the type of plant, the app will suggest an ideal watering schedule. Users can confirm or customize this schedule and notifications will be sent when it's time to water each specific plant.     3.5. **House Plant Care Tips**: A section of the app that provides general care tips and recommendations for house plants.4. **Behavior of the Product**:    4.1. Users will be prompted to sign up when they open the app for the first time.       4.2. Once registered, users will be able to browse the plant database, create and manage plant profiles, set watering schedules, and read plant care tips.     4.3. Notification alerts will be sent according to the set watering schedule.

GPT Web App Generator 会开始为你的应用生成一份计划，逐个文件执行该计划，甚至还会进行一些错误检查和修复。

之后，你可以先审查生成的应用代码，再将其下载并在本地运行。这个功能很实用，因为有时你可以调整 prompt 和几项设置，看看能否得到更好的结果。

最棒的是，整个过程完全免费。你甚至不需要使用自己的 API key！

上图就是我通过前面的示例 prompt 开箱即用生成的真实全栈应用，而且它确实能够运行。我只需要初始化数据库、注册并登录，然后——砰！应用就成功运行起来了！

🤩 顺便说一句，如果你想查看 GPT Web App Generator 根据上述 PRD 创建的代码，可以访问：https://usemage.ai/result/1f28b518-0cca-4352-84e4-69a4ac04d0fa

还有文章介绍了使用这款工具能够构建的更多应用类型，不过最好的方式可能还是亲自试一试，看看自己能生成什么！

市面上有不少非常酷的 AI 辅助编程工具，但如果要快速启动一个全栈 React/NodeJS 应用，我发现 GPT Web App Generator 的表现最好。

它能够持续生成真正可用且内容全面的全栈初始代码库。根据应用复杂程度的不同，这些代码库只需要修复少量错误，甚至完全不需要修复。

再结合这个“PRD 技巧”，你就可以避免手写大量样板代码，为自己节省可观的时间。