Goal: Master the art of communicating with AI effectively
Estimated Time: 30-40 minutes
By the end of this module, you will:
- Understand what makes a good prompt
- Know how to be specific and clear
- Learn the power of asking questions
- Understand how to provide context
- Know how to iterate and improve prompts
- Learn common prompt patterns that work well
- Be able to get better results from Lovable
A prompt is simply the message you send to Lovable describing what you want. Prompt Engineering is the skill of writing prompts that get you exactly what you want.
Think of it like this:
- Bad prompt = Vague instructions = Confusing results
- Good prompt = Clear instructions = Great results
Good prompts help you:
- ✅ Get better results faster
- ✅ Reduce back-and-forth
- ✅ Build exactly what you envision
- ✅ Save time and credits
- ✅ Learn more effectively
💡 Beginner Tip: Don't worry - you don't need to be perfect! Even small improvements to your prompts make a big difference.
One of the best prompt engineering techniques is to let Lovable ask you clarifying questions before it builds anything.
Instead of trying to think of everything yourself, you can add this magic phrase to your prompts:
"Ask me any questions you need to fully understand what I want"
Your prompt:
Create a landing page for my business
What Lovable might build:
- Generic landing page
- Might not match what you want
- You'll need to make many changes
Your prompt:
Create a landing page for my business. Ask me any questions you need to fully understand what I want.
What Lovable does:
- Asks: "What type of business?"
- Asks: "What's your target audience?"
- Asks: "What's the main goal of the page?"
- Asks: "What style do you prefer?"
Then Lovable builds:
- Exactly what you need
- Matches your vision
- Requires fewer changes
Use it when:
- ✅ You're not sure about all the details
- ✅ You want to explore options
- ✅ You're building something complex
- ✅ You want the best possible result
- ✅ You're learning and want guidance
💡 Beginner Tip: This is especially powerful in Chat Mode! Use Chat Mode to plan, then have Agent Mode build it.
Vague prompts lead to generic results. Specific prompts lead to exactly what you want.
Vague:
Add a button
Specific:
Add a blue button in the header that says "Get Started" and links to the contact page. Make it stand out with a hover effect.
Vague:
Make an about page
Specific:
Create an About page with:
- A hero section with our company name and tagline
- A "Our Story" section with 2-3 paragraphs
- A "Meet the Team" section with 3 team member cards (name, photo, role)
- Use our brand colors (blue #0066CC and white)
- Make it match the style of our homepage
Vague:
Change the colors
Specific:
Change the primary color to #0066CC (blue) and the background to white. Update all buttons and links to use the new primary color.
Ask yourself:
- What exactly do I want? (be precise)
- Where should it go? (location matters)
- What should it look like? (style, colors, size)
- How should it behave? (interactions, functionality)
- Who is it for? (target audience)
💡 Beginner Tip: Start with the basics, then add details. You can always refine!
Context is background information that helps Lovable understand your situation, goals, and needs.
Without context, Lovable makes assumptions. With context, Lovable builds exactly what you need.
- What is this project for?
- Who is the target audience?
- What's the main goal?
- What are your brand colors?
- What's your brand voice/tone?
- What's your brand style?
- Who will use this?
- What do they need?
- What problems are you solving?
- Any specific requirements?
- Integrations needed?
- Performance needs?
Without Context:
Create a contact form
With Context:
Create a contact form for my photography business. My target audience is couples planning weddings. The form should feel elegant and trustworthy. Include fields for: event date, number of guests, budget range, and message. Use warm, romantic colors that match my brand (soft pink #FFB6C1 and gold #FFD700). Make it feel premium but approachable.
See the difference? The second prompt will create something much more tailored to your needs!
Option 1: In Your Prompt
[Context] I'm building a portfolio for a freelance designer targeting small businesses. [Request] Create a homepage that showcases my work professionally.
Option 2: Use Custom Knowledge
- Add context to your project's Custom Knowledge section
- Lovable will remember it for all future prompts
Option 3: Reference Previous Context
Using the same style and colors from my homepage, create an About page
💡 Beginner Tip: Start with basic context, then add more as you learn what matters most.
Iterative improvement means making small changes and improvements over time, rather than trying to be perfect from the start.
- Start with a basic prompt
- See what Lovable builds
- Identify what you like and don't like
- Refine your prompt
- Repeat until perfect
Create a landing page
Result: Generic landing page
Create a landing page for a coffee shop with a hero section and menu
Result: Better, but still generic
Create a landing page for "Morning Brew" coffee shop. Hero section with the shop name and tagline "Fresh Coffee, Every Morning". Add a menu section showing coffee, pastries, and sandwiches. Use warm brown and cream colors.
Result: Much better, closer to what you want
The landing page looks good, but make the hero section taller, add a "Visit Us" button, and make the menu items have images.
Result: Perfect!
- Start simple - Don't try to include everything at once
- Build incrementally - Add one feature at a time
- Test as you go - Check if things work before adding more
- Be patient - Good results take a few iterations
- Learn from each iteration - Notice what works and what doesn't
💡 Beginner Tip: Don't expect perfection on the first try! Iteration is normal and part of the process.
Format:
Create a [type of page/feature] with:
- [Feature 1]
- [Feature 2]
- [Feature 3]
Example:
Create a product page with:
- Product image gallery
- Product name and description
- Price and "Add to Cart" button
- Customer reviews section
- Related products
Format:
Create [something] in [style] using [colors/fonts/details]
Example:
Create a portfolio homepage in modern minimalist style using black, white, and gold colors with elegant typography
Format:
Create [something] similar to [reference] but [your changes]
Example:
Create a landing page similar to Apple's website but for my tech startup, using blue and white instead of black and white
Format:
First, [do this]. Then, [do that]. Finally, [do this other thing].
Example:
First, create a navigation menu at the top. Then, add a hero section below it. Finally, add a footer at the bottom.
Format:
[Describe what you want]. Ask me any questions you need to fully understand.
Example:
Create a blog homepage. Ask me any questions you need to fully understand what I want.
Format:
[What's wrong] should [what it should do]. Fix it.
Example:
The contact form button should submit the form when clicked. Fix it.
💡 Beginner Tip: Try these patterns and see which ones work best for you. Mix and match as needed!
Bad:
Make it better
Good:
Make the header darker, increase the font size, and add more spacing between elements
Bad:
Create a full e-commerce site with products, cart, checkout, user accounts, reviews, recommendations, and admin panel
Good:
Create a product listing page with product cards showing image, name, price, and "Add to Cart" button
(Then add other features one at a time)
Bad:
Create a homepage
Good:
Create a homepage for my photography business targeting wedding clients. Use elegant, romantic styling.
Bad:
Implement a responsive flexbox grid layout with CSS Grid fallback
Good:
Make the layout work well on both desktop and mobile devices
Bad:
Create a contact form
Good:
Create a contact form with name, email, and message fields. Don't include phone number or company fields.
💡 Beginner Tip: If something doesn't work, try rephrasing. Sometimes a different way of saying the same thing works better!
Let's practice writing better prompts!
Original (Vague):
Make a website
Your Task: Rewrite this to be specific. Include:
- Type of website
- Key features
- Style preferences
- Target audience
Example Answer:
Create a portfolio website for a graphic designer with:
- Homepage showcasing featured work
- About page with bio and skills
- Portfolio gallery page
- Contact page with form
Use modern, creative design with bold colors
Target audience: Potential clients and employers
Basic Prompt:
Add a navigation menu
Your Task: Add context to make it better. Include:
- Where it should go
- What links it should have
- How it should look
- Any special requirements
Example Answer:
Add a navigation menu at the top of the page with links to Home, About, Services, Portfolio, and Contact. Make it sticky (stays at top when scrolling), use our brand blue color (#0066CC), and include our logo on the left side.
Your Task: Write a prompt that asks Lovable to ask you questions.
Example:
Create a blog homepage. Ask me any questions you need to fully understand what I want, such as layout preferences, color scheme, and content structure.
Your Task: Start with a basic prompt, then refine it through 3 iterations.
Round 1:
Create a product page
Round 2: (Add more details)
Create a product page for an online store with product image, name, description, and price
Round 3: (Add even more)
Create a product page for an online store with:
- Large product image on the left
- Product name, description, and price on the right
- "Add to Cart" button
- Size and color options
- Customer reviews section below
Use a clean, modern design
Test your prompt engineering skills with these progressive challenges!
Your Task: Rewrite these three vague prompts using the techniques you learned. Make them specific, add context, and use best practices.
Vague Prompt 1:
Add a form
Vague Prompt 2:
Make it look better
Vague Prompt 3:
Add some features
💡 Hints:
- Be specific about what type of form/features
- Add context about your project
- Specify design preferences
- Include validation requirements
Check your answers: See Challenge Solutions
Your Task: Take this basic prompt and:
- Add context about your project
- Use the "ask questions" technique
- Make it specific
Basic Prompt:
Create a user dashboard
Requirements:
- Your project is a task management app
- Target users are busy professionals
- You want it to be clean and efficient
- You're not sure about all the features yet
Check your answer: See Challenge Solutions
Your Task: Start with this prompt and improve it through 3 iterations, getting more specific each time.
Starting Prompt:
Build a blog
Iteration 1: Add basic details (type, audience, key features)
Iteration 2: Add design preferences and specific features
Iteration 3: Add technical requirements and edge cases
Check your answer: See Challenge Solutions
Your Task: You want to build a restaurant website. Write a comprehensive prompt that:
- Uses the question technique
- Provides context about the restaurant
- Specifies design preferences
- Lists key features
- Includes technical requirements
Restaurant Info:
- Name: "Sunset Bistro"
- Type: Fine dining, Italian cuisine
- Target: Couples, special occasions
- Needs: Menu, reservations, location, hours
Check your answer: See Challenge Solutions
💡 Pro Tip: Try these challenges yourself first, then check the solutions. Learning comes from practice!
Before moving to Module 6, make sure you can:
- Write specific, clear prompts
- Use the "ask questions" technique
- Provide helpful context in prompts
- Iteratively improve prompts
- Use common prompt patterns
- Avoid common prompt mistakes
- Get better results from Lovable
A: As long as needed! Short prompts work for simple things, longer prompts work for complex features. Be clear, not necessarily brief.
A: Try rephrasing, adding more context, or breaking it into smaller requests.
A: Only if necessary. Plain English usually works better. Lovable understands both!
A: Yes! Breaking complex features into multiple prompts often works better.
A: Use the "ask questions" technique! Let Lovable help you figure it out.
A: If Lovable builds what you want with minimal changes needed, it's a good prompt!
Excellent work! You now understand how to communicate effectively with Lovable. You can:
- Write clear, specific prompts
- Use the question technique
- Provide helpful context
- Iteratively improve your prompts
- Use proven prompt patterns
- Avoid common mistakes
Ready for Module 6? In the next module, we'll learn how to add full-stack capabilities - authentication, databases, payments, and more powerful features!
-
Start simple, then add detail - Don't try to include everything at once
-
Use the question technique - It's one of the most powerful tools!
-
Provide context - The more Lovable knows, the better it can help
-
Iterate and improve - Your first prompt doesn't have to be perfect
-
Learn from what works - Notice which prompts get good results
-
Don't be afraid to experiment - Try different ways of saying things
-
Break complex requests into steps - Multiple simple prompts often work better than one complex one
Module 5 Complete! 🎉