Claude Code will build you a landing page, but the animation and design come out limp by default — the site screams "AI made this" 🎨 The fix is a three-part combo: ready-made MotionSites prompts + design.md from Refero Styles + a video hero from Higgsfield.
What it is and who it's for
MotionSites is a library of ready-made prompts for animated website sections: heroes, gradients, 3D blocks, moving backgrounds. It's not a builder and not an editor — it's prompts you copy and feed to an AI agent.
The logic is simple: design is the weak spot of vibe coding. An agent will write the logic, but composition and animation come out flat by default. MotionSites plugs exactly that hole: the section structure, timings and motion are already worked out for you — all you do is drop in your product.
In 2026 the "ready-made design context → agent" trick picked up two upgrades that push the result to a "premium" level: design.md from Refero Styles — the agent builds against a real design system instead of guessing — and a video hero from Higgsfield — instead of a static image, the hero runs a cinematic clip from Kling 3.0 or Seedance 2.0.
Who it clicks for: solo developers and marketers churning out SaaS / portfolio / agency landing pages — agencies charge real money for an animated site like this, and here you assemble it in an evening.
Key features
- A prompt catalog by category: SaaS, agency, portfolio, landing page, e-commerce, fintech, healthcare, Web3, real estate, automotive and more.
- Ready-made hero sections, animations, gradients, animated backgrounds, 3D blocks — copied with a single "Copy" button.
- Prompt-agnostic: works with Claude Code, Cursor, Bolt, Lovable — wherever you paste it, it runs.
- A design system in one file: styles.refero.design hosts 2000+ AI-readable design systems from real products — open a style, copy DESIGN.md (colors, typography, spacing, components, motion) and drop it into the agent's context. Free as of this check.
- Video hero: Higgsfield gives you top video models under one subscription — Kling 3.0 from Kuaishou (up to 15 s, 4K, native audio, up to 6 cuts per generation) and Seedance 2.0 from ByteDance (multimodal input: text + images + audio + video).
- The whole pipeline is "prompt → agent → deploy to Vercel/Netlify", with no separate build tool.
Getting started in 5 minutes
- Go to motionsites.ai, pick the category that matches your project, open a section you like and hit "Copy" — the prompt is on your clipboard.
- Paste it into Claude Code and add your own details: what the product is, who it's for, what stack. You get an animated site → deploy to Vercel/Netlify.
- Want the next level up — add design.md and a video hero (see the next block).
The combo: design.md from Refero Styles + a Higgsfield video hero
- design.md. Open styles.refero.design, find a reference by brand or vibe ("like Linear", minimal, editorial…), copy DESIGN.md and save it in the project root as design.md. Say it outright in the prompt: "follow design.md strictly — colors, typography, spacing; don't invent your own style". The advanced route is the official skill (open source, MIT):
npx skills add https://github.com/referodesign/refero_skill --skill refero-design; with Refero MCP connected, the agent researches 150,000+ real app screens on its own. - Video hero. In Higgsfield pick Kling 3.0 or Seedance 2.0 and generate a short atmospheric clip that matches the brand mood: no on-screen text, smooth motion, so the loop doesn't jump out at you. Download the mp4.
- Assembly. Hand the file to Claude Code: compress the video (H.264/WebM, aim for 2–5 MB), set it as the hero background with a poster image, the muted + autoplay + loop + playsinline attributes, and a kill switch on prefers-reduced-motion.
The result: sections that move, a palette and typography like a grown-up product, and a live video in the hero instead of a stock photo.
When to take it and when not to
✅ Take it if you already have Claude Code (or Cursor/Bolt/Lovable) and need a good-looking animated landing page in one evening.
✅ Take the Refero Styles combo if the site has to look "like Linear/Stripe" rather than like an AI knock-off: design.md hands the agent exact colors, fonts and spacing instead of guesswork.
✅ Take the video hero if you're selling atmosphere — a brand, an event, a product with a wow factor: a Kling 3.0 clip in the hero looks more expensive than any static image.
❌ Skip it → go with "Framer" if you want a visual no-code drag-and-drop editor rather than a "prompt + agent" combo.
❌ Skip it → go with "v0" if you want the AI to generate React components right in the chat from your request, instead of pulling a ready-made prompt from a library.
❌ Skip the video hero if your KPI is load speed or your audience has weak internet: MotionSites CSS animations are lighter and won't tank LCP.
The honest price
- MotionSites — freemium. Some prompts are free (the "Copy" button). Premium unlocks the "Go Unlimited" plan: the /unlimited page shows a struck-through $759 and a promo discount — as of the 2026-07-13 check, roughly $349 one-time (lifetime) or an annual plan around $239/year. Promo numbers keep spinning, and the struck-through price is a classic urgency trick: check the current amount on /unlimited before you pay.
- Refero Styles — free as of the 2026-07-14 check: DESIGN.md copies without payment, and there's no official pricing on styles.refero.design. Refero's "big" reference library does have paid plans — they're not required for this combo.
- Higgsfield — subscription. Starter $15/mo (billed annually, 200 credits/mo), Plus $39/mo (1000 credits), Ultra $99/mo (3000 credits) — the top video models, Kling 3.0 and Seedance 2.0 included, come under one subscription and burn credits as you generate. Newcomers get a limited number of free generations, but Starter credits melt fast while you iterate on a hero clip: premium models cost dozens of credits per generation.
Gotchas
- The juiciest MotionSites prompts are paid ("Go Unlimited"), and promo prices change: don't fall for the "old" struck-through figure.
- A prompt is a start, not a finish: real copy, images, data and mobile responsiveness still get done by hand or by the agent.
- An uncompressed video hero kills speed: a 30 MB clip will tank LCP and mobile traffic. Compress to 2–5 MB, add a poster and prefers-reduced-motion.
- Higgsfield credits vanish quietly: a perfect loop takes several generations in a row, and the platform regularly changes limits and its model lineup.
- After Disney's claims (February 2026), Seedance 2.0 got hard IP filters: prompts with well-known characters and actors won't go through. And yes, social media often spells it "Seed Dance" — the correct name is Seedance.
- design.md sets the style but doesn't assemble the page: your prompt still defines the section structure (from MotionSites, for example), otherwise you get the right colors on an empty frame.
- The result depends on the model and the stack: the same prompt in Claude Code and in another agent will produce different code.
🤖 Prompt accelerator
"Build an animated landing page for [PRODUCT — WHAT_IT_DOES, WHO_FOR] on [Next.js + Tailwind]. Context: 1) the hero section prompt from MotionSites: [PASTE_PROMPT]; 2) the design.md file in the project root (a design system from Refero Styles) — follow its colors, typography and spacing strictly, don't invent your own style; 3) the video /public/hero.mp4 (generated in Higgsfield, Kling 3.0) — set it as the hero background: compress to 2–5 MB, poster image, muted autoplay loop playsinline, fallback image on prefers-reduced-motion. Replace the placeholders with the real offer, keep the animation timings from the prompt, and assemble the sections: hero, features, social proof, CTA. Check mobile, LCP and bundle size separately."