Website prompts that work: what to include so the AI keeps your motion values

An AI coding tool wants to be helpful, and "helpful" often means smoothing, rounding and improving. Ask for a "slow, elegant reveal" and it picks its own duration and ease. Ask for a pinned section and it chooses how long the pin lasts. Each guess is small, but together they turn a precise design into a general one. This is the same reason an AI rebuild never matches the demo.

The fix is not a longer prompt; it is a more exact one. Words describe a mood. Numbers describe a behaviour. If you care about the behaviour, write the numbers.

This is the structure of every MOTION/LAB prompt. We do not publish the prompt text, but the structure is the useful part, and you can use it for your own prompts.

1. What it does (visual). A frame-by-frame description a designer could storyboard from: what appears first, what moves, what the visitor sees at each scroll position.
2. Tech stack. Exact libraries, versions and import lines, for example GSAP and ScrollTrigger, so the AI does not choose a different animation library.
3. HTML and CSS. The skeleton with class names, sizes, positioning and overflow rules, so the structure is fixed before any motion is added.
4. Animation spec. For every tween: the target, the property, from and to, duration, ease and stagger, and its position in the timeline. For every ScrollTrigger: trigger, start, end, scrub and pin.
5. Interaction, responsive, accessibility and performance. Pointer timings, breakpoints, the reduced-motion version, cleanup, and limits on pixel ratio for 3D.
6. Knobs and acceptance criteria. Which values you may tweak, and how to check the result matches.

The numbers in the table are examples of the format, not recommendations. The point is that each row can be checked: either the code has that value, or it does not.

Add one explicit rule: "Change only content, colours and images. Do not change any motion values: durations, easings, delays, stagger, scrub, pin lengths, trigger start and end positions, or breakpoints." That single paragraph prevents most unwanted "improvements".

Put your colours in CSS variables at the top of the stylesheet and say so, so a colour change is one edit. Ask the tool to list every file it changed, and to explain any change to an animation value.

Long prompts get shortened or applied in parts by some tools. Split the work: set up the project and design tokens first, then the hero, then each section one at a time, then the footer, then a final polish pass. After each step, check what you should see before moving on. In the template viewer this is the "Build steps" feature: each step has a checkbox and a line saying what should be on screen.

If a tool limits how much you can paste, small steps are not a workaround, they are the better method.

It happens. Paste a correction that names the problem and gives the original spec: "You changed motion values that I wanted to keep. Restore every animation value to exactly what my original prompt specifies, compare your code with the spec line by line, list each difference, fix them, and from now on change only content, colours and images." The help page has this and seven more ready fix prompts for common problems.

If the result still drifts, stop prompting and start from the real files. A source package has the exact values already in the code, and you only edit around them.

• Every animation has numbers, not adjectives.
• The libraries and versions are named.
• The structure and class names are given.
• The reduced-motion behaviour is written down.
• There is a "do not change motion values" rule.
• You split the work into small steps.
• You know how you will check the result.

Choose your tool in where to paste a website prompt, and follow the full path in How to build a website with AI in 7 steps.