MotionSites Web Builder

Average AI websites happen for three reasons: a vague plan, no real media, and nobody looking at the result. This skill fixes all three. Follow the workflow every time; the steps are what make the output great.

Workflow

1. Read the brief and decide (don't interrogate)

Settle these five things, briefly, in your head or in one short message:

• What and who: the product or person, and the visitor you are persuading.
• Mood in three words (e.g. "calm, expensive, nocturnal").
• The signature: the one memorable idea this page will be known for (media, interaction or type moment). Pick from references/techniques.md or invent one.
• Output: a single index.html (default: CDN only, opens anywhere), the user's existing stack (React/Next/Vite...), or a prompt only for another builder (see references/builders.md).
• Scope: a hero (default when unspecified), or a full landing page.

Only ask a question if you can't proceed without it (e.g. the brand name for a real company). Otherwise choose and say what you chose.

2. Study the closest examples

Open examples/INDEX.md. These are the most-liked free prompts on motionsites.ai, real designs people love. Pick the 2, 3 closest to the brief (by category, traits and feel) and read them in full. They set the bar for:

• Precision: exact fonts, hex/HSL tokens, px and clamp() sizes, letter-spacing, durations and easings, z-index layers, breakpoints.
• Restraint: what they leave out.
• Structure: how a hero is layered and choreographed.

Borrow structure, precision and techniques. Never copy their brand names, copy text or exact layouts wholesale; the page must be original to this brief.