DEV Community: MotionSites

Website prompts for Claude Code: write a design brief, not a wish

MotionSites — Wed, 11 Nov 2026 10:19:08 +0000

Claude Code is very good at building a working website from a one-line request. It is much less good at guessing what you want it to look like. Ask for "a modern landing page for my app" and you'll get exactly that: a centered hero, a soft gradient, three feature cards, and a footer. It works. It just looks like every other AI-built page.

The fix isn't a longer prompt. It's a different kind of prompt. Good website prompts for Claude Code read like a short design brief: they make the visual decisions up front so the agent doesn't have to invent them. Here's the structure I use.

1. Start with what the page has to prove

Before any styling, tell Claude what the page is for and in what order the visitor should be convinced:

Build a single-page site for a time-tracking app for freelancers.
The page must prove, in order:
1. It's fast to start (hero)
2. It replaces spreadsheets (before/after section)
3. It's affordable (pricing with 2 tiers)
4. Other freelancers use it (leave a placeholder, no fake quotes)

This keeps Claude from padding the page with generic sections ("Why choose us", "Our mission") and gives every block a job.

2. Make the type decisions yourself

Typography is where "designed" and "default" diverge first. If you don't specify it, you get one font at five similar sizes.

Typography: a serif display font for headings, a clean sans for body.
Scale: 64 / 40 / 24 / 16px on desktop. Headings tight (line-height 1.1),
body relaxed (1.6). Max line length ~65 characters.

Three lines, and the page already looks more intentional than most.

3. Restrict the palette

AI builders love to use every color they've been given. Give fewer:

Color: warm off-white background, near-black text, ONE accent color
used only for primary buttons and links. No gradients on text.

Restraint reads as confidence. A single accent color does more than five.

4. Specify spacing and layout like a designer would

Generic pages are usually cramped and centered. Ask for the opposite:

Layout: 12-column grid, max width 1200px. Section padding 120px top/bottom
on desktop, 72px on mobile. Hero is left-aligned text with the product
visual on the right, not centered.

Asymmetry and generous whitespace are two of the cheapest ways to escape the template look.

5. Ask for one motion idea, not "animations"

"Add animations" gets you fade-ins on everything. Name one thing:

Motion: the hero product visual tilts slightly with the cursor.
Sections fade up 16px on scroll, once. Buttons have a 150ms hover state.
Respect prefers-reduced-motion.

One memorable motion beat plus quiet transitions everywhere else is what most well-designed sites actually do.

6. Tell Claude Code how to work, not just what to build

Because Claude Code is an agent working in your repo, you can also give it process constraints, which matter as much as the visuals:

Process: put design tokens (colors, type scale, spacing) in one file
first and use them everywhere. Build the hero, stop, and show me
before building the rest.

Tokens-first means later edits ("make the accent green") change one value instead of thirty. Stopping after the hero gives you a cheap checkpoint before the style spreads across the whole page.

7. Edit in small, named steps

Once the first version exists, the biggest risk is the follow-up message. "Make it about my product" is often read as permission to redesign. Be explicit:

Replace the copy and images only. Keep the layout, type scale,
colors and motion exactly as they are.

Putting it together

A full brief using all of the above is maybe 20 lines. That's the whole trick: you're not writing a better wish, you're making the five or six design decisions Claude would otherwise make by default.

If you'd rather start from briefs that already make those calls, MotionSites (motionsites.org) is a library of copy-paste website prompts written for Claude, Lovable, Bolt and Cursor, each paired with a preview of the design it builds. There's a free section too. But the structure above works with any prompt you write yourself, so try it on your next page and see how far a design brief gets you compared to a one-liner.

Free AI website prompts: how to get a designed-looking page out of them

MotionSites — Sun, 08 Nov 2026 10:07:33 +0000

Free AI website prompts are everywhere now. The problem is rarely finding one. It's that you paste a prompt into Lovable, Bolt, Cursor or Claude, and the result still looks like every other AI-built page: a centered hero, a purple gradient, three feature cards.

Most of the time that isn't the prompt's fault. It's what happens in the next five messages. Here's the workflow I use to keep a free prompt's design intact while turning it into my own site.

1. Run the prompt exactly as written

The first instinct is to "improve" the prompt before you run it: add your product name, your colors, a pricing section. Don't, yet.

A good design prompt describes layout, typography, spacing and motion in a lot of detail. If you edit it before the first build, you can't tell which parts the tool ignored and which parts you broke. Run it untouched, then compare the result against the preview of the design you copied. Write down the two or three things that came out differently. That's your fix list.

2. Swap content, not structure

This is where most pages go generic. You ask the builder to "make this about my product," and it treats that as permission to redesign. Copy changes, and so do the grid, the font scale and the animations.

Be explicit instead:

Keep the layout, spacing, typography scale and all animations exactly as they are.
Replace only:
- the headline and subheadline with: "<your headline>" / "<your subheadline>"
- the three feature blocks with: <feature 1>, <feature 2>, <feature 3>
- the primary color with <#hex>
Do not add or remove sections.

Telling the tool what not to touch matters more than telling it what to change.

3. Fix one section per message

"Make it look better" gets you a new, worse design. Name the section and the problem:

"Hero headline wraps to four lines at 375px wide. Reduce the font size on mobile only."
"The feature cards have different heights. Make them equal height and align the buttons to the bottom."
"The background animation stutters on scroll. Pause it when the hero is out of view."

One section, one concrete problem, one message. You can see what changed and roll back if it gets worse.

4. Replace the placeholder images early

Stock-looking placeholders make even a well-structured page feel templated. Swap in your real screenshots or product shots before you judge the design, because spacing and color balance often look different once real content is in.

5. Add sections from the same source

When you need a section the prompt didn't include (pricing, FAQ, testimonials), don't ask the builder to invent one. It will fall back to its default style and the page will look stitched together. Use a section prompt with a similar visual direction, and tell the tool to match the existing fonts, colors and spacing.

Where to get free prompts that are detailed enough

The workflow above only works if the prompt carries real design decisions. One-line prompts like "a modern SaaS landing page" give the tool nothing to preserve.

I maintain MotionSites, a library of website, section and app prompts written for AI builders. The free section includes a set of full hero websites, small CSS animation and hover effects, and 3D glass icon packs you can copy without a paid plan. Because the prompts are plain text, they work in Lovable, Bolt, Cursor, Claude and other AI builders.

Quick checklist

Run the prompt untouched first and note what came out differently.
Swap content with an explicit "keep the layout" instruction.
Fix one named problem per message.
Put real images in before judging the design.
Add new sections from prompts in the same visual direction.

A free prompt plus a disciplined editing pass will get you further than a long chat asking the AI to "make it pop."

3D website templates for AI builders: how to prompt a 3D hero that stays fast and readable

MotionSites — Thu, 29 Oct 2026 10:10:47 +0000

Ask Lovable, Bolt, Cursor or Claude for "a landing page with a 3D hero" and you usually get one of two results. Either a spinning cube floating over a gradient that has nothing to do with the product, or a heavy scene that pushes the headline below the fold and makes the page stutter on a laptop. The 3D part works. The design around it doesn't.

The fix isn't a better model. It's a prompt that treats the 3D object like any other design element: it has a job, a place in the layout, a budget, and a fallback. This post is a short checklist for writing that prompt, plus a snippet you can paste.

Disclosure: I work on MotionSites, a library of AI website prompts and templates. The checklist works with any builder and any prompt.

1. Give the object one job

Before you mention Three.js, decide what the object is for. Good jobs for a 3D hero object:

Show the product's idea: a glass cube for a "clarity" product, a stack of cards for a finance app, a globe for anything about distribution.
Frame the headline: the object sits behind or beside the text and leads the eye to it.
React to the user: subtle tilt on cursor move or scroll, so the page feels alive without demanding attention.

Write that job into the prompt in one sentence. "A slowly rotating abstract shape" gives the AI nothing to design around. "A frosted glass cube that refracts the headline color, sitting to the right of the headline" does.

2. Pin the layout before the scene

Most broken 3D heroes are layout bugs, not WebGL bugs. Tell the builder exactly where the canvas lives:

Two-column hero on desktop: text left (about 45% width), canvas right.
On mobile, the canvas goes below the headline and CTA, at a fixed height, never above them.
The headline and primary button must be visible without scrolling at 1280×720.

That last line matters more than anything about lighting. If the headline is visible, the page reads as a landing page with a 3D accent. If it isn't, it reads as a tech demo.

3. Set a performance budget in plain words

AI builders will happily load a 20 MB model and a post-processing stack if you don't say otherwise. Give them limits they can act on:

One object, one light setup, no post-processing.
Use a primitive geometry or a small glTF (under about 1 MB).
Cap device pixel ratio at 2, pause rendering when the canvas is off screen.
Lazy-load the 3D code so the text renders first.

You don't need to know the exact Three.js calls. Naming the constraint is enough for Claude or Cursor to pick a reasonable implementation, and it gives you something concrete to check.

4. Always ask for a fallback

Some visitors have reduced motion turned on, some are on low-power devices, some have WebGL disabled. Ask for:

A static image or CSS gradient version of the hero when prefers-reduced-motion is set or WebGL fails.
The same layout in both cases, so nothing jumps.

This is the detail that separates a designed 3D site from a demo, and it's almost never in a first-draft prompt.

5. Describe motion as numbers

"Smooth animation" means nothing to a model. Numbers do:

Idle rotation: about 6 degrees per second on the Y axis.
Cursor tilt: up to 8 degrees, eased over 400ms.
On scroll, the object scales from 1 to 0.85 and fades to 40% opacity by the end of the hero.

Pick two or three motions and say that nothing else moves.

A prompt snippet you can paste

Put this under your normal page description:

Hero: two columns on desktop. Left: headline, one-line subhead, primary button, all visible at 1280x720 without scrolling. Right: a Three.js canvas with one frosted glass cube that refracts the brand accent color.
Mobile: canvas goes below the button, fixed height 320px.
Performance: one object, no post-processing, devicePixelRatio capped at 2, pause rendering when off screen, lazy-load the 3D code after the text renders.
Motion: idle Y rotation about 6deg/s; tilt toward the cursor up to 8deg, eased 400ms; on scroll the cube scales to 0.85 and fades to 40% by the end of the hero. Nothing else animates.
Fallback: if prefers-reduced-motion is set or WebGL is unavailable, show a static render of the cube with the same layout.

Swap the cube for whatever object fits your product, and keep the rest.

Check the result in two minutes

After the builder finishes, check four things:

Is the headline visible at 1280×720 and on a phone, without scrolling?
Does the page still look finished with reduced motion turned on in your OS settings?
Does scrolling feel smooth on the slowest machine you have?
Can you describe the object's job in one sentence?

If any answer is no, fix that line of the prompt and regenerate rather than patching the code by hand. The prompt is the thing you'll reuse.

If you'd rather start from a finished one

Writing all of this from scratch for every project gets old. MotionSites has 550+ website prompts for Lovable, Bolt, Cursor and Claude, including 3D and Three.js designs where layout, scene and motion are already written out. There's a free section at motionsites.org/free if you want to take one apart and see how it's structured.

Free AI website design prompts: learn the structure by copying a finished one

MotionSites — Sun, 25 Oct 2026 10:06:17 +0000

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.

AI website prompts that don't look AI-generated: the 5 decisions that matter

MotionSites — Wed, 21 Oct 2026 10:08:06 +0000

Open ten sites built with Lovable, Bolt, Cursor or Claude and you'll often see the same page ten times: a centered hero on a purple gradient, three rounded icon cards, Inter at one weight, and a fade-up on every section.

The tools aren't the problem. They're very good at building exactly what they're told, and "make me a modern landing page" tells them almost nothing. So they fill every gap with the statistical average, and the average is what people now call AI slop.

The fix is not a longer prompt. It's a prompt that makes five specific decisions the model would otherwise make for you.

1. Type as a system, not a font name

"Use a nice modern font" gets you Inter. Name a pairing and give it sizes and weights:

Typography: headlines in Fraunces, weight 600, 72px on desktop / 44px on mobile,
tight letter-spacing (-0.02em). Body in Inter 16px, line-height 1.6, max width 62ch.
Labels and nav in Inter 13px uppercase, letter-spacing 0.08em.

A strong contrast between a display face and a quiet body face does more for "designed" than any gradient.

2. Color with names and one rule

Give the builder four or five named colors and a rule for the accent:

Colors: ink #0E0E10 (text), paper #F4F1EA (background), stone #D9D4C7 (borders),
accent #FF5A1F. Use the accent ONLY on the primary button and one highlighted word
in the headline. No gradients.

The "only" is the important word. Without it, the accent ends up on every icon, badge and hover state.

3. Layout described structurally

"A clean hero section" produces a centered stack. Describe position on a grid instead:

Hero: 12-column grid, 1200px container. Headline and subcopy left-aligned in
columns 1-7. Product screenshot in columns 7-12, bleeding 80px off the right edge,
slightly overlapping the headline column. Primary and secondary buttons inline,
not stacked.

Then say what you don't want. Builders respond well to explicit bans:

Do not: center the hero, use three identical feature cards, use emoji as icons,
add decorative blobs.

4. One motion moment, with timing

Asking for "smooth animations" gets you a fade-up on every block, which reads as template. Pick one moment and spec it like a designer would:

Motion: one moment only. On load, the hero screenshot scales from 1.05 to 1 and
fades in over 900ms, cubic-bezier(0.16, 1, 0.3, 1). Everything else is static.
Respect prefers-reduced-motion.

Restraint is what makes the one animation feel intentional.

5. Real assets over placeholders

Generic stock illustrations and abstract gradients are the other big tell. Tell the builder what the visuals actually are, even if you swap them later:

Visuals: use a real product screenshot (placeholder at /hero.png, 16:10, with a
1px stone border and 12px radius). No illustrations. Section dividers are thin
1px lines, not waves.

Before and after

Before:

Build a modern landing page for my SaaS that helps freelancers send invoices.
Make it look clean and professional with smooth animations.

After (paste sections 1 to 5 above, then):

Page: freelancer invoicing SaaS. Sections in order: hero, a single wide
screenshot of the invoice editor, three short benefit rows (text left, small
screenshot right, alternating), pricing with two plans, FAQ, footer.
Copy tone: plain, specific, no buzzwords.

Same builder, same model. The second prompt removes most of the decisions the model would have averaged out, so the result looks like someone chose it.

A reusable template

Keep this in Lovable's Knowledge, a CLAUDE.md, or a Cursor rules file so every new page starts from it:

TYPE: [display font, weight, sizes] / [body font, size, line-height]
COLOR: [4-5 named hex values] + rule for the accent
LAYOUT: [grid, container width, where each hero element sits]
MOTION: [one moment, duration, easing] + reduced-motion
ASSETS: [what the real visuals are]
DO NOT: [the defaults you want to ban]

After the first build, take a screenshot and compare it against the prompt line by line. When something drifted, quote the exact line back to the builder instead of saying "make it look better".

Disclosure: I work on MotionSites, which publishes AI website prompts written in this format for Lovable, Bolt, Cursor and Claude. This post was written with AI assistance and edited by hand.