No Code Required
Claude Design
Build a premium animated website in 5 steps using Claude Design, motionsites.ai, and Nano Banana.
What you need before you start
- Claude Pro, Max, Team, or Enterprise subscription (required for Claude Design research preview)
- A template source — motionsites.ai has ready-made hero section prompts
- An AI image/video tool — Nano Banana (Google) or Higgsfield AI
- 01Go to motionsites.ai — a library of premium hero section designs built to be recreated with AI.
- 02Browse the templates section. You will see both free and paid options.
- 03Pick one that matches the vibe you want.
- 04Open the template and copy the full prompt that comes with it.
- 05This prompt is the blueprint Claude Design will use to build your site.
- 01Head to claude.ai/design and click start a new project.
- 02Paste the prompt you copied from motionsites.ai into the input.
- 03Replace the placeholder content with what you actually want your site to be about — your headline, product description, and details.
- 04Hit send. Claude Design generates the full website: hero section, layout, typography — all in one shot.
- 01Go to Google's Nano Banana (or use Higgsfield AI as an alternative).
- 02Upload a reference image or describe what you want.
- 03Generate two or three image options that fit your brand.
- 04Pick the one you like best, then click the animate option to turn it into a looping video.
- 05Open the animation in a new tab and copy the video link.
- 06Go back to Claude Design and say: replace the background with this video — then paste the link.
- 01Tell Claude Design to maintain the same style and complete the rest of the page.
- 02It will build out additional sections — about, features, gallery, footer — all matching the hero's design language.
- 03For any section where you want animation, repeat the Nano Banana process.
- 04Generate an image, animate it, copy the link, and tell Claude Design to replace that section's background.
- 01Once your site is ready, Claude Design lets you export in multiple ways.
- 02Save it as standalone HTML for immediate use.
- 03Hand it off to Claude Code for production deployment.
- 04Share an internal URL with your team.
- 05Export to Canva, PDF, or PPTX if you need other formats.
Tools Recap
Ready to build?
Pick a template, paste it into Claude Design with your content, animate with Nano Banana, and ship.