Most advice about AI website design prompts is abstract: "be specific", "describe the style", "give it constraints". It's all true, and it's still hard to act on. The fastest way I know to get better at writing prompts for Lovable, Bolt, Cursor or Claude is to take a prompt that already produced a good-looking page, run it, and then take it apart.
This post walks through that exercise using free prompts, so you can do it today without paying for anything.
Where to get a finished prompt
MotionSites keeps a free shelf at motionsites.org/free. These are design directions you can copy without a paid plan. At the time of writing it mixes two kinds of things:
- Full hero or site directions, for example a travel hero with a morphing dropdown and a hero built around a refracting glass cube.
- Small CSS effects: fade-in-down, slide-out-up, sweep-to-top hover, bounce-in, hinge and similar. These are useful on their own because they're the kind of detail AI builders rarely add unless asked.
Disclosure: I work on MotionSites. The exercise below works just as well with any detailed prompt you trust.
Step 1: Run it unchanged
Paste the prompt into your builder exactly as it is. Don't add your product name yet. You want a baseline that shows what the prompt alone produces, so you can tell later which of your edits helped and which hurt.
Step 2: Highlight the decisions
Now read the prompt with four highlighters (or four comment tags) and mark every line that decides one of these:
- Layout: grid, alignment, where the visual sits relative to the headline, what overlaps what.
- Type: which faces, sizes, weights, letter-spacing, line length.
- Color: named colors and, crucially, rules about where the accent may appear.
- Motion: which element moves, how long it takes, the easing, and what stays still.
You'll notice that a good prompt has very few lines that are just mood ("premium", "sleek", "modern"). Almost every sentence pins a decision the model would otherwise make for you, and the model's default decision is the one that makes every AI site look the same.
Step 3: Change one category at a time
Swap in your own brand, but only one category per run:
Keep layout, type and motion exactly as written.
Replace the color system with: ink #111316 (text), paper #F6F4EF (background),
line #DAD6CC (borders), accent #2F6BFF. Use the accent only on the primary
button and one highlighted word in the headline.
Run it, compare with the baseline, then do the same for type, then for copy. If the page suddenly looks generic again, you know exactly which change caused it.
Step 4: Steal the structure, not the design
The real takeaway isn't the page. It's the shape of the prompt. Turn it into a skeleton you reuse:
Layout: [grid, alignment, what sits where, what overlaps]
Type: [display face + size/weight] / [body face + size/line-height]
Color: [4-5 named colors] + [one rule for the accent]
Motion: [one element, duration, easing]; everything else static
Do not: [the 3-4 defaults you want to ban]
Fill it in for your next project and you'll get noticeably more deliberate results from the same builder, even without starting from a template.
Step 5: Use the small effects as finishing touches
The CSS effects on the free shelf are worth a look even if you write everything else yourself. Asking for "smooth animations" usually gets a fade-up on every section. Asking for one named effect on one element, like a sweep-to-top hover on the primary button, reads as intentional instead.
Wrap-up
Copy a finished prompt, run it unchanged, mark its decisions, change one category at a time, and keep the skeleton. That's the whole method.
If you want more starting points, the free ones are at motionsites.org/free, and the full MotionSites catalog has 550+ website prompts across categories like landing, SaaS, AI products and portfolio.
Top comments (0)