AI助力两天构建部署应用：Lovable、Supabase与Netlify实战经验分享

在没有足够时间与资源的情况下，构建自己的应用曾是一个挑战。

随着大型语言模型（LLMs）的进步，非开发人员开发应用或其他软件产品的机会大大增加，正如Andrej Karpathy用“意念编程”（vibe coding）一词所强调的那样。

There’s a new kind of coding I call “vibe coding”, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. It’s possible because the LLMs (e.g. Cursor Composer w Sonnet) are getting too good. Also I just talk to Composer with SuperWhisper…

— Andrej Karpathy (@karpathy) February 2, 2025

本文作者尝试利用“意念编程”方法创建一款Web应用。这更像是一项实验，旨在验证在短短两天内构建并部署一款应用的可行性。目标并非追求完美，只需达到最小可行产品（MVP）的标准即可。

本文将概述整个过程，包括所用工具的技巧和成本。如果希望先一睹最终产品，可访问drawcraft.io。

该项目使用了Lovable、Supabase和Netlify这三款工具。

• Lovable是一个广受欢迎的AI应用构建器。
• Supabase是一个处理所有后端相关流程的开发平台。Lovable与Supabase之间的无缝集成是一个重要优势。
• Netlify用于部署应用，同时也支持域名购买（如果需要）。

在开始使用这些工具之前，可以参考一些关于它们的使用和开发视频。值得注意的是，本文与这些工具均无任何商业关联。

使用Lovable构建

Lovable提供免费和付费计划。专业版有多种定价选项，对应不同的积分额度。其中，每月25美元的入门级方案可提供100积分，此外每天还可获得5个免费积分。

100积分并非意味着恰好100个提示词，而是所消耗的积分数量与消息（即提示词）的数量成正比。

使用Lovable构建时，建议在第一个提示词中提供详细且明确的指令。如果第一个提示词过于简单（例如“构建一个日历应用”），则需要编写大量消息（即消耗积分）进行定制。此外，后续添加复杂功能可能比最初声明它们更为复杂。

基于以上原则，以下是项目最初使用的提示词：

## Objective
Develop a web application that enables users to create customized drawing images using a large language model (LLM).
Core Features


User Input and Drawing Generation

Users can input a description of the drawing they desire, such as "Bugatti car," "Farmhouse," "Father and Kid," or "Cristiano Ronaldo."
Users select a difficulty level for the drawing: Beginner, Medium, or Advanced.

Beginner: Suitable for small children with simple, distinct lines.
Medium: Moderate complexity with more details.
Advanced: Highly detailed and complex drawings.


The application reformats the user's input into a structured prompt for the LLM to generate the drawing.
Users can view and download the generated image in PNG format.



User Interface and Experience

Design a clean and modern landing page, similar to a SaaS platform, using whites and soft colors for a minimalist aesthetic.
Ensure the interface is intuitive and user-friendly, facilitating easy navigation and interaction.



Authentication and Subscription

Implement user authentication and signup functionality.
Offer two subscription tiers:

Free Plan: Allows up to 3 drawings per month.
Pro Plan: Allows up to 20 drawings per month at a cost of $20 per month.





Technical Requirements

Frontend: Use modern web technologies to create a responsive and visually appealing user interface.
Backend: Develop a robust backend to handle user requests, manage subscriptions, and interface with the LLM for drawing generation.
Database: Implement a database to store user information, subscription details, and drawing history.
Security: Ensure secure handling of user data and transactions, adhering to best practices in web security.

Additional Considerations

Optimize the application for performance and scalability to handle varying loads and user demands.
Provide clear instructions and support for users to maximize their experience with the application.
Consider implementing analytics to track user engagement and drawing preferences for future improvements.

最初的设计表现出色，但仍需进行一些调整。在初始提示后，主要通过单条指令消息进行迭代修改。此外，也可直接在Lovable UI上编辑代码，这些修改不消耗积分。

Supabase集成

尽管在初始提示中包含了添加身份验证和订阅功能的需求，但由于缺少合适的后端支持，这些功能未能实现。此时，Supabase发挥了关键作用。

在Lovable项目中添加Supabase非常简单。只需创建一个Supabase账户，并按照Lovable UI上的步骤将其集成到项目中即可。

完成Supabase集成后，Lovable可以编写代码来添加用户身份验证、创建数据库表，以及添加边缘函数来处理后端任务。

一个问题是，应用持续发送请求检查用户订阅状态。通过手动检查网络活动发现了这一问题，并耗费了一些消息积分让Lovable进行修复。对于有开发经验的人来说，这可能是一个简单的修复，但为了追求快速迭代并充分利用Lovable的功能，选择让其自动处理。

Supabase的免费额度很快被消耗殆尽，因此需要升级到每月25美元的付费计划。上述问题可能消耗了大部分免费额度。

GitHub集成

Lovable使得GitHub账户的集成变得非常容易。只需遵循Lovable UI上的指示即可完成集成并在GitHub中创建项目。

重要提示：请记住，Lovable对项目所做的每一个更改都会自动提交到GitHub的默认分支。这是一个双向集成，因此如果使用IDE或GitHub UI在默认分支上进行更改，这些更改也会自动应用到Lovable项目中。

另一个问题涉及多分支工作流程。在Lovable文档中指出，它总是提交到默认分支。最初默认分支是主分支。然而，当创建新分支并将其设为默认分支时，这一更改并未在Lovable中反映出来，它仍然持续提交到主分支。

在一些YouTube视频中，Lovable UI曾显示有更改分支的选项，但现在似乎无法找到。这可能是UI更新后的变化。虽然这并未造成项目阻塞，但仍希望了解此问题的解决方案。

部署应用

部署应用有多种方案。在这一步骤上，项目并未进行过多思考。由于观察到一些开发者使用Netlify，因此也选择尝试该平台。

Netlify提供免费计划，其额度足以满足需求。免费计划提供300积分，每次部署消耗15积分。

一旦创建账户，即可按照指示在Netlify上添加GitHub项目。

可以免费使用Netlify域名，或者通过Netlify购买自定义域名。当然，也可以在其他地方购买域名并在Netlify上使用。

重要提示：默认情况下，Netlify会在您向生产分支提交代码时自动部署站点。鉴于Lovable会自动将提交推送到默认分支，如果将默认分支用作生产分支（这并非最佳实践），那么Lovable上的每次更改都将触发Netlify部署。这将迅速消耗掉免费的Netlify积分。

Lovable的性能表现

Lovable在构建整个Web应用方面表现出色。然而，最终产品并非完美无瑕。在站点部署并投入使用后，发现了一些问题。幸运的是，这些都是小问题，并通过Lovable得以修复。

为了给drawcraft.io添加一些示例图，曾尝试通过Lovable聊天界面上传图片，但未能成功。随后，将示例图上传到GitHub UI，并请求Lovable使用这些图片在站点上创建一个“免费示例图”展示框，最终成功实现。

总计花费

Cost (USD)	Detail
Lovable 25	每月订阅
Supabase 25	每月订阅
drawcraft.io 47	域名购买，一年费用
OpenAI API 5	API调用（提示和测试）费用

构建这款Web应用总计花费102美元。尽管这是一个功能简单的应用，但其目标在于验证是否能够利用基于AI的工具创建出功能性网站。

值得注意的是，部分开销可用于未来的其他项目。现在，更多新的想法等待付诸实践。