Quick Answer: The MotionSites Web Builder is a free Claude landing page skill. It makes Claude study proven designs, pick real cinematic media, write a precise build spec, build the page, then screenshot and fix its own work. You install it by uploading a zip to Claude.ai or adding a plugin in Claude Code. It works best with Playwright installed.
Ask most AI tools for a landing page and you'll get the same thing: a centred headline, a gradient blob, three feature cards, and a stock photo. The layouts blur together because the model has nothing specific to aim for. The MotionSites Web Builder tackles that gap directly. It gives Claude a reference library, real media, a planning template, and a way to check its own output before you see it.
Why AI-built websites all look the same
The repo names three causes: a vague plan, no real media, and nobody checking the result. Most of the problem sits in the first one. A one-line prompt like "build a SaaS landing page" forces the model to fill in every decision, from type scale to hero composition, using its most average defaults.
Here's the counter-intuitive part. Most people assume a better model fixes this. In practice, the bottleneck is usually the brief, not the model's ability to write code. A strong model given a vague spec will produce a polished version of a generic page. A weaker model given a precise spec with real references often does better work, because the spec removes the guesswork.
That's why this skill puts so much weight on the spec step. Claude writes a brief covering layout, media, type, spacing, colour and motion timing before it writes any code. You can read that brief and catch bad decisions early, which is cheaper than fixing them after a full build.
What's actually inside the skill
The skill bundles four kinds of material. Each one addresses a different failure mode:
- 40 example prompts drawn from the most-liked free prompts on MotionSites. For each brief, Claude reads the closest two or three examples to match their level of detail.
- A media shelf of 50+ cinematic hero videos, 30 transparent 3D cut-outs and 29 images. These are hosted publicly and shown on numbered contact sheets, so Claude can choose media by eye instead of grabbing whatever URL it remembers.
- 55+ technique recipes with working code. Examples include seamless video loops, liquid glass surfaces, word-by-word blur headlines, mouse-scrubbed video, spotlight reveals, depth carousels, scroll stories, and real 3D models built with Three.js.
- Design rules with numbers covering type scale, letter-spacing, spacing, colour, motion timing and copy.
The skill also includes a screenshot and QA script. It checks for broken assets, mobile overflow, font loading failures and video playback problems, then scores the page against a rubric. Claude fixes what fails and checks again.
The look-and-fix loop, step by step
The loop is where the skill earns its keep. Here's the sequence:
- Claude reads the brief and the closest example prompts.
- It selects media from the shelf and writes the spec.
- It builds the page with the relevant technique recipes.
- It renders the page in a headless browser and captures screenshots.
- The QA script flags broken assets, overflow and playback issues.
- Claude scores the result, fixes the failures, and re-renders.
Step 4 needs a browser automation tool. The source recommends Playwright, installed with pip install playwright && python -m playwright install chromium. Without it, Claude can still write the page, but it can't see the result. That's the difference between a checked page and a guessed one.
Here's the failure mode to watch for. Video-heavy heroes often look flawless on a fast desktop and then stutter on mid-range phones. A screenshot won't catch that by itself. The QA script's mobile overflow and playback checks catch the obvious problems, but you should still test on a real device before launch.
Installing the skill: which path to choose
There are three install routes. The right one depends on where you already work.
| Route | Best for | Setup steps | Requirement to note |
|---|---|---|---|
| Claude.ai / desktop upload | Non-developers, one-off builds | Download the zip from the latest release, upload via Customize → Skills → Create skill | Code execution must be enabled in Settings → Capabilities |
| Claude Code plugin | Developers who want updates | Run /plugin marketplace add Motionsites-AI/claude-skill, then /plugin install motionsites-web-builder@motionsites | No SSH key needed if you use the HTTPS marketplace URL |
| Claude Code manual copy | Custom setups or offline use | Copy plugins/motionsites-web-builder/skills/motionsites-web-builder into ~/.claude/skills/ | You manage updates yourself |
If you're on Claude.ai, the upload route is quickest. If you live in Claude Code, the plugin route gives you the cleanest update path. The manual copy is the fallback when you need full control over the files.
Trying it: prompts that trigger the skill
You don't need a special command. The skill activates when you ask for a site. These prompts from the README show the range:
- "Build a landing page hero for a luxury sleep-tracking ring."
- "Make a portfolio homepage for an architectural photographer in Lisbon. Editorial and quiet."
- "Write a Lovable prompt for a waitlist page for my AI travel app."
- "Here's my current site: make it look award-winning."
The third one is useful if you build in Lovable, Bolt, v0 or Cursor and don't want to hand-code. The skill's prompt mode outputs a tuned prompt for those tools instead of raw code. Prompt mode also supports Manus, Google AI Studio and Kimi.
The fourth prompt is the most practical. Paste in an existing page and ask for a rebuild. You'll get a spec that shows what's wrong with the current layout before any code changes.
Caveats, licensing and the paid tier
Three things deserve a clear statement before you ship.
Licensing is split. The skill's instructions and code are MIT. The example prompts and media remain © MotionSites. The README says you may use them in sites you build with the skill. Read the LICENSE file before you reuse media in anything beyond a site.
Performance is your responsibility. Full-screen video heroes, 3D models and scroll-driven animations add weight. The skill's recipes are a starting point, not a guarantee of fast load times. Test on throttled connections and mid-range devices, and keep a static fallback for reduced-motion users.
The free tier is a sample. The README is explicit that the examples and media are a free sample. MotionSites Unlimited is the paid library. It offers 500+ premium prompts, animated hero backgrounds, section prompts, 40+ Lovable templates, and an MCP server so Claude can pull prompts directly into a build. The free skill works without it, but the library is the larger body of material.
Frequently Asked Questions
What is the Claude landing page skill?
The Claude landing page skill is a free, MIT-licensed set of instructions and assets that makes Claude plan and build cinematic landing pages. It includes example prompts, a media shelf, technique recipes, a spec template, and a screenshot-based QA loop. You install it into Claude.ai or Claude Code, then ask for a site as usual.
How do I install a Claude skill for website design?
Download the zip from the latest GitHub release and upload it under Customize → Skills in Claude.ai, with code execution enabled. In Claude Code, run the two plugin commands from the README. Manual installs copy the skill folder into ~/.claude/skills/.
Why do AI-built websites all look the same?
Most AI-built sites follow the model's defaults because the brief is vague. Without specific references, real media, and a written spec, the model fills every design decision with its most common choice. Tighter briefs and visual checking reduce that sameness.
Do I need Playwright to use the skill?
No, but you should install it. Playwright lets Claude render the page and check the screenshots, which powers the look-and-fix loop. Without it, Claude can still write the code, but it can't verify how the result looks.
Can the skill build for Lovable or Bolt instead of writing code?
Yes. Ask for a prompt rather than code, and the skill outputs a prompt tuned for Lovable, Bolt, v0, Cursor, Manus, Google AI Studio or Kimi. This is useful when you want a no-code or low-code build path.
Install the skill, then give Claude one real brief this week: your own product, a client, or your current homepage. Compare the spec it writes against your first instinct, and note which decisions it changed. Pass this to someone wrestling with generic AI layouts, and point them to the Claude landing page skill repo.