Pipeline

MotionSites.ai is a prompt library, not a builder — the real toolchain

9 min read · intermediate

"AI makes motion websites" sounds like magic until you open the tool. Our September 2026 teardown of MotionSites.ai found the truth: it's a prompt library — a well-designed collection of prompts that generate Framer-style motion components, each of which still needs a builder and a host. Understanding that stack is the real skill. Here's the pipeline we ended up recommending.

What MotionSites.ai actually is

Scroll through the gallery and you see beautiful animated sites. Open one and you get… a prompt. A long, structured prompt that, when fed to an agent (Claude Design, Codex, etc.), produces component code — usually animated React sections. The product itself is curation + prompt engineering; the generation happens inside someone else's model, and the assembly happens in your toolchain.

That's not a criticism — a good prompt library is genuinely useful. It's a reality check: "AI site builder" now means a stack of five tools working together.

The five-layer stack

1 · Prompt / idea layer

MotionSites.ai, prompt collections like awesome-gpt-image-2-prompts, and your own DESIGN.md. This layer decides taste and direction — the most important layer, and the cheapest to get wrong.

2 · Generation layer

Claude Design, GPT-image/Stitch, Huashu or Open Design. This is commodity now: any of them can render a hero section given a good prompt and spec. The differentiator is how you constrain it (see our DESIGN.md guide).

3 · Motion layer

Framer Motion for React sites, or GSAP / CSS scroll-driven animations for plain HTML. Our library's component resources (Vengeance UI, Animata, React Bits) live in this layer — 26+ animated components ready to paste into your stack.

4 · 3D layer (optional, powerful)

img2threejs takes a photo and emits a 3D scene for the web. Used sparingly — a spinning product shot, a hero object — this is what makes AI sites feel *expensive* rather than *generated*.

5 · Assembly & deploy layer

Next.js, Vite or plain static HTML, hosted on Cloudflare Pages or Workers. The magic ends here and boring engineering begins: check the output, prune the junk, ship.

Our recommended pipeline (and why)

  1. Start from a spec, not a blank prompt. Your DESIGN.md + one reference site. This alone removes most of the "AI look".
  2. Generate direction, then details. Hero + nav first, get sign-off, then the rest. Never a whole site in one prompt.
  3. Steal from component libraries knowingly. Vengeance UI / React Bits components are MIT — paste, adapt, own.
  4. Add one 3D moment max. img2threejs is the garnish, not the meal.
  5. Ship static when you can. If the site doesn't need server logic, plain HTML on Pages costs nothing and breaks never.
Dayella note: this is our internal pipeline for client work. Every template we publish is layer 5 output — clean static code you can host yourself. See the Services page if you want us to run the whole stack for you.

← Back to all guides