AI 编程：如何用好 Lovable

目前我最好的 AI 编程伙伴是 Lovable 和 Cursor 。bolt.new 和 windsurf，也都很不错，选择前两个是因为上限足够高。

Lovable 的网址：

https://lovable.dev/

Lovable 可能没有 bolt.new 有名，我推荐大家都试试，尤其是不懂代码的人。我刚刚看了一下，我用 lovable 一共创建了 40 个项目。

今天的文章的主要内容来自 X 和 Lovable 的文档，是 Lovable 的 Prompt 的最佳实践，期间会加入我的思考。如果要直接看原文，在这里：

https://x.com/lovable_dev/status/1873078129469821044

正文开始。

使用上下文

提供更多的背景信息是有必要的。例如：

我们正在构建一个帮助团队追踪任务的项目管理工具。

这个工具应该具有以下功能：

• 用户认证
• 项目创建
• 任务分配
• 报告生成

现在，第一个任务是创建项目创建的用户界面。

这里有点像.cursorrules,把我要做的事情的上下文交代清楚。但不要忘记最后的明确，第一个任务是什么，后面会说，这是要一步一步来，不至于让 AI 偏离我们的预期太多。再比如

我需要一个与Supabase集成并有安全认证流程的CRM(客户关系管理)应用。首先从搭建后端开始。

我们正在开发一个专注于环保产品的电商平台。需要生成一个带有类别和价格筛选功能的产品列表页面。

有一个上下文的信息，然后明确具体的任务。

任务分解

很多人在尝试 AI 编程的时候，给的一个需求都是：开发一个天气预报的应用，开发一个 2048 游戏。这也是的，我们从这个开始，获得惊艳的结果。

但我们开始真正工作的时候，不要让 AI 猜我们的需求。

对比：

不要这样：

构建一个包含所有功能的 CRM 系统

这样：

1. “设置后端”

2. "添加认证流程"

3. “添加导出功能”

这是很重要的，包括后面的“复杂功能规划”和“调试过程”都是对任务的分解：

复杂功能规划

分解思考：我们来规划认证：

1. 所需组件
2. 用户流程
3. 安全措施

调试过程：

遵循此结构：

1. 描述出了什么问题
2. 解释预期行为
3. 分享控制台错误

使用图像

这是一个重要的技巧，我们可以上传截图，尤其是针对不懂编程的用户，无法“精确描述”的时候，什么叫精确的描述？比如一个网页的布局，有导航栏、有 header 、有footer 这都是基本的，还有更复杂的专业词汇。

更好的是学会如何描述——这不难。其次是直接给参考图片，例如：

制作这个看板，支持列间拖放。使用 Pangea dnd 实现卡片在列间的移动。

截图大家自行想象。这里有一个奇怪的词汇：Pangea dnd。这是一个很专业的提出需求的方式，不仅提出了问题，还指出了解决的方向。编程这个行当里，这么多年积累了很多最佳实践。不懂编程没关系，可以知道一些词汇是什么意思。这在 AI 编程的时候很有帮助。

比如于我，包豪斯、孟菲斯、蒙德里安，我之前都没关注过，使用 AI 帮我工作之后，我需要给TA 明确的指令，就需要做一些学习。每一个专业，都有一个概念的体系，可以先弄清楚，照猫画虎。

这里还有技巧，就是往往 AI 比我们知道的都多、都深入，我们不知道怎么问，可以问 AI 。AI 给出答案，我们有一个更明确的学习方向。

有效反馈

我们在提需求的时候，不要说“让它更好”，而是说：“登录表单可以工作，但需要电子邮件验证，并在密码不匹配时提供更好的错误信息。”

本质上，还是怎么给AI更清晰的反馈。我们在和模型沟通的时候，可以抽象对抽象，具体对具体。有的时候，实在不知道问什么，可以说让交互更好，让视觉更好，但这个时候，要再次明确我们在做什么的上下文，通过上下文的关键词，模型可以关联出来至少平均线以上的水平，大概我们也知道了方向。

设置约束 & UI 更新

定义明确的边界：“创建一个仅限于显示 3 个可见任务的待办事项应用程序。在保持我们现有设计系统的同时，包含添加/编辑/删除功能。”

再比如：“仅更新视觉设计。保持所有功能和 API 调用不变。专注于改进移动布局。”强调改进视觉的同时，明确不需要更改的内容是有必要的。以此类推。

无障碍的要求

具体说明需求：“生成一个带有 ARIA 标签、键盘导航和适当焦点管理的登录表单”——这也能需要我们有一定的这方面的知识。知道就可以，差别就在于知道与否。

AI 编程时代，好奇、求知欲要更重要一些，知道不知道有的时候就是差别。

道在屎溺，和 AI 一起工作很简单，我原本想把这些能力写得花里胡哨，好像我多能，但随着我用的越多，越有体验的时候，我觉得简简单单就好，如实呈现，对大家有帮助就好。

不必期望 Lovable 完成所有的工作，当你试过以上的方式，Lovable 似乎无法改进的时候，Cursor 就要登场了。