Bessere Prompts für KI-Website-Design: Lernen am fertigen Beispiel

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.

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:

Disclosure: I work on MotionSites. The exercise below works just as well with any detailed prompt you trust.

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.

Now read the prompt with four highlighters (or four comment tags) and mark every line that decides one of these:

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.

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. Enter fullscreen mode Exit fullscreen mode 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.

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] Enter fullscreen mode Exit fullscreen mode 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.

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.

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.