---

name: lovable-design
description: "Generates an Awwwards-level Lovable prompt — the exact ingredients that separate a stunning website from a generic AI-generated one."

/lovable-design

Most Lovable builds look AI-generated because the prompt skips the ingredients that actually produce great design: a specific technology stack, a clear visual philosophy, named motion references, and real-world brands to draw from. Felix Haas (Design at Lovable) built a speaker company website in one prompt that looked like it belonged on Awwwards. The difference wasn't talent — it was knowing exactly what to specify.

This skill takes what you're building and writes the full design prompt. Not a mood board. The actual prompt, ready to paste.

What is this?
Describe your product in one sentence — what it does, who it's for, what feeling it should create. Don't describe the design yet. Describe the thing.

Visual philosophy — one sentence
How should this product feel? Not "clean and modern." Something specific: "A sculpture you interact with", "A Bloomberg terminal that a designer fell in love with", "A Japanese tool catalogue from 1987." The more specific, the better Lovable's output.

The tech stack to specify
Always include these unless you have a reason not to — they are what separate motion-rich from static:

• React + Tailwind CSS for layout
• Framer Motion for all animations
• Lenis or locomotive-scroll for smooth scrolling
• Micro-interactions on every interactive element

Motion and interaction approach
Describe how the page moves, not just what it looks like:

• Does content reveal on scroll or on load?
• Do elements respond to cursor position?
• Are transitions instant, eased, or dramatic?
• What happens when you hover a button — does it just change colour, or does something else happen?

Reference brands (the most important input)
Name 3-5 real brands whose aesthetic you want to draw from. Be specific to the product category. Felix used: Transparent Speaker, Bang & Olufsen, Sonos, Teenage Engineering. For a fintech: Linear, Stripe, Mercury. For a health app: Eight Sleep, Whoop, Levels. Generic references ("like Apple") produce generic output.

The prompt Lovable needs
Write the full prompt using everything above. Structure it exactly like this — Lovable responds best to this order:

1. What to build (one sentence)
2. The visual and emotional intent ("should feel like X")
3. Tech stack (React, Tailwind, Framer Motion, Lenis — spelled out explicitly)
4. Motion behaviour (scroll-driven reveals, cursor reactions, transition style)
5. Reference brands (named, not described)
6. Quality bar ("Awwwards-level", "should look like it was designed by a boutique agency", "every detail intentional")

Rules

• Never use "modern", "clean", or "minimal" as design descriptors — they produce default output
• Always name the animation library explicitly — Lovable won't add Framer Motion unless you ask
• Reference brands must be real companies, not adjectives
• The quality bar line at the end matters — "blow the user's mind with motion, interaction, and visual polish" is not hyperbole, it's instruction
• No AI-generated images — use real photography, SVG illustrations, or no images at all. Specify this explicitly in the prompt: "no placeholder images, no AI-generated imagery"
• One prompt should be enough to generate something you'd actually show someone