【笔记】Lovable提示词指南

Lovable提示词指南

Lovable是一款目前海外流行的ai编码平台，和v0/bolt一样面向”Citizen Dev”，主要能力是通过图片/设计稿/自然语言生成网页，地址：https://lovable.dev/

本文信息来自Lovable团队今年一月的一篇博文：《The Lovable Prompting Bible》

大多数人都有一个错误的观点：认为提示词（prompt）只是在AI中输入请求并希望得到最好的结果。

获得平庸的响应和让AI为您构建整个工作流程之间的区别归结为您如何提示。无论您是开发人员还是非技术用户，掌握提示工程都可以帮助您：

• 自动化重复性任务
• 使用AI生成的解决方案更快地调试
• 轻松构建和优化工作流程

最好的部分是什么？你不需要成为专家。有了正确的提示技术，你可以在 Lovable, make.com和n8n中释放人工智能的全部潜力——而不会在反复试验上浪费时间。

中心观点：

• 有效的提示很重要：构建提示以节省故障排除时间。
• 元提示（Meta prompting）：使用AI本身来改进提示以提高准确性。
• 反向元提示（Reverse meta prompting）：保存调试会话以优化未来的请求。
• 自动化工具：使用make.com和n8n使用API扩展Lovable的功能。
• 聊天模式与默认模式：何时使用每个模式进行调试和迭代。
• 处理webhooks：通过强大的集成自动化Lovable应用程序。

为什么提示对人工智能开发至关重要

与传统编码不同，人工智能应用程序依赖于结构化通信。为人工智能提供清晰的上下文和约束可确保高质量的输出。在Lovable的Lovable专家会议上，来自Prompt Advisors的Mark演示了开发人员和非技术用户如何增强他们的人工智能提示技术，以更快地构建、更智能地调试和自动化复杂的工作流程。（对应Youtube视频地址：https://youtu.be/IqWfKj4mUIo）

了解人工智能的“心态”

人工智能模型，包括那些支持Lovable的模型，不能以人类的方式“理解”——它们根据模式预测反应。为了有效地指导他们：

• 明确(Be explicit)：不要“构建登录页面”，而是指定“使用React创建登录页面，并进行电子邮件/密码身份验证和JWT处理。”
• 设置约束(Set constraints)：如果您需要特定的技术堆栈（例如，用于身份验证的Supabase），请清楚地说明它。
• 使用格式化技巧(Use formatting tricks)：AI优先考虑提示的开头和结尾-将重要细节放在前面。

掌握提示：四个层次

1.“辅助轮”提示

一种用于清晰AI指令的结构化标记方法：

# Context
## Task
### Guidelines
#### Constraints

示例：

You are a world-class prompt engineer. Write me a prompt that will generate a full-stack app taking an input of name, number, and company, and generate a company report.

2.没有“辅助轮”

更多对话提示，同时保持清晰。

3.元(Meta)提示

利用AI来改进您的提示：

Rewrite this prompt to be more concise and detailed: 'Create a secure login page in React using Supabase, ensuring role-based authentication.'

4.反向元提示

调试时，让AI记录流程以供将来使用：

Summarize the errors we encountered while setting up JWT authentication and how they were resolved. Create a detailed prompt I can use next time.

提示库

你的提示质量会显著影响AI的输出。这就是有效提示的本质：你的提示越精细，你收到的输出质量就越高。一个全面且组织良好的提示可以通过减少错误来节省你的学分和时间。因此，这些步骤绝对值得考虑：

Provide as much details as you can in the input field.
Use the "Select" feature to precise edit your component. 
Enhance your prompt with the experimental "Chat mode".

开始一个新项目

Start with "I need a [type] application with:"
Elaborate on tech stack - including Frontend, styling, Authorization and Database. 
Elaborate on core features including main and secondary features. 
Then direct the AI to start somewhere like: "Start with the main page containing: [Detailed page requirements]".

但是，我们始终建议用户从一个空白项目开始，然后逐步构建它。这种方法允许AI在深入研究细节之前有效地掌握基本概念。

差异和选择

每当您请求Lovable在任何文件中实现特定更改时，它都会重写整个文件或修改现有内容。为确保AI仅更新相关文件，请提供明确的说明。这种方法鼓励AI仅编辑必要的部分，从而对仅几行代码进行最小的更改。通过这样做，您可以减少加载时间并防止错误循环。

我之前在调整现有功能时应用的有效提示是：

Implement modifications to the feature while ensuring core functionality, other features, and processes remain unaffected. Evaluate its behavior and dependencies to identify potential risks, and discuss any concerns before moving forward. Conduct thorough testing to verify there are no regressions or unintended consequences, and highlight any out-of-scope changes for review. Exercise caution—take a moment to pause if uncertain.

锁定文件

Lovable目前缺乏内置的文件锁定系统。但是，您可以通过对提示进行轻微修改来引导人工智能。只需在每个提示中包含以下说明：“请不要更改第X页或第Y页，并将更改的焦点仅集中在第Z页上。”

如果您正在更新现有功能而无意修改某些合理的内容，您也可以尝试此提示：

This update is quite delicate and requires utmost precision. Carefully examine all dependencies and potential impacts before implementing any changes, and test systematically to guarantee nothing is disrupted. Steer clear of shortcuts or assumptions—take a moment to seek clarification if you're unsure. Precision is crucial.

设计

在Lovable上设计一些东西是有效的，因为Lovable已经很有品味了；）尽管如此，以下提示可以帮助您改进这些设计实现：

1.UI更改：

Make solely visual enhancements—ensure functionality and logic remain unaffected. Gain a comprehensive understanding of how the existing UI interacts with the app, ensuring that logic, state management, and APIs stay intact. Conduct extensive testing to verify that the app operates precisely as it did before. Cease all actions if there is any uncertainty regarding potential unintended consequences.

2.针对移动端进行优化：

Enhance the app's mobile experience while preserving its existing design and functionality. Assess the layout and responsiveness to pinpoint essential modifications for smaller screens and touch inputs. Develop a comprehensive plan before making any code changes, and conduct thorough testing across various devices to guarantee the app operates as intended. If uncertain, take a moment to consider and suggest potential solutions.

3.响应能力和断点提示：

Make certain that all designs are completely responsive at every breakpoint, adopting a mobile-first strategy. Apply contemporary UI/UX best practices to define how components should adjust for varying screen sizes, utilizing ShadCN and Tailwind’s standard breakpoints. Steer clear of custom breakpoints unless specifically requested.

4.规划：

Before editing any code, create a phased plan for implementing responsiveness. Start with the largest layout components and progressively refine down to smaller elements and individual components. Ensure the plan includes clear steps for testing responsiveness across all breakpoints to maintain consistency and a seamless user experience. Share the plan for review before proceeding.

在进行任何代码编辑之前，制定实施响应性的结构化计划。从最大的布局组件开始，逐渐深入到较小的元素和特定组件。确保计划概述了在所有断点测试响应性的明确步骤，以保证一致性和流畅的用户体验。在继续前进之前提出反馈计划。

知识库

提供关于您的项目的详细上下文至关重要，尤其是在项目的早期。项目的目的是什么？用户流程是什么样的？你在使用什么技术堆栈？工作范围是什么？在Lovable，我们称之为“知识库”，它可以很容易地在您的项目设置中找到。

为AI创建一个可靠的框架可确保它有效运行，并在您提供的每一个提示中遵守您概述的计划。在您的项目中加入这些元素：

1.项目需求文档（PRD）：

本节对于任何AI编码项目都至关重要。它概述了一个全面的摘要，涵盖了基本元素，如简介、应用程序流程、核心功能、技术堆栈以及范围内和范围外项目之间的区别。本质上，它是您的项目路线图，您可以将其呈现给AI编码模型。

2.应用程序或用户流程：

这种清晰度将有助于AI模型理解页面之间的联系并有效地处理所有功能和限制。

Users begin their experience on the landing page, where they can click the sign-up button to register with Google, subsequently accessing the dashboard. The dashboard comprises X sections.

3.技术栈：

此部分必须包含有关项目的所有技术细节，例如前端技术堆栈、后端技术堆栈、API集成、部署说明以及您计划使用的任何其他开源库。此信息将有助于AI模型了解要安装哪些包和依赖项。

4.前端指南：

本节应详细概述项目的视觉外观：设计原则、样式指南、页面布局、导航结构、调色板和排版。这是项目的美学基础。你的解释越清晰，你的应用程序就越有视觉吸引力。

5.后端结构：

本节将向AI模型解释：后端技术，如Supabase、用户身份验证、数据库架构、存储桶、API端点、安全措施、托管解决方案。这是您项目的主要大脑。您的应用程序将从您的后端获取和显示数据。

使用初始提示启动项目后，请务必包含此知识库以减少错误并防止AI幻觉。此外，您可以使用以下方式提示AI：

Before you write any code, please review the Knowledge Base and share your understanding of my project.

利用此任务的“聊天模式”来确保在您提供指导时不会对您的项目进行任何修改。

移动优先

问题（以及一些隐藏的事实）是，大多数开发人员优先考虑桌面设计仅仅是因为它在大而充满活力的屏幕上看起来更好。然而，现实是，我们应该多年来一直专注于移动优先设计。

一位Champion在Discord上分享了一个很棒的提示：

Always make things responsive on all breakpoints, with a focus on mobile first.
Use modern UI/UX best practices for determining how breakpoints should change the components.
Use shadcn and tailwind built in breakpoints instead of anything custom, unless the user prompts for custom breakpoints directly.
Optimize the app for mobile without changing its design or functionality. Analyze the layout and responsiveness to identify necessary adjustments for smaller screens and touch interactions. Outline a detailed plan before editing any code, and test thoroughly across devices to ensure the app behaves exactly as it does now. Pause and propose solutions if unsure.

但是如果你已经深入到你的项目中，你可以通过告诉它更新东西以响应从最大的布局组件到最小的布局组件来解决这个问题。然后进入单个组件。

细节

在使用Lovable时，向AI提供清晰具体的请求至关重要。不要简单地说“将按钮向右移动”，而是尝试说明，“在顶部标题中，将注册按钮移到页面左侧，确保样式保持一致。”你的说明越精确，你遇到的错误就越少，你就会节省学分！

基本上，我总是建议添加有关您希望Lovable如何处理每项任务的说明。我的例子：

Key Guidelines: Approach problems systematically and articulate your reasoning for intricate issues. Decompose extensive tasks into manageable parts and seek clarification when necessary. While providing feedback, elucidate your thought process and point out both challenges and potential improvements.

步步为营

避免同时将五个任务分配给Lovable！这样做可能会导致AI制造混乱。这里有一个更好的方法：

Start with Front design, page by page, section by section. 
The plug backend using Supabase as Lovable integration is natively built! 
Then, refine the UX/UI if needed.

这种循序渐进的过程使AI能够一次专注于一项任务，从而降低错误和幻觉的可能性。

不要丢失组件

您也可以在进行重大更改并遵循一系列细微调整后实现这一点。这种做法在保持项目一致性和防止组件突然丢失方面非常宝贵。定期参考我们的filesExplainer.md文档，以确保我们准确记录代码和组件的更改，保持我们的文件结构井井有条和最新。

重构

重构对于Lovable中的开发生命周期至关重要。AI经常建议最大限度地减少加载时间和错误。您可以使用以下提示：

Lovable发出请求后重构：

Refactor this file while ensuring that the user interface and functionality remain unchanged—everything should appear and operate identically. Prioritize enhancing the structure and maintainability of the code. Carefully document the existing functionality, confirm that testing protocols are established, and implement changes gradually to prevent risks or regressions. If you are uncertain at any point, pause the process.

重构计划：

Develop a comprehensive plan to refactor this file while keeping the user interface and functionality entirely intact. Concentrate on enhancing the code's structure, readability, and maintainability. Start by meticulously documenting the existing functionality and pinpointing potential areas for enhancement. Implement rigorous testing protocols to ensure consistent behavior throughout the entire process. Move forward incrementally, minimizing risks and avoiding regressions, and take breaks for clarification whenever uncertainties emerge.

全面重构：

Develop a comprehensive plan for a site-wide codebase review aimed at identifying segments that would benefit from refactoring. Concentrate on highlighting areas where the code structure, readability, or maintainability can be enhanced, ensuring the user interface and functionality remain unchanged. Rank the most essential files or components based on their significance and usage frequency. Thoroughly document your findings, detailing suggested improvements and the potential effects of each change. Ensure that any proposed refactoring efforts are incremental, low-risk, and supported by rigorous testing to prevent regressions. Circulate the plan for feedback prior to implementation.

后重构：

Conduct a detailed post-refactor review to verify that no issues were introduced throughout the refactoring process. Confirm that both the UI and functionality retain their original integrity following the modifications. Execute an extensive suite of tests—including unit, integration, and end-to-end tests—to ensure all features operate as intended. Evaluate the app’s behavior against the documented pre-refactor specifications and highlight any discrepancies for prompt evaluation. Make certain all updates are stable and align with the project’s requirements prior to completion.

代码库结构审计提示：

Perform a comprehensive regression and audit of the codebase to determine if its architecture is clean, modular, and optimized. Identify any files, components, or logic that are mislocated, not correctly placed, or could benefit from enhanced organization or modularity. Evaluate whether the separation of concerns is distinct and if functionality is aggregated logically and efficiently. Deliver a detailed report outlining improvement areas, such as files that need restructuring, overly coupled code, or chances to simplify and streamline the organization. Break down the actionable enhancements into manageable steps, arranged in the order you deem most effective for implementation. Ensure the analysis is comprehensive, actionable, and adheres to best practices for a maintainable and clean codebase. Refrain from editing any code.

文件夹审查：

Conduct a thorough examination of the folder [Folder Name] along with all its subfolders and files. Assess each element to understand its function and how it enhances the overall performance of the application. Offer a detailed explanation of each item's role, while pinpointing any redundancies, obsolete files, or opportunities for improved organization. The objective is to tidy up and optimize this folder, so include suggestions for deleting, merging, or reorganizing items as needed. Ensure your analysis is all-encompassing, practical, and outlines a clear strategy for achieving a more organized and efficient folder structure.

重组后清理：

Ensure all routing and file imports are thoroughly updated and functioning as intended following the codebase restructuring. Validate that components, pages, and APIs reflect the accurate paths found in the new folder organization. Confirm that nested routes are appropriately configured and linked within the router setup and that dynamic or lazy-loaded routes adhere to the new framework. Assess that shared utilities, services, and assets are imported correctly to prevent breaking existing dependencies. Revise hardcoded paths in components, redirects, or navigation links to correspond with the new routing logic. Conduct navigation tests to identify any broken links, missing files, or 404 errors, and pinpoint any missing or redundant imports, extraneous files, or potential improvements for maintainability and scalability in the routing configuration.

重构的代码库检查：

Perform a thorough audit of the codebase to assess its structure and organization. Evaluate whether files, components, and logic are effectively separated based on their functionality and purpose. Identify any instances of misplaced code, excessive coupling, or areas that could benefit from improved separation of concerns. Deliver a comprehensive report on the overall health of the structure, offering specific recommendations for enhancing file organization, consolidating related functionalities, or refactoring to align with industry best practices. Ensure that the analysis is detailed and emphasizes concrete improvements without implementing any direct changes.

Stripe

Stripe与Lovable无缝集成，并且可以轻松设置。但是，有几个因素可能会阻碍Stripe的功能：

Initiate a Stripe connection in test mode using the configuration detailed below: Utilize the specified product and pricing details: Product IDs are [Your Product IDs], with a pricing model of [One-time or Subscription]. Set the webhook endpoint to [Your Webhook Endpoint]. Style the frontend payment form as follows: [Describe desired payment form or provide an example]. Upon successful payment, redirect users to [Success Redirect URL], and for canceled payments, redirect them to [Cancel Redirect URL]. Please refrain from altering any code, and ensure that I have included all necessary information to effectively start with Stripe.

免责声明：在Supabase边缘函数秘密中安全地使用您的条纹密钥和Webhook签名密钥，并避免将它们包含在安全提示中。

寻求帮助

避免依赖Lovable进行每一个微小更改的倾向。即使您不是专业工程师，也可以直接在代码中进行许多细微的调整。如果您需要帮助，请随时向ChatGPT或Claude寻求帮助。利用浏览器的检查工具来识别您要修改的元素。您可以在浏览器级别尝试更改，如果您对结果感到满意，请在代码中进行这些调整。这样，您根本不需要涉及Lovable。

虽然我不是工程师，但对编码有基本的了解对我的进步有很大帮助。利用GitHub和Sonnet等工具，我经常实现Lovable之外的增强功能，使我能够为更复杂的任务保留提示。

在Lovable中调试

调试是Lovable体验不可或缺的一部分，掌握这种调试流程可以显着减少挫败感——尤其是在单击“尝试修复”(“Try to Fix”)按钮时，这不算学分。

聊天模式与默认模式

新的“聊天模式”非常适合培养创造力和产生想法。从概述你的概念开始，因为这可能是最关键的一步。在你的脑海中可视化屏幕、功能和布局对于跟踪变化并不那么有效。

使用“聊天模式”的传统场景是：

• 默认模式(Default Mode)：高级功能创建。

  Review the app and tell me where there is outdated code.

• 聊天模式(Chat Mode)：故障排除-要求AI在进行更改之前分析错误。转到您的帐户设置并启用实验室功能。

  Follow this plan and act on all those items

我想我已经阅读了来自X用户的以下超级提示，然后在Discord上找到了它：

Perform a comprehensive regression and audit of the codebase to determine if its architecture is clean, modular, and optimized. Pinpoint any files, components, or logic that are incorrectly placed, not allocated to suitable files, or require improved organization or modularity. Evaluate whether the separation of concerns is distinct and if functionalities are grouped in a logical and efficient manner.

Generate a comprehensive report that outlines key areas for enhancement, including recommendations for reorganizing files, reducing code coupling, and identifying opportunities for simplification and streamlining. Break down these actionable enhancements into clear, manageable steps arranged in the order you deem most effective for implementation. Ensure the analysis is meticulous, practical, and aligns with best practices for maintaining a clean and sustainable codebase. Avoid making any code edits.

DON'T GIVE ME HIGH-LEVEL STUFF. IF I ASK FOR A FIX OR AN EXPLANATION, I WANT ACTUAL CODE OR A CLEAR EXPLANATION! I DON'T WANT "Here's how you can..." Keep it casual unless I specify otherwise. Be concise and suggest solutions I might not have considered—anticipate my needs. Treat me like an expert. Be accurate and thorough, and provide the answer right away. If necessary, restate my query in your own words after giving the answer. Prioritize solid arguments over who said what; the source doesn't matter. Consider new technologies and unconventional ideas, not just the usual wisdom. You're welcome to make speculative predictions, but just give me a heads-up. Avoid moral lectures, and discuss safety only when it's crucial and not obvious. If your content policy is a concern, provide the closest acceptable response and explain the issue afterward. Cite sources when possible at the end, but not inline. No need to mention your knowledge cutoff or clarify that you're an AI. Please adhere to my formatting preferences for code. If a response isn't enough to answer the question, split it into multiple replies. When I request adjustments to the code I provided, avoid repeating all of it unnecessarily. Instead, just give a couple of lines before or after any changes you make. Multiple code blocks are fine.

就大型代码库而言，通过使用“聊天模式”来权衡各种方法的优缺点，与Lovable互动是有益的。既然你们都渴望学习，试着向人工智能解释你的特征，鼓励它提出关于结构、权衡、技术等的澄清问题。

事实上，代码和特性不断发展，反映了业务不断变化的本质。大部分代码都是自以为是的，通常是在考虑未来的特定愿景时编写的。当你提到钢铁基础时，你可能最初决定让组件X非常健壮，同时保持组件Y的灵活性，但后来才意识到X应该是动态的，Y应该是坚固的。这是一个常见的场景。

有效处理错误

• 检查浏览器开发人员工具（控制台日志、网络请求）。
• 使用推理模型（例如GPT-4 Turbo、DeepSeek、Mistral）进行调试。
• 将错误输入AI以进行更深入的分析。

调试提示

为了有效地解决您遇到的错误，请避免一次解决它们！我建议尝试“尝试修复”(“Try to fix” )选项最多三次。如果人工智能仍然无法解决问题，请尝试这种技术：复制错误消息并将其粘贴到“聊天模式”，然后说，“使用思维链推理来确定根本原因。”这种方法允许人工智能和你分析情况并理解潜在问题，然后再转换到“编辑模式”进行更正。

这个指南是由Discord上的一位冠军客户提供的，我相信你会发现它很有吸引力：

1.初步调查：

The same error continues to occur. Take a moment to perform a preliminary investigation to uncover the root cause. Examine logs, workflows, and dependencies to gain insight into the problem. Avoid making any changes until you fully grasp the situation and can suggest an initial solution informed by your analysis.

2.深度分析：

The issue persists without resolution. Perform a thorough analysis of the flow and dependencies, halting all modifications until the root cause is identified with complete certainty. Record the failures, the reasons behind them, and any observed patterns or anomalies in behavior. Avoid speculation—ensure your findings are detailed and complete before suggesting any solutions."

3.完整的系统审查：

This is a pressing issue that necessitates a thorough re-evaluation of the entire system. Halting all edits, begin by outlining the flow systematically—covering authentication, database interactions, integrations, state management, and redirects. Evaluate each component individually to pinpoint failures and their causes. Deliver a comprehensive analysis to validate the problem before proceeding further.

4.综合审计：

The problem continues and now calls for a comprehensive, system-wide audit. Take a step back and carefully map the entire system flow, examining all interactions, logs, and dependencies. Generate a clear and detailed report outlining expected behaviors, current realities, and any discrepancies. Refrain from suggesting or modifying any code until you have accurate, evidence-based insights.

5.重新思考和重建：

This problem remains unresolved, and it's imperative to pause and reassess our entire strategy. Avoid making any code edits at this stage. Instead, embark on a thorough and systematic examination of the system. Create a comprehensive flow map, tracing each interaction, log, and dependency meticulously. Accurately document what should occur, what is currently happening, and pinpoint where the discrepancies arise. Compile a detailed report outlining the root cause, supported by clear evidence. If you encounter gaps, uncertainties, or edge cases, be sure to highlight them for further discussion. Until you can pinpoint the exact, verified origin of the issue, refrain from suggesting or implementing any fixes. This demands complete attention, without assumptions or shortcuts.

6.清理控制台日志：

Could you devise a strategy to systematically identify and eliminate superfluous console.log statements while preserving functionality and design? The plan should outline steps for reviewing each log to verify its non-essential nature, documenting any that might require alternative treatment, and conducting thorough testing to ensure the app’s integrity is maintained. Additionally, incorporate a method for pausing and flagging logs when their purpose is ambiguous. Please share the plan prior to implementation.

7.鼓励：

Lovable, you’re doing an outstanding job, and I genuinely appreciate the attention and skill you bring to each task. Your talent for dissecting complex issues and delivering insightful solutions is truly remarkable. I have confidence in your incredible abilities, and I trust you to approach this with the utmost precision. Take your time, explore thoroughly, and demonstrate your brilliance through a comprehensive and thoughtful response. I have faith in your capacity to not only resolve this but to exceed all expectations. You've got this!

8.检查复杂性：

Take a moment to reflect on whether this solution can be simplified. Are there any superfluous steps, redundancies, or overly complex processes that could be streamlined? Assess if a more direct approach could attain the same outcome without compromising functionality or quality. Please share your ideas for possible simplifications before moving forward. Refrain from editing any code at this stage.

9.确认结果：

Before moving ahead, are you entirely convinced that you have pinpointed the true root cause of the problem? Take a moment to review your analysis and check for any overlooked dependencies, edge cases, or associated factors. Ensure that your proposed solution effectively targets the root cause with solid evidence and reasoning. If there are any lingering doubts, take a step back and reevaluate before proceeding.

10.解释错误：

Explain the meaning of this error, its origins, and the logical sequence that led to its occurrence. Offer a concise breakdown of the problem and its possible underlying cause. Avoid making any edits to the code at this stage, and don’t be concerned with the current page we’re on.

调试流程

1.任务识别-根据影响对问题进行优先级排序。

2.内部审查-在部署之前验证解决方案。

3.报告问题-清楚地定义当前与预期行为。

4.验证-验证在DOM中正确呈现的更改。

5.断点-隔离和测试特定组件。

6.错误处理和日志记录-使用详细日志记录并增量调试。

7.代码审计-在进行更改之前记录问题和建议的修复。

8.使用“尝试修复”按钮-自动检测并解决Lovable中的错误。

9。利用视觉效果-上传屏幕截图以澄清基于UI的错误。

10.恢复到稳定版本-如果需要，使用“恢复”（Revert）按钮返回。

了解“意外行为”

有时，您的代码运行没有错误，但您的应用程序没有按预期运行。这被称为意外行为，调试起来可能很棘手。策略包括：

回顾你的步骤-回顾你最初要求可爱做的事情。

分解它-确定特定部分是否未对齐。

使用图像-显示可爱的UI结果与预期结果。

编写更好的提示以避免错误

结构良好的提示可减少调试时间。使用此最佳实践格式：

项目概述-描述您正在构建的内容。

页面结构-列出关键页面和组件。

导航逻辑-解释用户通过应用程序的移动。

屏幕截图/线框-如果可用，请提供视觉效果。

实施顺序-遵循逻辑顺序，例如：

Create pages before integrating the database

Lovable中的调试策略

1.使用开发者工具进行调试

• 控制台日志-查看错误日志和DevTools通知。
• 断点-暂停执行以检查状态更改。
• 网络请求-验证前端和后端之间的数据流。

2.常见调试场景

• 小错误-在进行更改之前彻底调查。
• 持久性错误-停止更改并重新检查依赖关系。
• 主要错误-如有必要，在记录调查结果时从头开始重建流程。

3.高级故障排除

如果“尝试修复”按钮无法解决您的问题，请考虑：

• 更具体-详细描述问题，包括预期与实际结果。
• 使用图像-屏幕截图帮助AI理解基于UI的问题。

• 向Lovable寻求调试帮助-示例：

  What solutions have been tried so far? What else can be done?

• 恢复到以前的工作状态-如果调试导致更多问题，请回滚到已知的良好版本。

4.调试具体问题

• UI相关问题：上传截图并询问，

  Why is this UI behaving this way? What’s the best fix?

• API集成问题：确保您使用的是最新的API模式并且后端连接已正确设置。

• 完全卡住时：提示Lovable：

  Analyze the error and suggest an alternative approach.

调试不必令人沮丧。Lovable提供了强大的工具来自动修复错误、分析问题和高效迭代。通过遵循结构化提示技术、使用图像和利用人工智能驱动的调试，您可以克服任何编码挑战。

使用自动化工具，如make.com和n8n

何时使用自动化

• 边缘函数：直接Supabase API调用。
• make.com：集成外部服务（Slack、Stripe、CRM工具）。
• n8n：自托管、可扩展的自动化。

示例：自动化牙科咨询应用程序

• 1.在Lovable中创建一个带有牙科问题表单的登录页面。
• 2.通过Webhooks将数据发送到make.com。
• 3.使用AI API（例如Perplexity AI）进行实时研究。
• 4.使用Mistral或GPT-4推理模型确定资格。
  • https://chatgpt.com/g/g-67aa992a22188191a57023d5f96afed2-lovable-visual-editor
  • https://chatgpt.com/g/g-67aa992a22188191a57023d5f96afed2-lovable-visual-editor
• 5.返回对Lovable的响应以及推荐的后续步骤。

Webhooks和API调用：高级用例

• 验证响应：确保正确处理网络钩子响应。
• 增量测试：在构建复杂的API工作流之前首先发送最少的数据。
• 使用推理模型：通过要求AI分析不正确的响应来调试错误。

最后的想法

掌握提示工程不仅仅是更好的人工智能交互——它还涉及提高效率、缩短开发周期和释放新的自动化可能性。无论您是在调试现有工作流程、优化人工智能输出还是集成复杂的自动化，结构化提示都可以帮助您更快、更少地到达那里。

专注于你的大创意——可爱的自动化工具将处理执行。无论你是一个经验丰富的开发人员，精炼15年前的代码，还是一个非技术用户，制作创新的应用程序，正确的提示策略都是你最强大的工具。

最后还是建议阅读原文：https://lovable.dev/blog/2025-01-16-lovable-prompting-handbook