Table of Contents
Both of these tools promise the same thing: describe a website in a sentence, get a finished page back. So I gave them the identical prompt, at the same time, and compared what came out.
Short version: Lovable followed the brief far more closely. But the longer version matters more, because these two tools are not really competing for the same job, and knowing which one fits your work will save you more time than knowing who won one test.
In this comparison:
✓ The exact prompt I used, copy-ready, which the original walkthrough never showed
✓ A scoring rubric, so the 8 and the 5 actually mean something
✓ Both results side by side, with what each got right and wrong
✓ Which tool suits which job, which is the real decision
✓ A prompt formula that works in either one
The Two Tools
A caveat worth reading before the scores. These products change every few weeks, and both are powered by models that get updated. This was one prompt, run once, on one day. Treat it as a snapshot, not a permanent ranking, and check both tools’ current features and pricing before you commit to either.
The Prompt, in Full
The original walkthrough described the prompt but never printed it, which is the most useful part. Here it is, written to be specific enough that a tool has little room to wander:
Build a premium, futuristic SaaS landing page for an AI product. STYLE - Dark mode, editorial feel, deep blue palette (#060b1f background, #3b82f6 accents), subtle noise/grain texture over the background. - Soft lightning or aurora glow effects behind the hero. - Generous spacing, large confident typography, high contrast. SECTIONS, IN THIS ORDER 1. Sticky header: logo left, 4 nav links, one primary CTA button. 2. Hero: short headline, one-line subheading, primary + secondary buttons, glow effect behind. 3. Logo strip: "trusted by" with 5 placeholder logos. 4. Bento grid of 5 feature cards, mixed sizes, no empty gaps. 5. How it works: 3 numbered steps. 6. Testimonials: 2 columns. 7. Pricing: 3 tiers, middle one highlighted. 8. FAQ: 5 collapsible questions. 9. Modern footer: 4 link columns, newsletter field, social icons. RULES - Fully responsive; check it at 390px width. - No empty cells or placeholder "lorem ipsum" blocks. - Accessible contrast on all text.
Why this prompt is shaped like that. Vague prompts get vague pages. Naming the sections in order, giving actual hex colours, and adding rules at the end (“no empty cells”, “check it at 390px”) removes most of the guesswork. The difference between a 5 and an 8 is often the prompt, not the tool.
What Each One Built
Switch between them. These are illustrations of the two results, drawn to match what each tool produced in the test.
Illustrations based on the test, not screenshots. Swap in your own captures if you re-run it.
The Scorecard
The original gave 8 and 5 without saying how. Here are the six things I was actually judging, so you can disagree with a specific line rather than the number.
The gap is widest on effects as described and following the prompt. Figma Make produced a reasonable page; it just did not produce this page. Lovable read the brief more literally, which is exactly what you want when the brief is detailed.
One thing Lovable did that is worth noticing: it added a pricing section that the first version of the prompt did not explicitly ask for, and it fitted. Filling obvious gaps sensibly is a good sign in a generation tool. The flip side is the small empty cell in its bento grid, which is the sort of thing you always have to tidy by hand.
The More Useful Question: Which One Fits Your Work?
A single head-to-head makes a good video, but it is the wrong basis for a decision, because these tools point at different endpoints. One hands you a deployable front end; the other keeps you inside a design workflow.
| Lovable | Figma Make | |
|---|---|---|
| What you end up with | A working front end, with real code you can export | A generated design and prototype inside Figma |
| Where it lives | Its own workspace in the browser | Inside Figma, next to your existing files |
| Best when | You want something online quickly: a landing page, an MVP, a client demo with real behaviour | You already work in Figma and want a fast starting point to refine, or something to show a client before building |
| Hand-off | Developers take the code | Designers keep working in the file they already use |
| Weak spot | Generated code still needs reviewing before production | Less focused on producing deployable output |
A Prompt Formula That Works in Either Tool
In my experience the prompt matters more than the tool. Both tools improved substantially when I moved from “make a SaaS landing page” to the structured version above. The pattern is simple:
| Part | What to write | Example |
|---|---|---|
| 1. What and who | The page type and audience, in one line | “A landing page for an AI note-taking app, aimed at students” |
| 2. Style | Mood, plus actual hex colours and a font feeling | “Dark, editorial, deep blue #060b1f, accent #3b82f6, large confident type” |
| 3. Sections, in order | A numbered list. This single change fixes most bad results | “1. Sticky header 2. Hero 3. Logo strip 4. Bento grid of 5…” |
| 4. Content hints | Real wording where you have it, so you do not get filler | “Headline: Turn lectures into notes automatically” |
| 5. Rules | The constraints you keep having to fix by hand | “Responsive at 390px, no empty cells, accessible contrast” |
| 6. One change at a time | Iterate in small asks instead of one long rewrite | “Make the hero glow softer and reduce the heading to two lines” |
The trick used in the original test is a good one: ask a chat model to write the prompt first. Describe your idea loosely, ask for a detailed site-generation brief with sections and colours, then paste that into the builder. You are using one AI to be specific on behalf of another.
Before You Ship Anything It Generates
This is the part that gets skipped, and it is where “wow, it built a website” turns into a slow, inaccessible page that does not rank.
The honest limitation of both tools. They are very good at the first 80 percent and noticeably worse at the last 20. The final stretch, exact spacing, real content, performance, edge cases on small screens, is still manual work. That is not a criticism, it is just where the line currently sits, and knowing where it sits is what stops you promising a client a finished site by Friday.
Common Questions
Can I export the code and host it myself?
Lovable is built around producing real front-end code you can export and deploy, which is its main appeal if you want to own the result. Figma Make is oriented toward design output inside Figma. Both products keep changing, so check the current export options on their own sites before planning around either.
Are these free?
Both offer free credits when you sign up, which is enough to run a test like this one. Serious use means a paid plan on either. Pricing changes often, so look at their pricing pages rather than trusting any article, including this one.
Will this replace web developers?
Not on this evidence. Both tools produced a page that still needed judgement to finish: fixing a gap in a grid, checking mobile, replacing filler, tuning performance. What they replace is the slow, boring first draft, which is genuinely valuable. We looked at this in more detail here.
Which is better for a client project?
If the client needs a live site, Lovable gets you closer, faster. If the client is reviewing designs before any build, Figma Make keeps the work where your designer already is. For a paid project, treat either output as a starting point you then take responsibility for.
Why did Figma Make do worse here when Figma is a design tool?
Because this test rewarded literal prompt-following and specific visual effects, which is one narrow skill. A different test, such as matching an existing design system or producing assets a designer continues in Figma, would likely favour it. That is why the scorecard is per-criterion rather than a single number.
What other tools are worth testing?
v0, Bolt and Replit occupy similar ground, and each has its own strengths. The method in this article, one detailed prompt given to every tool and the same six criteria, is the part worth copying; the specific winners will change.
The Full Test on Video
Here is the whole comparison, including both tools generating live:
New AI tool tests, Laravel, Docker and web development tutorials every week.
Read next: SEO Best Practices for Web Developers covers the metadata and performance checks any generated page needs before launch.
Final Thoughts
On this prompt, Lovable wins clearly: 8 against 5, with the gap concentrated in following the brief and delivering the visual effects asked for. But the result that will actually change your week is the dull one: a specific, structured prompt beat a vague one in both tools, by a wider margin than the tools differed from each other.
So take the prompt above, change the sections to whatever you are building, and run it in both free tiers tonight. Then tell me in the comments which one you preferred, and on what. I read every one.
If this was useful, share it with someone about to pay for the wrong AI builder.
