diff --git a/images/mastering-hero.png b/images/mastering-hero.png
new file mode 100644
index 0000000..bcfe1a8
Binary files /dev/null and b/images/mastering-hero.png differ
diff --git a/prompting/prompting-one.mdx b/prompting/prompting-one.mdx
index f099703..b84ba5d 100644
--- a/prompting/prompting-one.mdx
+++ b/prompting/prompting-one.mdx
@@ -1,599 +1,243 @@
---
-title: "Prompting 1.1"
-description: "Prompt structure, levels of prompting, meta/reverse meta prompting, and foundational tactics with examples."
+title: "Prompt better in Lovable"
+description: "Turn ideas into high‑quality UI faster. Use these prompt hacks to think clearer, move quicker, and build better with Lovable."
icon: "graduation-cap"
---
-## Heads up!
+
-To help you make the most out of Lovable, we compiled a list of prompting strategies and approaches. Some of these were collected from our team's experience, and others were shared with us by our community members. Since Lovable relies on large language models (LLMs), effective prompting strategies can significantly improve its efficiency and accuracy.
+### Make Lovable ask clarifying questions
-## What is prompting?
+One of the most effective ways to get better results from Lovable is to let it fill in the gaps before writing code. After stating what feature or change you want, add a line at the end of your prompt like:
-Prompting refers to the textual instructions you give an AI system to perform a task. In Lovable (an AI-powered app builder), prompts are how you “tell” the AI what to do – from creating a UI to writing backend logic. Effective prompting is critical because Lovable uses large language models (LLMs), so clear, well-crafted prompts can greatly improve the AI’s efficiency and accuracy in building your app. In short, better prompts lead to better results.
+> "Ask me any questions you need in order to fully understand what I want from this feature and how I envision it."
-## Why prompting matters
+It's recommended to use Chat Mode for this approach.
-Most people think prompting is just typing a request into an AI and hoping for the best – **not so**. The difference between a mediocre AI response and having AI build entire workflows for you comes down to _how you prompt_. Whether you’re a developer or non-technical, mastering prompt engineering in **Lovable** can help you:
+Lovable will respond with focused, often insightful follow-up questions, sometimes ones you wouldn’t have thought to specify. This process helps clarify your requirements up front and prevents misunderstanding or wasted effort later.
-- **Automate repetitive tasks** by instructing the AI precisely what to do.
-- **Debug faster** with AI-generated insights and solutions.
-- **Build and optimize workflows effortlessly**, letting AI handle the heavy lifting once properly guided.
+If you haven’t tried prompting this way, give it a shot: you’ll likely notice that new features land closer to your true intent, with less back-and-forth.
-And the best part? You don’t need to be an expert programmer. With the right prompting techniques, you can unlock AI’s full potential in Lovable without wasted trial-and-error. This playbook will take you from foundational concepts to advanced prompt strategies so you can communicate with AI effectively and build faster.
-## Understanding how AI thinks
+## Further Prompting Knowledge: Your Practical Playbook for Consistent, High‑Quality Results in Lovable
+Welcome to your comprehensive guide for high-impact prompting in Lovable!
+This playbook brings together the most effective techniques, strategies, and principles for getting the best possible results with Lovable's AI. Whether you're new to prompting or ready to refine your skills, you'll find actionable advice and clear examples to help you turn ideas into polished UI quickly and consistently.
-Unlike traditional coding, working with AI is about _communicating_ your intentions clearly. Large Language Models (LLMs) like the ones powering Lovable don’t “understand” in a human sense – they predict outputs based on patterns in their training data. This has important implications for how you should prompt:
-For consistent outcomes, it helps to structure your prompt into clear sections. A recommended format (like _“training wheels”_ for prompting) uses labeled sections for **Context**, **Task**, **Guidelines**, and **Constraints**:
+## Phase 1: Lay the Foundation
-- **Provide Context and Details:** AI models have no common sense or implicit context beyond what you give them. Always supply relevant background or requirements. For example, instead of just saying “Build a login page,” specify details: _“Create a login page using React, with email/password authentication and JWT handling.”_ Include any tech stack or tools (e.g. “using Supabase for auth”) explicitly.
-- **Be Explicit with Instructions and Constraints:** Never assume the AI will infer your goals. If you have constraints or preferences, state them. For instance, if an output should use a specific library or remain within certain scope, **tell the model up front**. The AI will follow your instructions **literally** – ambiguities can lead to unwanted results or AI “hallucinations” (made-up information).
-- **Structure Matters (Order and Emphasis):** Thanks to transformer architecture, models pay special attention to the _beginning and end_ of your prompt. Leverage this by putting the most crucial details or requests at the start, and reiterating any absolute requirements at the end if needed. Also remember models have a fixed **context window** – overly long prompts or very long conversations may cause the AI to forget earlier details. Keep prompts focused and refresh context when necessary (e.g. remind the model of key points if a session is long).
-- **Know the Model’s Limits:** The AI’s knowledge comes from training data. It can’t know about recent events or proprietary info you haven’t given it. It will try to _sound_ confident even if it’s guessing (which leads to hallucinations). Always provide reference text or data for factual queries, or be prepared to verify its output.
+### 1. Plan before you prompt
-Think of prompting as telling a very literal-minded intern _exactly_ what you need. The clearer and more structured your guidance, the better the results. Next, we’ll dive into core principles that make a prompt effective.
+Before using Lovable, define what you're building. Skipping this step is like starting a painting without deciding what you're painting. Use a quick planning session—pen and paper, voice notes, ChatGPT, whatever works—to answer these four questions:
-## Core prompting principles: The C.L.E.A.R. framework
+- What is this product or feature?
+- Who is it for?
+- Why will they use it?
+- What is the one key action the user should take?
-Great prompts follow a set of simple principles. A handy way to remember them is **CLEAR**: **Concise, Logical, Explicit, Adaptive, Reflective**. Use these as a checklist when crafting your instructions:
+You're not writing a spec doc. You're setting direction. The more aligned your thinking, the sharper your prompts. Vague ideas produce vague outputs. Clear thinking leads to clear results.
-- **Concise:** Be clear and get to the point. Extra fluff or vague language can confuse the model. Use direct language: for example, **BAD:** “Could you maybe write something about a science topic?” **GOOD:** “**Write a 200-word summary of the effects of climate change on coastal cities**.” Avoid filler words – if a detail isn’t instructive, it’s distracting. Aim for precision and brevity in describing what you want.
-- **Logical:** Organize your prompt in a step-by-step or well-structured manner. Break complex requests into ordered steps or bullet points so the AI can follow easily. Rather than a single run-on request, separate concerns. **BAD:** “Build me a user signup feature and also show some stats on usage.” **GOOD:** _“First, implement a user sign-up form with email and password using Supabase. Then, after successful signup, display a dashboard showing user count statistics.”_ A logical flow ensures the model addresses each part of your request systematically.
-- **Explicit:** State exactly what you want and don’t want. If something is important, spell it out. Provide examples of format or content if possible. The model has a vast knowledge, but it won’t read your mind about specifics. **BAD:** “Tell me about dogs.” (Too open-ended.) **GOOD:** “**List 5 unique facts about Golden Retrievers, in bullet points.**” Likewise, if you have a desired output style, say so (e.g. “Respond in JSON format” or “Use a casual tone”). Treat the AI like a beginner: assume nothing is obvious to it.
-- **Adaptive:** Don’t settle for the first answer if it’s not perfect – prompts can be refined **iteratively**. A big advantage of Lovable’s AI (and LLMs in general) is that you can have a dialogue. If the initial output misses the mark, _adapt your approach_: clarify instructions or point out errors in a follow-up prompt. For example, _“The solution you gave is missing the authentication step. Please include user auth in the code.”_ By iterating, you guide the model to better results. You can even ask the AI how to improve the prompt itself (this is **Meta Prompting**, covered later).
-- **Reflective:** Take time to review what worked and what didn’t after each AI interaction. This is more about _you_ than the model – as a prompt engineer, note which prompt phrasing got a good result and which led to confusion. After a complex session, you might even ask the AI to **summarize the final solution or reasoning** (we’ll discuss Reverse Meta Prompting shortly). Being reflective helps you craft better prompts in the future, building a cycle of continuous improvement in your AI communication.
+**Prompt example**
-Keep these CLEAR principles in mind as you develop prompts. Next, we’ll look at specific prompting techniques from basic to advanced, including how to structure prompts and leverage the AI as a collaborator.
+```text
+Build a one-page site for a budgeting app targeted at Gen Z freelancers. The main CTA should be "Start Saving Smarter." Focus on a bold, expressive aesthetic with large text and punchy colors.
+```
-## The four levels of prompting
+### 2. Map the user journey visually
-Effective prompting is a skill that grows with practice. Here we outline four levels of prompting mastery, from structured “training wheels” to advanced meta techniques. Each level has its use-case – combine them as needed:
+Design isn't about individual screens—it's about what happens between them. The best outputs in Lovable come from clear, logical flow. Map the journey your user takes from landing on the page to completing a key action.
-
+Think in transitions:
-### **1. Structured “training wheels” prompting** (explicit format)
-
-When you’re just starting or tackling a very complex task, it helps to use a labeled structure in your prompt. This acts as _training wheels_ to ensure you provide all necessary information. A proven format in Lovable is to break the prompt into sections like:
-
-
- - **Context:** Background or role setup for the AI. (E.g. “You are a world-class Lovable AI coding assistant.”)
- - **Task:** The specific goal you want to achieve. (E.g. “Build a full-stack to-do list app with user login and real-time sync.”)
- - **Guidelines:** Preferred approach or style. (E.g. “Use React for frontend, Tailwind for styling, and Supabase for auth and database.”)
- - **Constraints:** Hard limits or must-not-dos. (E.g. “Do not use any paid APIs. The app should work on mobile and desktop.”)
-
-
-By clearly labeling each part, you leave little room for misunderstanding. For example, a prompt might look like:
-
-
- **Context:** You are an expert full-stack developer using Lovable.\
- **Task:** Create a secure login page in React using Supabase (email/password auth).\
- **Guidelines:** The UI should be minimalistic, and follow Tailwind CSS conventions. Provide clear code comments for each step.\
- **Constraints:** Only modify the `LoginPage` component; do not change other pages. Ensure the final output is a working page in the Lovable editor.
-
-
-This level of detail guides the AI step-by-step. _Training Wheels prompting_ is excellent for novices or complex multi-part tasks – it forces you to think through exactly what you need, and it helps the model by structuring the request.
-
-### 2. Conversational prompting (no training wheels)
-
-As you get comfortable, you won’t always need such rigid structure. **Conversational prompting** means you can write to the AI more naturally, similar to how you’d explain a task to a colleague, while still being clear. The key is to maintain clarity and completeness **without** the formal labels. For instance:
+- What does the user see first?
+- What builds trust?
+- What gives them confidence to act?
+- Where does that action lead?
- Let’s build a feature to upload a profile picture. It should include a form with an image file input and a submit button. When submitted, it should store the image in Supabase storage and update the user profile. Please write the necessary React component and any backend function needed for this, and ensure to handle errors (like file too large) gracefully.
+ Even a simple three‑step sketch — Hero → Features → CTA — can make your prompts 10× more effective.
-This is a more free-form prompt but still **logically ordered and explicit** about the requirements. No training wheels, yet it’s effective. Conversational prompts work well once you trust yourself not to forget important details. They keep interactions more natural, especially in ongoing chat where you’re iterating on results.
+> "You're not stacking blocks. You're guiding behavior. Every section should have a reason to exist—and a reason to lead to the next one."
-
- Even in conversational style, you can simulate structure by breaking into paragraphs or bullet points for different aspects of the request. The goal is the same: clear communication. You might use this style for quicker tasks or once the AI has already been primed with context.
-
+### 3. Get the design right first
-### 3. **Meta prompting (AI-assisted prompt improvement)**
+Your visual language is a foundation, not a polish layer. Lovable needs to know the look and feel you want—early. Otherwise, your interface might function but feel totally wrong. Do not fix design problems later. Decide them up front.
-This is an advanced technique where you literally ask the AI to help you improve your prompt or plan. Since Lovable’s AI (like ChatGPT) can reason about language, you can use it to refine your instructions. This is especially useful if you get an output that’s off-base – it could be a sign your prompt was unclear. For example:
+Choose a direction, for example:
+- Calm and elegant
+- Bold and disruptive
+- Premium and sleek
-
- Review my last prompt and identify any ambiguity or missing info. How can I rewrite it to be more concise and precise?
-
+Then feed that style directly into your prompt using buzzwords, tone descriptors, and UI patterns. You can even create a "starter style prompt" and reuse it across all sections for consistency.
-
- Rewrite this prompt to be more specific and detailed: ‘Create a secure login page in React using Supabase, ensuring role-based authentication.
-
+> "You don't prompt your way into good design. You prompt from it."
-The AI might respond with a better-structured or more detailed version of your request. This can reveal what was unclear. Essentially, you’re letting the AI act as a _prompt editor_. In Lovable, you can do this in **Chat mode** safely (since Chat mode won’t directly edit your project). Meta prompting turns the AI into a collaborator that helps you ask for what you really want. It’s a powerful way to bootstrap your prompt engineering skills – the AI can suggest improvements you hadn’t considered.
+**Prompt example**
-### 4. **Reverse meta prompting (AI as a documentation tool)**
+```text
+Use a calm, wellness‑inspired design. Soft gradients, muted earth tones, round corners, and generous padding. Font is "Inter". Overall tone should feel gentle and reassuring.
+```
-Reverse meta prompting means using the AI to summarize or document what happened _after_ a task, so you can learn or reuse it later. Think of it as asking the AI to reflect on the process and give you a prompt or explanation for next time. This is great for debugging and knowledge capture. For example, after you troubleshoot a tricky issue with Lovable, you might prompt:
+## Phase 2: Think in Systems
-
- Summarize the errors we encountered setting up JWT authentication and explain how we resolved them. Then, draft a prompt I could use in the future to avoid those mistakes when setting up auth.
-
+### 4. Prompt by component, not page
-The AI might produce a concise recap of the problem and solution, followed by a template prompt like _“Context: building auth… Task: avoid X error by doing Y…”_. This reverse meta approach helps you build a personal library of **reusable prompts** and lessons learned. In Lovable, this can be gold: the next time you face a similar task, you have a tried-and-true prompt ready to go (or at least a clear checklist to follow).
+Lovable works best when you build your UI in modular parts—not full pages at once. Asking it to generate an entire landing page is like dumping a recipe into a blender. You'll get something, but it won't be usable.
-
- Suppose you spent an hour debugging why an API call failed. Once it’s fixed, ask the AI to document that. You’ll not only reinforce your understanding, but also create material to feed into the Knowledge Base or future projects so the AI doesn’t repeat the same mistakes.
-
+Instead, approach your prompts like building with Lego bricks. Each block should have one clear purpose and structure: a hero section, a feature grid, a testimonial slider, a pricing table. Build one, review it, refine it, then move to the next.
-## Advanced prompting techniques
+When you prompt by component, you gain clarity, control, and flexibility. If something doesn't look right, you can fix just that block instead of re‑prompting an entire page. This also helps you scale your design thinking across multiple pages—components can be reused and adapted without rewriting from scratch.
-Once you’ve got the basics, it’s time to leverage more advanced strategies to get the most out of Lovable’s AI. These techniques help handle complex scenarios, reduce errors (like hallucinations), and tailor the AI’s output to your needs.
+> "A full‑page prompt gets you noise. A section‑based prompt gets you signal."
-### Zero-shot vs. Few-shot prompting
+**Prompt example**
-**Zero-Shot Prompting** means you ask the model to perform a task with _no examples_. You rely on the model’s general training to know what to do. This is the default for most prompts: you state the request, and the AI generates an answer purely from what it “knows” and understands from your prompt. Zero-shot is efficient and works well if the task is common or clearly described. For instance: _“Translate the following sentence to Spanish: ‘I am learning to code.’”_ is a zero-shot prompt – straightforward command, and the AI uses its knowledge to respond (no examples needed).
+```text
+Create a floating menu bar with glassmorphism effect. Include Home, Search, Music, Favorites, Add, Profile, and Settings icons. Add gentle floating animation and smooth hover interactions.
+```
-**Few-Shot Prompting** means you provide a couple of **examples or demonstrations** in your prompt to show the AI exactly the format or style you want. Essentially, you’re teaching by example in the prompt itself. This can dramatically improve output quality for specific formats or when the task is unusual. In a few-shot prompt, you might say:
+### 5. Design with real content
-
- Correct the grammar in these sentences:\\n**Input:** “the code not working good” → **Output:** “The code is not working well.”\\n**Input:** “API give error in login” → **Output:** “The API gives an error during login.”\\nNow **Input:** “user not found in database” → **Output:**
-
+Lovable does not work well with placeholder content like "lorem ipsum" or "feature 1 / feature 2." The model is trained to respond to structure and intent—and the fastest way to show intent is to use real words.
-By giving two examples of input-output, the AI is primed to continue with a similar pattern for the third. Few-shot prompting is useful in Lovable when you need a specific style of response (e.g., code comments in a certain format, or commit message examples). It does consume more prompt tokens (because you’re including those examples), but often yields more consistent results.
+Even if your final copy isn't ready, use copy that reflects your message. If you're building a page for a meditation app, write what a user would actually read. Don't fake it.
-
- **When to use which:**
-
- Try zero-shot first for simple tasks or when you trust the model’s built-in ability. If the results aren’t in the format or depth you want, switch to few-shot by adding an example. For instance, if you ask for a function and the output isn’t following your preferred style, show an example function with the style you like and prompt again. Few-shots shine for complex output (like writing tests cases – provide one sample test, then ask it to write more). In summary, **zero-shot for quick direct answers, few-shot for controlled style or complex instructions.**
-
-
-### Managing hallucinations and ensuring accuracy
-
-AI “hallucinations” are moments when the model confidently invents information or code that isn’t correct. In a coding platform like Lovable, hallucinations might mean the AI uses a nonexistent function, calls an API that doesn’t exist, or fabricates details in a summary. While we can’t eliminate this completely (it’s an AI limitation), we **can prompt in ways that reduce hallucinations**:
-
-- **Provide Grounding Data:** The more _reliable context_ you give, the less the AI has to guess. In Lovable, always leverage the **Knowledge Base** for your project. Include your Project Requirements Document (PRD), user flows, tech stack, etc., in the project’s context. That way, the AI’s answers will be “grounded” in the specifics of _your_ app. For example, if your app uses a certain library or has a defined data model, put that in the Knowledge Base so the AI won’t make up different ones.
-- **In-Prompt References:** When asking factual questions or code that interacts with external systems, include relevant documentation snippets or data. E.g., _“Using the API response format given below, parse the user object… [then include a small JSON example].”_ By showing the AI real data or docs, it’s less likely to fabricate functions or fields.
-- **Ask for Step-by-Step Reasoning:** Sometimes you suspect the AI might be winging it. In those cases, prompt it to show its reasoning or verification. For instance, in **Chat mode** you could say: _“Explain your solution approach before giving the final code. If there are any uncertainties, state them.”_ This chain-of-thought prompting makes the AI slow down and check itself. It can catch errors or at least reveal them in the reasoning, which you can correct.
-- **Instruct Honesty:** You can include a guideline in your prompt like _“If you are not sure of a fact or the correct code, do not fabricate it – instead, explain what would be needed or ask for clarification.”_ Advanced models often follow such instructions (they might respond with, “I’m not certain, but I assume X…” rather than just giving a wrong answer). It’s not foolproof, but it can mitigate confidently incorrect outputs.
-- **Iterative Verification:** After the AI gives an answer, especially for critical things (like calculations, or important facts, or complex code), do a verification step. You can ask the AI, or use another tool, to double-check the output. For example: _“Confirm that the above code follows the requirements and explain any part that might not meet the spec.”_ This prompt makes the AI review its work and often it will catch if it deviated from your instructions.
-
-In Lovable, hallucinations might also mean the AI creates a file or component you didn’t ask for, or takes some creative liberty that wasn’t intended. Always review AI-generated code for sanity. If something looks too “magical” or unexpected, question it. By managing hallucinations with these strategies, you maintain control over your project and ensure accuracy.
-
-### Leveraging model insights (know your AI tools)
-
-Not all AI models are the same, and even the same model can behave differently depending on settings. To get master-level results, it helps to understand the tools at your disposal in Lovable:
-
-- **Chat Mode vs Agent Mode:** Lovable provides (as of this writing) a **Chat mode** (conversational AI assistant) and an Agent/Editor mode (which directly applies changes). Use them intentionally. **Chat Mode** is excellent for brainstorming, discussing design decisions, or debugging – the AI can freely generate ideas or analysis without immediately coding. For example, you might describe an error and in Chat mode say, _“Let’s analyze this error log and figure out what went wrong.”_ The AI can then walk through potential causes. **Agent Mode**, on the other hand, is for executing changes (writing code, creating components). A typical workflow might be: outline or troubleshoot in Chat mode, and once you have a plan, switch to Agent mode to implement it with a straightforward prompt (since agent mode will modify your project files). Knowing when to use each mode keeps your development flow efficient and safe.
-- **Token Length and Responses:** Be aware of the response length. If you ask for a very large output (like a whole module of code), the AI might cut off or lose coherence if it exceeds the token limit. In such cases, break the task into smaller prompts (e.g., generate code for one function at a time). Lovable’s chat or prompt UI might show a warning if output is truncated – that’s a sign to request the remaining part or divide the work.
-- **Formatting and Code Preferences:** The AI can adapt to your formatting preferences if you state them. For example, tell it “output code in markdown format” or “follow the project’s ESLint rules” if you have them. It won’t magically know your style guide unless you include it in the context. If you prefer certain naming conventions or patterns, you can mention that in the prompt (this is part of being Explicit). Over time, as the AI sees consistent style in your project, it will mimic it – but giving gentle reminders in prompts can accelerate that alignment.
-
-In summary, treat the AI as a powerful but literal tool. Understand the modes and models you’re interacting with, and always frame your prompts to play to their strengths (structured, detailed input) while guarding against their weaknesses (forgetfulness, verbosity, hallucinations). Now, let’s translate these principles into concrete best practices for using Lovable effectively.
-
-## **Additional prompting tips**
-
-Finally, let’s cover specific tips and techniques when working in the Lovable platform. These best practices combine the general prompt engineering concepts with Lovable’s features to help you get the best outcome.
-
-### Start with a solid knowledge base
-
-Before you even write a prompt, set up your project’s Knowledge Base (in Lovable’s project settings). Include the **Project Requirements (PRD)**, user flows, tech stack details, UI design guidelines, and any backend specifics. This acts as persistent context the AI will always have. For example, if your PRD clearly lists “Out of scope: social login”, the AI is less likely to randomly add a Google login feature. You can also explicitly prompt at the start:
-
-
- _Before writing any code, read the project Knowledge Base and confirm you understand the app’s purpose and constraints._
-
+This doesn't just help Lovable generate better layouts and spacing—it helps you make smarter design decisions. A real headline might need two lines instead of one. A CTA might work better if it's a verb instead of a noun. Placeholder text hides those issues. Real content reveals them early.
-This ensures the AI internalizes your project’s context and reduces irrelevant suggestions or hallucinated features.
+> "Design loves constraints. Real content creates the right ones."
-### Be specific, avoid vagueness
+**Prompt example**
-Vague prompts lead to vague results. Always clarify _what_ you want and _how_.
+```text
+Hero section with headline: "Design Calmly." Subtext: "Turn stress into structure with Lovable." CTA: "Start Building Free." Use copy‑centered layout with generous vertical spacing.
+```
-
- **DON'T**:
+### 6. Speak atomic: buttons, cards, modals
- ```
- Make this app better.
- ```
+Lovable thinks in atoms. The smaller and more specific your UI language, the better it performs. Instead of asking for a "section with a signup," say, "Add a form with an input field for email and a rounded CTA button." These atomic instructions get interpreted as native patterns.
- **Another example:**
+Think like a system. Describe cards, badges, toggles, chips, form fields, dropdowns, etc. Don't say "a user interface" when you can say "a modal with a success toast after submit."
- ```
- Create a form for user input
- ```
-
+This atomic vocabulary also lets you layer complexity gradually. Start with a card. Then add a badge. Then add hover states. Each layer builds naturally on the last. This gives you more control and higher fidelity output—without rewriting prompts.
-
- **DO**:
+> "The smaller the part, the smarter the response."
- The latter gives clear direction on scope and expected outcome.
+**Prompt example**
- ```
- Refactor the app to clean up unused components and improve performance, without changing UI or functionality.
- ```
+```text
+Create a card with a user profile picture, name, and a follow button. Add a badge for verified users, and show a tooltip when hovering over the badge.
+```
- **Another example:**
+### 7. Use buzzwords to dial in aesthetic
- ```
- Create a user registration form with fields for username, email, and password and include a submit button.
- ```
-
+Visual style is one of the most important—and most misunderstood—parts of prompting in Lovable. It's not enough to describe layout. You need to guide the tool on vibe. Buzzwords are the fastest way to do that.
-### Incremental prompting
+Lovable understands terms like "minimal," "expressive," "cinematic," "playful," "premium," and "developer‑focused." These aren't fluff—they're promptable parameters that influence typography, spacing, shadow, border radius, and color palette.
-Resist the urge to ask for an entire complex app in one prompt. Break your development process into logical steps and prompt for one at a time.
+Use these words early in your prompts. Better yet, include them in every section. You'll get cohesive designs across the board and avoid the dreaded "default UI" look.
-
- **DON'T**:
+You can also mix and match buzzwords to evolve your tone. A page can start "bold and disruptive" in the hero and become "calm and reassuring" in the pricing section. You're not stuck with one style—you're designing with intention.
- ```
- Build a CRM app with Supabase, auth, Google Sheets export, and data enrichment.
-
- Build my entire e-commerce app with authentication, product listings, and checkout.
- ```
-
+> "Design isn't just structure. It's tone. Buzzwords define it."
-
- **DO**:
+**Prompt example**
- This step-by-step progression helps the AI stay focused and accurate, and you can catch issues early:
+```text
+Design a landing page hero that feels premium and cinematic. Use layered depth, translucent surfaces, soft motion blur, and dramatic contrast between headline and background.
+```
- ```
- Set up a Supabase-connected CRM backend.
- ```
+## Phase 3: Build with Precision
- ```
- Great! Could you please add a secure authentication flow with user roles?
- ```
+### 8. Use prompt patterns for layouts
- ```
- Thank you! The next step is to integrate Google Sheets to export records.
- ```
+Prompts are easier to write—and far more effective—when you use structured, repeatable patterns. Think of them as layout recipes. Rather than trying to explain your layout from scratch every time, describe it using a consistent rhythm.
- **Another example:**
-
- ```
- Set up a database schema for user information.
- ```
-
- ```
- Develop an API endpoint to retrieve user data please
- ```
-
-
-### Include constraints and requirements
-
-Don’t shy away from spelling out constraints. If something _must_ or _must not_ be done, say so.
-
-
- **Adding constraints**
-
- ```
- Create a simple to-do app with a maximum of 3 tasks visible at a time.
- Include the ability to add, edit, and delete tasks.
- ```
-
- ```
- Optimize this code, but ensure the UI and core functionality remain unchanged. Document each change you make.
- ```
-
- ```
- Use at most 3 API calls for this, and ensure no external library is required.
- ```
-
- ```
- The page should display a maximum of 3 tasks at a time.
- ```
-
- Such limits keep the AI from over-engineering. Adding a constraint like a max number of items or a performance target can focus the AI on what’s important.
-
-
-### Avoid ambiguity in wording
-
-If a term could be interpreted in different ways, clarify it. The clearer you are, the less the AI has to guess.
-
-
- **DON'T**:
-
- ```
- Add a profile feature
- ```
-
- ```
- Support notifications
- ```
-
-
-
- **DO**:
-
- The latter gives clear direction on scope and expected outcome.
-
- ```
- Add a user profile page with fields X, Y, Z.
- ```
-
- ```
- Send an email notification on form submission.
- ```
-
-
-### Mind your tone and courtesy
-
-While it doesn’t change functionality, a polite tone can sometimes yield better results. Phrases like “please” or a respectful ask can add context and make the prompt a bit more descriptive, which can help the AI. For example,
-
-
- _Please refrain from modifying the homepage, focus only on the dashboard component._
-
-
-This reads as polite, and it explicitly tells the AI what not to do. It’s not about the AI’s feelings – it’s about packing in detail. (Plus, it never hurts to be nice!)
-
-### Use Lovable’s modes intentionally
-
-As mentioned, utilize **Chat Mode** for planning and **Agent Mode** for building. For example, when starting a new feature, you might enter Chat Mode and brainstorm the component breakdown:
-
-
- I want to add a blog section to my app. Let’s discuss how to structure the data and pages.
-
-
-The AI might respond with an outline. Once you’re satisfied, you can switch to Agent Mode and say:
-
-
- Create a `BlogPost` page and a supabase table or schema for blog posts based on the above plan.
-
+A good layout prompt breaks the section into visual parts, clarifies their order, and defines how they're styled. Most patterns follow a "header → content → action" structure, but you can customize that flow depending on what you're designing.
-### Use formatting to your advantage
+Start building a personal prompt library. For example, write a go‑to structure for a feature grid, a testimonial slider, or a pricing table. Reuse and remix these patterns with slight modifications to match different pages.
-Structure lists or steps when appropriate. If you want the AI to output a list or follow a sequence, enumerate them in the prompt. By numbering steps, you hint the AI to respond in kind.
+This isn't about being rigid. It's about being efficient. Lovable responds best to prompt language that is structured, scoped, and predictable. Prompt patterns make you faster and your output more consistent across screens.
-
- ```
- Let's think through the process of setting up a secure authentication system:
- 1. What are the necessary components?
- 2. How should they interact?
- 3. Provide the implementation code.
- ```
+**Prompt example**
-
- _First, explain the approach. Second, show the code. Third, give a test example._
-
-
+```text
+Create a feature section with a centered headline, followed by three horizontally aligned cards. Each card includes an icon on top, a headline, and a short description. Cards should have soft shadows and lift on hover.
+```
-### Leverage examples or references
+### 9. Add visuals via URL
-If you have a target design or code style, mention it or provide an example. Providing an example (image or code snippet) gives the AI a concrete reference to emulate.
+Want your layout to feel real? Drop in product demos, Midjourney‑generated clips, or tutorial videos using URLs. Lovable supports video embeds when prompted clearly.
-
- **Setting the context**
+Prompt for placement (e.g., below hero or inside a feature card), style (e.g., rounded corners, autoplay, muted), and context (why it's there).
- ```
- We are building a project management tool that helps teams track their tasks.
- This tool should have features like:
- - user authentication
- - project creation
- - task assignments
- - reporting
-
- Now, for the first task, create the UI for project creation.
- ```
+**Prompt example**
- **Another example:**
+```text
+Embed a product demo video from Midjourney. Use this URL: https://cdn.midjourney.com/video/cb84f296-92a0-4a37-a0e3-1c9c95299488/0.mp4. Place it below the feature section in a full‑width card with a soft shadow.
+```
- ```
- I need a CRM app with Supabase integration and a secure auth flow. Start by setting up the backend.
- ```
+### 10. Layer context with the Edit button
- **Another example:**
+The Edit button is one of the most powerful features in Lovable—but only if you use it properly. Instead of rewriting full prompts when something needs to change, use the edit function to focus on specific layers or elements. This lets you iterate quickly without disturbing what's already working.
- ```
- We are developing an e-commerce platform focusing on eco-friendly products. Generate a product listing page with filters for category and price.
- ```
-
+Think of edits like design overrides. They're not replacements—they're adjustments. For example, you can select a CTA button and change just the copy, or tweak a card layout without affecting the typography of the entire section.
-### Using image prompts
+This keeps your project clean and modular. You avoid prompt bloat, you move faster, and you reduce the risk of breaking something that was already fine. Editing also gives you more confidence to experiment—since you're not starting over every time.
-Lovable even allows image uploads with your prompt, so you can show a design and say “match this style”.
+When editing, be precise in your language. Say exactly what you want to change and what should stay the same. Use direction like "replace," "update," or "adjust" instead of general statements like "make this better."
-There are two main approaches here. The first one is a simple prompting approach.
+**Prompt example (within edit)**
-
- **Simple image upload prompting**
+```text
+Change the CTA button text to "Get Started" and increase the padding to 24px horizontal. Keep the existing background color and font.
+```
- You can upload an image and then add an example prompt like this:
+## Phase 4: Iterate and Ship
- ```
- Create and implement a UI that looks as similar as possible to the image attached.
- ```
+### 11. Build with Lovable Cloud in mind
- ```
- This screenshot shows a layout issue on mobile. Adjust margins and padding to make it responsive while keeping the same design structure.
- ```
-
+Designing a layout is just one part of building a product. If you want your Lovable projects to do more than look good, you need to think about how they'll actually work—and our built in Cloud is a great place to start.
-Or, you can help AI better understand the content of the image and some additional specifics about it. Excellent results can be achieved by adding specific instructions to the image uploaded. While the image is worth a thousand words, adding a couple of your own to describe desired functionality can go a long way - especially since interactions cannot always be obvious from a static image.
+Cloud handles user authentication, databases, storage, and even edge functions—all in a way that pairs well with modern frontends. And Lovable lets you shape your UI to match these real‑world behaviors right from the prompt.
-
- **Image prompting with detailed instructions**
+When you're designing with Cloud in mind, start by anticipating:
- ```
- I want you to create the app as similar as possible to the one shown in this screenshot.
- It's essentially a kanban clone.
- It should have the ability to add new cards (tickets) in each column, have the ability to change the order of those tickets within a single column, and even move those cards between columns.
- Feel free to use the Pangea home dnd npm package for drag-and-drop functionality.
- ```
-
+- **Auth logic** — What should the UI show if the user is logged in vs logged out?
+- **Dynamic content** — Are you pulling user data, posts, items, or metrics from a table?
+- **States** — What happens if the data is empty, still loading, or fails?
-### Feedback integration
+This early thinking helps you prompt smarter sections and makes development smoother later.
-Review the AI’s output and provide specific feedback for refinements.
+**Prompt example**
-
- ```
- The login form looks good, but please add validation for the email field to ensure it contains a valid email address.
- ```
-
+```text
+If the user is logged in via Cloud, show their profile image and name in the top right. If not, display a "Log In" button and route them to the auth screen.
+```
-### Emphasizing accessibility
+> Tip: You don't need a working backend during design—but shaping your UI as if it's already there is how you future‑proof your layout.
-Encourage the generation of code that adheres to accessibility standards and modern best practices. This ensures that the output is not only functional but also user-friendly and compliant with accessibility guidelines.
+### 12. Version control is your friend
-
- ```
- Generate a React component for a login form that follows accessibility best practices, including appropriate ARIA labels and keyboard navigation support.
- ```
-
+Lovable autosaves your changes, but that doesn't mean you should move fast without thinking. If you're not keeping track of what you changed and why, you're just making noise—and you'll lose control quickly.
-### Predefined components and libraries
+Good versioning isn't about naming files. It's about thinking in iterations. Make one meaningful change at a time. Update your hero copy. Add a feature grid. Adjust the layout. Check the result. Then move forward.
-Specify the use of certain UI libraries or components to maintain consistency and efficiency in your project. This directs the AI to utilize specific tools, ensuring compatibility and a uniform design language across your application.
+This is how real design systems are built—layer by layer, with intention.
-
- ```
- Create a responsive navigation bar using the shadcn/ui library with Tailwind CSS for styling.
- ```
+Even though Lovable manages the versions in the background, adopt your own system:
- ###
-
+- Think in milestones (e.g., layout locked, content added, logic wired)
+- Use notes in your prompts (e.g., "Changed CTA text and adjusted card spacing")
+- Preview before major changes, and duplicate if you're about to take a risky leap
-### Multilingual prompting
+> "Autosave doesn't mean auto‑organized. Build intentionally. Iterate with awareness."
-When working in a multilingual environment, specify the desired language for both code comments and documentation. This ensures that the generated content is accessible to team members who speak different languages, enhancing collaboration.
+**Prompt habit**
-
- ```
- Generate a Python script that calculates the Fibonacci sequence. Provide comments and documentation in French.
- ```
-
+```text
+Before making a major change, duplicate the current version and label it. Small cost, big safety net.
+```
-### Defining project structure and file management
-
-Clearly outline the project structure, including file names and paths, to ensure organized and maintainable code generation. This provides clarity on where new components should reside within the project, maintaining a coherent file organization.
-
-
- ```
- Create a new React component named 'UserProfile' and save it as 'components/user-profile.tsx'. Ensure it includes a profile picture, username, and bio section.
- ```
-
-
-### Provide precise edit instructions (focus the AI)
-
-By default, when you ask the Lovable Agent to change something, it might rewrite an entire file or multiple files. To avoid unintended changes, be very specific about _where_ and _what_ to change. You can use Lovable’s “Select” feature to highlight a component or file, then prompt about that selection only. Or explicitly name the file/component in your prompt. For example:
-
-
- \_In the \_`Header`_component, change the signup button’s text to ‘Get Started’ and move it to the left side of the nav bar._
-
-
-This way, the AI knows to focus on `Header` component and just adjust that part. Another trick: **tell the AI what not to touch**. You might add, “Do not modify any other components or logic unrelated to the header.” This prevents the AI from wandering off and potentially breaking something else. This practice (sometimes called the “Diff & Select” approach) ensures minimal, targeted changes – resulting in faster responses and fewer regression bugs.
-
-### Locking files (workaround)
-
-Currently, Lovable might not have an explicit file-lock feature, but you can simulate it through your prompt wording. If there are critical files that the AI should never alter (maybe a complex component that is working fine), you can repeat an instruction in every prompt like:
-
-
- _Do not change the authentication.js file._
-
-
-By consistently telling the AI to refrain, you reduce the chance of unwanted edits. Similarly, if you only want the AI to work within one part of the project, explicitly constrain it:
-
-
- \_Focus changes solely on the \_`ProfilePage`_component; assume all other parts of the app remain as is._
-
-
-Being upfront about this in the prompt helps keep the AI within bounds.
-
-### Design and UI tweaks
-
-When prompting for UI changes in Lovable, clarity is crucial so you don’t break functionality:
-
-- If you want **purely visual changes**, say so. ****_“Make the login button blue and 20% larger, but do not alter any of its functionality or onClick logic.”_**** This ensures the AI doesn’t accidentally rename IDs or change logic while restyling.
-- For **responsiveness** (making a design mobile-friendly), guide the AI through a plan. For example: _“Optimize the landing page for mobile: use a mobile-first approach. Start by outlining how each section should rearrange on smaller screens, then implement those CSS changes. Use standard Tailwind breakpoints (sm, md, lg) and avoid custom breakpoints. Ensure nothing in functionality changes, just layout.”_ By providing this kind of detailed instruction, you get a thorough adaptation to mobile without breaking the desktop layout.
-- If you have a design change in mind, describing the desired outcome and any constraints (like “keep the same HTML structure, just update CSS”) will help the AI focus on the right solution. Always test the app after AI design changes to confirm everything still works as expected.
-
-### Refactoring and optimizing code
-
-As your project evolves, Lovable’s AI might suggest refactoring to improve performance or maintainability. Prompting for refactoring is an advanced but valuable use-case:
-
-- Emphasize **no change in behavior**: \_“Refactor the ****_code for clarity and efficiency, but \_ the app’s functionality and outputs must remain identical.”_**** This tells the AI the refactor should not introduce bugs or feature changes.
-- You can ask for a **refactor plan first**: \_“Scan the \_`utils/`_folder and suggest improvements in code structure or duplication. List changes but do not apply them yet.”_ The AI might give you a report of what to improve. Then you can decide which changes to prompt for implementation.
-- For large-scale refactoring, do it in stages. Prompt one module at a time, test, then move on. This pairs with the step-by-step principle. For example: first refactor the state management logic, later refactor API calls, rather than everything in one go.
-- After refactoring, it’s wise to prompt a quick **post-check**: _“Now that the code is refactored, run through a quick checklist: does the UI look the same and do all tests or key flows still pass?”_ The AI can self-verify or list things to manually check.
-
-### Debugging with AI assistance
-
-Bugs are inevitable. Lovable has a “Try to Fix” feature for quick fixes, but you can also enlist the AI through prompts:
-
-- When an error occurs, copy any **error logs or messages** into a prompt (in Chat mode ideally) and ask: _“Here’s the error and relevant code snippet – what is causing this and how can we fix it?”_ Detailed error context helps the AI pinpoint the issue.
-- Use the CLEAR principles while debugging: be Explicit about what the code was supposed to do versus what happened. Sometimes just explaining the bug in detail to the AI will lead it to the solution.
-- If the AI’s first fix doesn’t work, use the Adaptive principle: clarify what changed or provide the new error, and ask it to try again or suggest an alternative approach.
-- Leverage Chat Mode to discuss the bug: _“The fix didn’t work. The state is still undefined at runtime. What else could be wrong? Let’s think through possible causes.”_ You can have a back-and-forth until a plausible solution is found, then apply it in Agent Mode.
-
-
- For UI bugs, you can even share a screenshot (if Lovable supports image input in chat) or describe the visual issue. E.g., “The sidebar is supposed to hide on mobile, but it’s still visible. Here’s the CSS… Why might it be failing?” The AI can reason about CSS or layout issues if given enough info.
-
-- Always test after a fix. If it works, consider using Reverse Meta Prompting to have the AI summarize what the root cause was and how to avoid it in the future, enriching your knowledge base.
-
-### When (and when not) to involve the AI
-
-- A master prompter knows that sometimes, you don’t need to prompt at all. If a change is extremely small or you already know how to do it quickly (e.g., changing a text label, adjusting one padding value), it can be faster to just do it manually in the code editor. Over-relying on the AI for trivial tasks can slow you down and use up your prompt quota. Use the AI where it adds value – complex logic, boilerplate generation, multi-step operations, or things you’re unsure about. For simpler issues, you might:
- - Use your own knowledge or a quick search (or even ask ChatGPT outside of Lovable) to figure it out, especially if it avoids burning a prompt on something the AI might misunderstand.
- - Utilize developer tools: open the browser DevTools console to inspect an element or debug a JavaScript error in real time. Once you identify the fix, you can either implement it directly or confirm via a prompt.
-
-
- If you notice a button is the wrong color, it might be faster to just fix the CSS class yourself than to describe the issue to the AI and risk it changing more than intended. On the other hand, if you need to implement a new feature from scratch, that’s a perfect job for the AI – you describe the what and why, and it figures out the how in code.
-
-
-Remember, Lovable’s AI is like an assistant developer. You manage it by giving clear tasks and oversight. It can drastically speed up development, but you remain the lead who reviews and directs the work.
-
-## Applying these strategies in different tools
-
-The prompting principles above apply not just in Lovable’s chat, but anywhere you interact with AI or automation tools:
-
-### In Lovable's builder
-
-You’ll primarily use these prompts in the Lovable chat interface to build and refine your app.
-
-1. Start with a broad project prompt, then iterate feature by feature.
-2. Use Chat-Only mode when you need to discuss or debug without changing code.
-
-### W[******ith make.com or n8n (workflow automation)******](http://make.com)
-
-You might not prompt these platforms in natural language the same way, but designing an automation **still benefits from clear AI instructions**.
-
-For instance, you can have Lovable generate integration logic:
-
-
- [**_When a form is submitted, send the data to a Make.com webhook for Slack notification._**](http://Make.com)
-
-
-In fact, Lovable can help set up automation by integrating with webhooks. If your app needs to hand off tasks (like sending emails, updating a CRM), you can prompt Lovable to use Make or n8n.
-
-
- [**_After a user signs up in the app, trigger a Make.com workflow that creates a record in Salesforce._**](http://Make.com)
-
-
-Lovable will write the code to call that webhook or API. Keeping the prompt structured ensures the AI knows exactly how to connect Lovable with those external services.
-
-### **Edge cases and external integrations**
-
-Lovable integrates with many services (Stripe, GitHub, Supabase, etc.). When prompting for these, treat the integration details as part of your **Context/Constraints**. For example,
-
-
- _Connect the form to Stripe (test mode) for payments. On success, redirect to /thank-you._
-
-
-Be clear about what external services should do. The same goes for using n8n (self-hosted automation) – you might write,
-
-
- _Send a POST request to the n8n webhook URL after form submission, and wait for its response to show a confirmation message._
-
-
-Clarity here is key so the AI produces the correct calls.
-
-## Summary
-
-- Strong prompting is about **clarity, structure, and context**. Whether you’re telling Lovable to build a feature, or orchestrating a [Make.com](http://Make.com) scenario, the goal is to paint a picture of what you want.
-- Start with structured prompts if you’re unsure, and evolve to more conversational style as you gain confidence.
-- Use meta techniques to improve and learn from each interaction.
-- With practice, you’ll guide the AI like an extension of your dev team – and it will feel natural to get exactly the output you need.
-
-## Conclusion
-
-By now, you should have a solid grasp of how to craft prompts that are clear, effective, and tailored to Lovable’s AI. From the foundational CLEAR principles to advanced strategies like few-shot examples and meta prompting, these techniques empower you to get exactly what you need from the AI – no more, no less. You’ve learned to structure your requests, provide context, avoid pitfalls like hallucinations, and leverage Lovable-specific features (Knowledge Base, Chat mode, etc.) to streamline your workflow.
-
-Master-level prompting is a game changer: it turns AI from a gimmick into a reliable teammate. With practice, you’ll find that you can build apps faster, debug with less frustration, and even explore creative solutions by simply _asking the right questions_ and giving the right guidance. The key is to stay **smart, concise, direct, and adaptive** in your instructions – much like a seasoned engineer communicating with their team.
-
-Finally, always keep learning from each interaction (that Reflective habit). Every prompt/response is feedback for you to refine your technique further. As you continue to build in Lovable, you’ll develop an intuition for what the AI needs to hear to produce great results. Combine that with your own ingenuity, and there’s little you can’t achieve.
-
-**Focus on your big ideas** – let Lovable’s AI handle the execution details once you clearly tell it what to do.
+---
-Happy prompting, and happy building!
\ No newline at end of file