The play: Prompt library (MotionSites) + AI designer (Claude Design) + AI video (Nano Banana + Kling/Seedance). One sitting. One landing page. Charge thousands.

Why this matters

For a decade, a good hero section meant a designer, a developer, and two weeks.

Motion sections alone took a week.

Now the stack collapsed into 2 tools, plus a video model.

Old way: Figma file. Handoff doc. Dev stitching Framer Motion by hand. 2 weeks minimum.

New way: Pick a prompt. Paste it. Refine by chat. Ship working React. One sitting.

The bottleneck moved from execution to taste. Pick the right prompt. Pick the right refinement. The rest is mechanical.

The stack

  • Claude Design (claude.ai/design) — designer. Opus 4.7 generates, you refine by chat, hands off to Claude Code for real React.

  • MotionSites (motionsites.ai) — prompt library of production-grade animated hero sections and free background videos.

  • Nano Banana 2 — image generation (via Gemini, or inside Figma).

  • Kling 3.0 / Seedance 2.0 — image-to-video animation.

  • Screen Studio / CleanShot — screen record to post on X.

  • Shots.so — wrap the recording in a nice device frame.

That's it. No Webflow. No Framer. No designer on retainer.

The workflow (step by step)

Step 1. Spin up Claude Design

  1. Go to claude.ai/design.

  2. Pick type: Other → Website. Click Create.

  3. Don't start from scratch. You'll paste a MotionSites prompt in next.

Step 2. Grab a hero from MotionSites

  1. Open motionsites.ai.

  2. Pick a pre-built typography hero you like.

  3. Copy the prompt.

  4. Paste into Claude Design with this addition:

❝

Build this out. Do not add any video elements. I'll replace the video background later.

Send it. Let Claude generate the first pass.

Step 3. Generate the video background

Two options.

Option A (free, fastest): Go to MotionSites → Backgrounds tab. Copy a free video URL. Done.

Option B (custom): Build your own.

  1. Generate a still image in Nano Banana 2. Use the MotionSites prompt as reference.

  2. Animate it in Seedance 2.0 with this prompt:

❝

Create video animation like this but without any text elements. No camera movement. No extra zooms.

  1. Download. Host it somewhere public (direct link or mux.com).

Paste the video URL back into Claude Design:

❝

Replace the video background with this one: [URL]

Step 4. Add liquid glass UI elements

A plain hero is boring. Add floating glass cards.

  1. Go to Dribbble. Search UI elements or website design.

  2. Screenshot 1-2 elements you like.

  3. Upload to Claude Design with this prompt:

❝

Add these two UI elements under the text in our hero section. Position them nicely under the content. Do not use their colours. Use the same liquid glass as our navbar and buttons. Text should be white.

Claude will adapt the layout to your existing styles.

Step 5. Preview mobile

Right click → Inspect → toggle mobile view. Claude Design ships responsive by default, so this is usually a formality.

Step 6. Build the rest of the sections

Same loop, different input.

  1. Find a layout you like on Dribbble or Pinterest.

  2. Screenshot the whole section.

  3. Strip it in Nano Banana 2:

❝

Create me an image like this in 8k. Remove any text, buttons, logos, cards, rectangles. Keep the exact background, same positioning. No zoom. Plain black background.

  1. Restyle it to match your hero. Upload both images (your hero reference + the stripped layout) to Nano Banana 2:

❝

Make the second image in the same style as the first. Same background texture, same colours. Keep the composition of the second image.

Generate 3-4 variations. Pick the best.

  1. Animate it with Kling 3.0 or Seedance 2.0. animate this. no camera movement. 12 seconds.

  2. Host the video. Copy the URL.

Step 7. Feed the section back to Claude Design

Screenshot the layout you want. Strip it of visual noise in Nano Banana if needed. Then:

❝

Build out this next section exactly as shown, under our hero. Import Google Material Icons. Replace the green icons with white Material icons. Card backgrounds: use the same liquid glass as our navbar and buttons. Fonts: keep what we already established. Use this video as the background: [URL]

Send. Refine by chat until it's right.

Step 8. Expand images in Figma (optional)

If a background needs more room (taller, wider), drop it into Figma's paid tier. It uses Nano Banana 2 under the hood to extend edges. Faster than re-prompting from scratch.

The Claude Design prompt pattern

Every refinement prompt follows the same shape. Keep it in your head:

[What to build / change]
[Position / placement]
[Style rules — reuse what's already established]
[Asset URLs if needed]

Example:

Add a pricing section under the features.
Three cards, centred, evenly spaced.
Liquid glass background matching the navbar. White text. Same fonts.
Use this video as background: [URL]

No fluff. Claude acts on clarity, not politeness.

Export and ship

Claude Design → Export → Code. Open in Antigravity or Claude Code. Deploy to Vercel.

File size stays tiny because videos are hosted externally. No performance hit.

How to land clients with this (X / Twitter playbook)

This is where most people stop. Don't.

Posting the build is the whole moat.

The recording stack

  1. Screen Studio — auto smooth zooms and cursor hover effects. This is what makes the clip feel premium.

  2. Shots.so — wrap the clip in a browser frame. 10 seconds of work, looks 10x more professional.

The post formula

  1. Check trending. Open X → Explore. Note which AI launches are hot right now. Example: Claude Opus 4.7, Claude Design, Kling 3.0.

  2. Name the stack in the post. Claude Design + Kling 3.0 beats built this with AI.

  3. Quote or mention the brands. You're riding their algorithm wave.

  4. Keep the video 10-20 seconds. Hover on elements. Scroll to one section. Save.

  5. Never put the CTA inside the post copy. Put it in a reply: Book a call → [link]. This keeps reach on the main post.

What actually goes viral

  • Original design (don't copy existing templates move-for-move).

  • Animation that feels impossible (glass, video backgrounds, motion typography).

  • A short caption naming the exact tools.

  • Tag the tool creators — they'll repost if it's good.

Reposts from tool accounts = 10x reach. That's the leverage.

Pricing the output

A hero + 3-4 sections built in one sitting is a $3K-$8K landing page for most founders.

They're comparing you to:

  • 2-week Framer builds at $5K.

  • Agency quotes at $15K+.

  • DIY in Webflow at $0 but 40 hours.

You're shipping in hours. Charge accordingly. Don't compete on price.

The principle

Prompt engineering is dead. Context engineering is everything.

The MotionSites prompts are context. The Dribbble screenshots are context. Your style references are context.

Stack enough context and Claude Design one-shots the result.

The people winning here aren't better designers. They're better curators.

Open MotionSites. Pick a hero. Paste into Claude Design. One-shot your next launch page tonight.

Keep Reading

© 2026 The Brain Dump.
Report abusePrivacy policyTerms of use
beehiivPowered by beehiiv