Build an animated website with AI

Most AI-built pages fail for one reason: the prompt describes a mood, not a page. This lesson fixes that.

Start with structure. Name the section, the reading order, and the one action you want. A hero is not "beautiful" — it is a headline, a proof line, one primary button, and a product frame.

Then lock the visual system. Pick one base color, one accent, one display face, and one body face. Write them into the prompt so the model cannot invent a fourth.

Motion comes last. Ask for one entrance, one hover, and one scroll behavior. Anything more reads as noise.

A prompt that works looks like this: layout first, color second, type third, motion fourth, technical constraints last. Copy the structure from any Motif section and replace the content.

Before you publish, check three things on a phone: does the headline fit without orphan words, is the primary action visible without scrolling, and does the page still read with animations disabled.