在没有足够时间与资源的情况下，构建自己的应用曾是一个挑战。
随着大型语言模型（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
1. **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.
2. **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.
3. **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的工具创建出功能性网站。
值得注意的是，部分开销可用于未来的其他项目。现在，更多新的想法等待付诸实践。
