As seen on YouTube Shorts

Build a Landing Page
in 20 Minutes

No CSS. No Tailwind. No designer.
The exact 3-step process I used to ship a real page from scratch, as a backend engineer with zero frontend experience.

Watch the Short Try Claude Design

Before you start

What you need

  • Claude Pro, Max, or Team subscription (Claude Design is in research preview)
  • Your product content ready: headline, 3 to 4 features, one CTA
  • 20 minutes

The process

3 steps to a live page

Step 1

Pick a reference template

Go to motionside.ai, a library of templates built specifically to be recreated with AI. Browse the free options, find a style that matches your project's vibe (dark minimal, clean SaaS, etc.), and copy the full prompt that comes with it. That prompt is the blueprint Claude Design uses to build your site.

  • Browse motionside.ai (both free and paid templates available)
  • Pick a style that matches the vibe you want
  • Copy the full prompt. This is what you paste into Claude Design.
Open motionside.ai

Step 2

Build the site in Claude Design

Open claude.ai/design and create a new project. Paste the template prompt, then replace every placeholder with your real content (headlines, feature descriptions, CTA copy). The more specific you are, the better the output. Claude renders a complete, clickable HTML page in one shot. Not a mockup.

  • Open claude.ai/design → new project
  • Paste the template prompt from motionside.ai
  • Replace all placeholders with your real product content
  • Claude renders a full clickable page, not a static image
Open Claude Design

Step 3

Animate the hero and ship

Go to Google Labs (ImageFX or Nano) and generate 2 reference images that match your hero's look. Animate them using the tool, download the video. Back in Claude Design, replace the hero background with your video and prompt Claude to finish the rest of the page in the same style. Export the code, deploy with Claude Code.

  • Google Labs → generate 2 hero reference images
  • Animate and download the video
  • Back in Claude Design, replace hero background with your video
  • Prompt: 'Finish the rest of the page maintaining this style'
  • Export code → deploy with Claude Code
Open Google Labs

Tools used

Everything in the stack

Claude Design

Builds the full site from a prompt

motionside.ai

Free template prompts to start from

Google Labs / ImageFX

Generate and animate hero images

Claude Code

Deploy to production in minutes

Ready to build?

Pick a template. Paste your content. Ship in 20 minutes.

That's exactly what I did. My Content Board landing page (the one I'd been putting off for months) went live in one evening. No frontend skills required.

Watch on YouTube Try Claude Design