对于许多有想法但缺乏时间与资源的开发者而言，自主创建应用曾是一个遥不可及的梦想。
随着大型语言模型（LLMs）的飞速发展，非开发者群体构建应用或软件产品的机会显著增加。正如安德烈·卡帕西（Andrej Karpathy）所强调的“vibe coding”概念，编程的门槛正被大幅降低。
为了验证“vibe coding”的潜力，并尝试在短短两天内构建并部署一个Web应用，一项实验性项目应运而生。该项目的目标并非追求完美，而是旨在交付一个功能完备的最小可行产品（MVP）。
本文将全面概述整个开发过程，包括所用工具的实用技巧和相关成本。如果读者希望抢先体验最终产品，可访问 drawcraft.io。
在此项目中，核心工具包括 Lovable、Supabase 和 Netlify。
- Lovable：一款备受推崇的AI应用构建器。
- Supabase：一个处理所有后端相关流程的开发平台，其与Lovable的无缝集成是一大优势。
- Netlify：用于应用部署，并可选择性地处理域名购买事宜。
在开始使用这些工具之前，建议先行观看一些关于其使用和开发的YouTube视频。值得强调的是，本文内容与上述任何工具提供商均无利益关联。
使用Lovable构建应用
Lovable 提供免费和付费套餐。其专业版（Pro Plan）包含多种定价选项，对应不同的积分额度。本项目选择了每月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 生成的初始设计效果良好，但仍需进行一些微调。在首次提示词之后，主要通过包含单一指令的消息进行迭代优化。值得一提的是，用户也可以直接在Lovable的用户界面上编辑代码，且这些代码修改不会消耗积分。
Supabase集成
尽管在最初的提示词中包含了添加用户认证和订阅功能的要求，但由于缺乏合适的后端支持，这些功能未能正常运行。此时，Supabase 便发挥了关键作用。
将Supabase集成到Lovable项目中非常便捷。用户只需创建一个Supabase账户，然后按照Lovable用户界面上的指引，即可完成项目集成。
Supabase集成完成后，Lovable 能够自动编写代码，以实现用户认证、创建数据库表以及添加用于处理后端任务的边缘函数。
曾遇到的一个问题是，应用会持续发送请求来检查用户订阅状态。通过手动检查网络活动发现了此问题。为了让Lovable修复这个问题，需要通过数条指令。对于经验丰富的开发者而言，这可能是一个简单的修复，但为了快速推进并完全依赖Lovable，选择了这种方式。
Supabase 的免费额度很快被消耗殆尽，因此不得不升级到每月25美元的付费计划。此前提到的持续请求问题，很可能消耗了大部分免费额度。
GitHub集成
Lovable 使得GitHub账户集成变得非常简便。用户可以按照Lovable用户界面上的指示，完成集成并在GitHub中创建项目。
重要提示：Lovable 对项目所做的每一次更改，都会自动提交到 GitHub 上的默认分支。这是一种双向集成，因此如果用户通过 IDE 或 GitHub UI 在默认分支上进行修改，这些更改也会自动同步到 Lovable 项目中。
另一个在多分支工作时遇到的问题是：根据Lovable的文档，它总是提交到默认分支。项目初期，默认分支是main。然而，当创建新分支并将其设为默认分支时，Lovable并未同步这一变更，仍旧将提交推送到main分支。
虽然有YouTube视频曾展示在Lovable用户界面上更改分支的选项，但目前未能找到该选项，这可能意味着Lovable的用户界面已更新，该功能或许已不再存在。尽管这并未对项目构成实质性阻碍，但其解决方案仍有待探索。
应用部署
部署应用有多种选择。在这一步骤上，并未进行过多深思熟虑。鉴于此前看到有其他开发者使用Netlify，便决定尝试。
Netlify 提供免费套餐，其额度足以满足项目需求。该套餐提供300积分，每次部署消耗15积分。
创建账户后，用户可以按照指示，在Netlify上添加自己的GitHub项目。
用户可以免费使用Netlify提供的域名，也可以通过Netlify购买自定义域名。当然，也可以在其他地方购买域名，然后在Netlify上进行配置使用。
重要提示：默认情况下，每当提交到生产分支时，Netlify都会自动部署站点。如前所述，Lovable 会自动将提交推送到默认分支。因此，如果将默认分支用作生产分支（这绝非最佳实践），那么每当在Lovable上进行更改时，Netlify都会触发部署。这样做的问题是会迅速消耗免费的Netlify积分。
Lovable的表现
Lovable 在整合整个Web应用方面表现出色。然而，最终产品并非完美无瑕。在站点部署并投入使用后，发现了一些问题。幸运的是，这些问题都相对轻微，并且可以通过Lovable指令进行修复。
为了在 drawcraft.io 上添加一些示例图，曾尝试通过在聊天中附加图片的方式在Lovable中实现，但未能成功。随后，将示例图上传到GitHub UI，并指示Lovable利用这些图片在网站上创建一个“免费示例图”区域，最终取得了成功。
项目成本概览
具体成本如下：
- Lovable：每月订阅费 25 美元。
- Supabase：每月订阅费 25 美元。
- drawcraft.io：域名购买费用 47 美元（一年）。
- OpenAI API：提示词生成与测试的 API 调用费用 5 美元。
总计花费102美元，成功构建了首个Web应用。尽管这是一个功能相对简单的应用，但其核心目标在于验证是否能利用基于AI的工具，在短时间内实际构建出一个功能性网站。
值得注意的是，其中一些支出（如订阅费）也可用于其他项目。此后，开发者便可将更多创新想法付诸实践。
