MotionSites Web Builder

Turn Claude into an award-level web designer with 40 curated taste prompts, 50+ cinematic video assets, and 55+ interactive motion recipes.

MotionSites Claude Skill preview

The gist

MotionSites Web Builder is a free skill package for Claude that makes Claude build cinematic, award-level landing pages instead of generic AI layouts. It equips Claude with real-world design anchors, a shelf of 50+ hero videos and transparent 3D cutouts, 55+ motion recipes, and an automated visual QA loop. It is designed for founders, solo creators, and agencies who want boutique-grade web interfaces generated directly inside their AI workflow.

What it does

  • Guides Claude with 40 production design prompts and concrete typography, spacing, and color rules.
  • Provides a curated media shelf with 50+ cinematic hero videos, 30 transparent 3D cut-outs, and 29 images.
  • Implements 55+ front-end motion recipes including seamless video loops, liquid glass styling, spotlight reveals, and Three.js 3D models.
  • Runs an automated look-and-fix QA loop via Playwright to screenshot pages and catch broken assets, mobile overflow, and font errors.
  • Generates cross-platform prompts tuned specifically for Lovable, Bolt, v0, Cursor, Manus, and Google AI Studio.

How it works

Architecture Diagram
MotionSites Web Builder Architecture Diagram

You install the skill into Claude desktop, Claude.ai, or Claude Code. When you describe the landing page you need, Claude references its internal design rules and media contact sheets to compose a cinematic layout with working motion code. If Playwright is installed, Claude runs an automated inspection script to capture screenshots, audit responsive layout bugs, and fix visual flaws before delivery.

Best for

  • Founders and creators wanting high-end landing pages with cinematic motion instead of standard Bootstrap-style AI templates.
  • Developers using Claude Code or Cursor who want ready-to-use Three.js, video loop, and liquid glass components.
  • Designers and agencies building client pitches and prototypes directly from prompt-driven workflows.

Watch out for

  • Free sample of a paid commercial product: MotionSites Unlimited (offering 500+ templates and assets) is actively promoted as the upsell.
  • Claude-only skill format out of the box — requires manual porting to run on non-Claude agent environments.
  • The automated look-and-fix screenshot QA loop requires Playwright and Chromium installed locally on your system.
  • Distributed under a NOASSERTION license rather than standard MIT or Apache; review terms before commercial redistribution.

What you need: Install it on your own computer. Cost: free skill package (paid template upsell).