完整的 Lovable 编程提示词设计指南与最佳实践

使用 Lovable 进行提示设计，策略和方法清单。

为了帮助您最大限度地利用 Lovable，我们整理了一份提示设计策略和方法清单。这些策略部分来源于我们团队的经验，部分由社区成员分享。

什么是提示设计？ 提示设计是指用于与 Lovable 交互的文本型自然语言输入。可以将其理解为您给 Lovable 的包含指令的消息。

由于 Lovable 依赖于大语言模型（LLMs），有效的提示设计策略可以显著提高其效率和准确性。同时推荐阅读 分析bolt.new系统提示词，生成前端代码的提示技巧都在这里 。

基础知识

提示是与 Lovable 应用程序交互的主要方式：

1. 欢迎界面：从预构建的提示开始，或者创建您自己的提示。
2. 构建器用户界面：使用基于聊天的界面快速迭代。

提示是所有交互的核心。

提示设计策略

这些策略通常可以结合使用，具体取决于您的用例。请随意尝试这些策略，找出最适合您的方法。虽然 Lovable 本身可以通过非常基础和通用的提示完成许多任务，但使用这些策略可以帮助您获得更好的结果。

情景化提示设计

提供上下文信息可以帮助 Lovable 理解您需求的整体范围。在请求具体任务之前，可以通过背景信息进行设定。

设定上下文

我们正在构建一个项目管理工具，帮助团队跟踪任务。
该工具应具有以下功能：
- 用户认证
- 项目创建
- 任务分配
- 报告功能
现在，第一个任务是创建项目创建的用户界面。

另一个示例：

我需要一个具有 Supabase 集成和安全认证流程的 CRM 应用程序。首先设置后端。

另一个示例：

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

渐进式提示设计

我们的经验表明，进行增量的小改动比给出一个庞大的提示并期望 AI 能完全处理好更有效。

不要这样做：

构建一个带有 Supabase、认证、Google Sheets 导出和数据增强功能的 CRM 应用程序。

推荐这样做：

1. 设置一个连接 Supabase 的 CRM 后端。
2. 添加具有用户角色的安全认证流程。
3. 集成 Google Sheets 用于导出记录。

另一个示例：

1. 设置用户信息的数据库架构。
2. 开发一个用于检索用户数据的 API 端点。

使用图像提示

最近我们新增了支持，用户可以上传带有提示的图像，并要求 Lovable 根据图像构建解决方案。

这里有两种主要的方法。第一种是简单的提示方法。

简单的图像上传提示

您可以上传一张图像，然后添加如下示例提示：

创建并实现一个尽可能类似于附图的用户界面。

这个截图显示了一个移动端的布局问题。调整边距和填充，使其在保持相同设计结构的同时具有响应性。

或者，您可以帮助 AI 更好地理解图像内容及其附加的具体信息。

带有详细指令的图像提示 通过在上传的图像中添加具体指令可以获得优秀的结果。虽然一张图胜过千言万语，但添加一些描述所需功能的文字尤其重要，因为静态图像的交互信息并不总是显而易见。

我希望您创建一个尽可能类似于截图中的应用程序。
它本质上是一个看板克隆。
它应该具有以下功能：在每列中添加新卡片（任务），更改单列内这些卡片的顺序，甚至在列之间移动这些卡片。
可以使用 Pangea home dnd npm 包来实现拖放功能。

反馈整合

审查 AI 的输出，并提供具体的反馈以进行改进。

登录表单看起来不错，但请为电子邮件字段添加验证，以确保其包含有效的电子邮件地址。

避免歧义

确保你的提示清晰且无歧义。避免使用模糊的术语，并尽可能具体地描述你的需求。

不要这样做：

让这个应用更好。

这样做：

重构该应用以清理未使用的组件并提升性能，但不改变 UI 或功能。

另一个例子：

创建一个包含用户名、电子邮件和密码字段的用户注册表单。

不具体的提示

避免不具体且宽泛的提示

创建一个用户输入的表单

添加约束条件

有时，添加约束条件可以帮助 AI 专注于重要内容，避免不必要的复杂性。

添加约束条件

创建一个简单的待办事项应用，最多同时显示 3 个任务。
包括添加、编辑和删除任务的功能。

优化此代码，但确保 UI 和核心功能保持不变。记录每项更改。

高级提示设计策略

强调无障碍性

鼓励生成符合无障碍标准和现代最佳实践的代码。这确保输出不仅功能齐全，还具有用户友好性，并符合无障碍指南。

生成一个符合无障碍最佳实践的 React 登录表单组件，包括适当的 ARIA 标签和键盘导航支持。

使用预定义的组件和库

指定使用某些 UI 库或组件，以保持项目的一致性和效率。这指导 AI 使用特定工具，确保应用具有兼容性和统一的设计语言。

使用 shadcn/ui 库创建一个响应式导航栏，并使用 Tailwind CSS 进行样式设计。

实现链式思维 (CoT) 提示

对于复杂任务，鼓励 AI 在提供解决方案之前分步处理问题。这种方法有助于分解复杂任务，从而生成更准确、全面的解决方案。

让我们一步步思考如何设置一个安全的身份验证系统：
1. 需要哪些必要组件？
2. 它们应该如何交互？
3. 提供实现代码。

多语言提示

在多语言环境中工作时，指定代码注释和文档的目标语言。这确保生成的内容对讲不同语言的团队成员可访问，提升协作效率。

生成一个计算斐波那契数列的 Python 脚本。用法语提供注释和文档。

定义项目结构和文件管理

明确项目结构，包括文件名和路径，以确保生成的代码组织良好且易于维护。这为新组件在项目中的存放位置提供了清晰指导，从而保持一致的文件组织。

创建一个名为 'UserProfile' 的新 React 组件，并将其保存为 'components/user-profile.tsx'。确保它包括一个个人头像、用户名和简介部分。

调试与问题报告

调试说明

按照以下步骤进行系统化调试：

• 任务识别：列出并优先处理所有任务。
• 内部审核：在提交之前内部验证你的解决方案。
• 报告：通过清晰、可验证的结果确认每个已完成的任务。
• DOM 验证：确保更改在 DOM 中正确呈现。提供 DOM 标签或反馈以进行验证。
• 明确问题：在继续之前，澄清任何不确定之处。
• 错误处理和日志记录：使用健壮的错误处理和详细的 console.log。在上线之前，绝不要删除日志。
• 调试工具管理：实现一个全局开关，在生产环境中禁用调试工具。
• 断点实现：添加断点以隔离与 GPT 相关的错误。
• 第三方包：在编写新代码之前检查可复用的库。
• 利用现有系统：基于已有功能构建以确保一致性。
• 代码审查：进行详细分析，记录问题，并在修改之前规划解决方案。

调试流程

系统化调试步骤：

1. 添加失败的测试用例。
2. 隔离问题并分析依赖关系。
3. 在应用修复前记录发现。

这是失败的控制台日志。分析测试用例，调查认证流程中的错误，并在理解依赖关系后提出解决方案。

系统化反馈

报告错误或请求更改时：

1. 描述当前行为和问题。
2. 概述预期行为。
3. 添加具体约束条件。

Webhook 集成偶尔失败。调查为什么 JWT 验证切换会导致此问题并提出解决方案。

修正问题时务必具体

问题会发生，有时构建会失败，生成的应用程序可能与预期不同。有效的提示可以帮助你回到正轨。同样，具体性至关重要。

避免使用通用或非常笼统的提示

什么都不行，修复它！

相反，要更加具体和详细。

使你的提示更加详细和明确

现在屏幕变成空白了，之前我还能进行编辑。
能检查一下发生了什么吗？

使用开发者控制台报告错误

如果你更懂技术，并且出现了问题，将浏览器控制台中记录的错误粘贴出来可能会非常有帮助。

通常，你会打开 开发者工具 并导航到控制台。如果有任何错误或通知可见，可以将它们复制并粘贴为提示。

使用开发者工具和控制台日志

我的应用程序不再工作了，屏幕是空白的。
这是从开发者工具控制台复制粘贴的内容，你能修复这个问题吗？
发生错误：
TypeError: Q9() is undefined at https://example.lovable.app/assets/index-DWQbrtrQQj.js
: 435 : 39117 index-DWQbrtrQQj.js:435:35112
onerror https://example.lovable.app/assets/index-DWQbrtrQQj.js:435

实际调试示例

在 Lovable 中的一个实际调试流程可能如下所示：

步骤 1：

查看来自控制台的错误日志。确定认证流程中的根本原因。

步骤 2：

现在隔离失败的测试并分析哪些依赖关系出了问题。

步骤 3：

在隔离环境中测试认证修复后，提出永久解决方案。

Lovable Prompts

为了提升您的生产力，我们添加了一些针对常见场景的专用可爱提示。

协作和流程提示

用于团队协作或调试：

审查此 GitHub 项目的结构。评估流程、依赖关系，并提出有关可扩展性的改进建议。

错误调试

小错误：

同样的错误仍然存在。暂时不要更改代码—需要彻底调查以找到确切的根本原因。深入分析日志、流程和依赖关系，并在完全理解问题后再提出解决方案。

持续性错误：

错误仍未解决。停止操作，务必以 100% 的确定性找到确切的根本原因—不要猜测或假设。详细分析流程和依赖关系的每个方面，并确保在完全理解之前不要进行任何更改。

重大错误：

这是解决此问题的最后尝试。停止所有更改，系统性地重新检查整个流程—身份验证、Supabase、Stripe、状态管理和重定向—从头开始梳理。找出问题所在及其原因，单独测试每个部分，在没有绝对确定性之前不要继续。

清理控制台日志：

仔细移除不必要的 console.log 语句，同时不影响功能或设计。检查每条日志以确保其非关键性，并记录需要替代处理的日志。方法性地进行操作，彻底测试以确认应用程序的完整性。

重构

可爱提示请求后的重构：

重构此文件，同时确保不更改 UI 或功能—所有内容的行为和外观必须完全相同。仅专注于改善代码结构和可维护性。记录当前功能，确保已进行测试，并逐步操作以避免风险或回归。

设计

UI 更改：

仅进行视觉更新—不要以任何方式影响功能或逻辑。完全了解当前 UI 如何与应用程序集成，确保逻辑、状态管理和 API 保持不变。彻底测试以确认应用程序行为与之前完全一致。

移动端优化：

在不更改设计或功能的情况下优化应用程序的移动端体验。分析布局和响应性以确定针对小屏幕和触摸交互所需的调整。在编辑任何代码之前，制定详细计划，并在各种设备上进行彻底测试，以确保应用程序的行为与当前一致。

修改现有功能：

更改此功能但不要影响核心功能、其他功能或流程。分析其行为和依赖关系以理解风险，并在进行操作之前沟通任何疑虑。彻底测试以确认无回归或意外影响。

敏感更新：

此更新非常敏感，需要极高的精确性。在更改之前，彻底分析所有依赖关系和影响，并以系统性的方法测试以确保没有问题。避免捷径或假设—如果不确定，请暂停并寻求澄清。

实施前提示

在实施重大更改之前：

规划此功能的 API 流程。包括端点、参数，以及如何与数据库连接。

实验聊天模式

聊天模式是一个实验功能，允许您切换与 Lovable 的互动方式。我们推出的聊天模式包括：

1. 默认模式：聊天并编辑您的项目。
2. 仅聊天模式：仅聊天，不编辑您的项目。

我们可能在未来推出更多聊天模式，或移除它们以试验与 Lovable 交互的不同方式。

结论

当您将增量提示、上下文指令与新引入的 Lovable Prompts 相结合时，Lovable 的提示功能将更加强大。尝试、迭代并利用这些实践，简化工作流程、高效调试并构建可靠的应用程序。