MotionSites Web Builder (claude-skill)

What it is

A Claude skill — a downloadable add-on that changes how Claude builds websites. Instead of generic AI layouts, it makes Claude produce cinematic, "award-level" landing pages.

The problem it solves

The README says AI-built websites all look the same for three reasons:

1. A vague plan — no precise design brief before coding
2. No real media — no actual videos or images to work with
3. Nobody looks at the result — no review or quality check

This skill addresses all three.

How it works

The workflow, as described:

1. Claude studies the most-liked designs from MotionSites (a design gallery site)
2. It picks real cinematic media (videos, 3D cut-outs, images)
3. It writes a precise build spec before writing any code
4. It builds the page
5. It screenshots its own work and fixes it until it clears a "gallery-level bar"

What's inside

• 40 example prompts — the most-liked free prompts on MotionSites. Claude reads the closest 2–3 for each new brief to match their level of detail and taste.
• A media shelf — 50+ cinematic hero videos, 30 transparent 3D cut-outs, and 29 images, publicly hosted and shown on numbered contact sheets so Claude picks media by eye.
• 55+ technique recipes with working code, including: seamless video loops, liquid glass, word-by-word blur headlines, mouse-scrubbed video, spotlight reveals, depth carousels, scroll stories, and real 3D models (Three.js).
• Design taste rules with real numbers — type scale, tracking, spacing, colour, motion timing, and copy guidelines.
• A spec template — the precise brief Claude writes before coding. The README calls this "where quality is decided."
• A look-and-fix loop — a screenshot + QA script that checks for broken assets, mobile overflow, fonts, and video playback, plus a scoring rubric.
• Prompt mode — you can ask for a prompt instead of code, tuned for Lovable, Bolt, v0, Cursor, Manus, Google AI Studio, or Kimi.

Installation

Claude.ai and Claude desktop:

1. Download motionsites-web-builder.zip from the latest release
2. In Claude: Customize → Skills → + → Create skill → Upload a skill, choose the zip, and switch it on
3. Code execution must be enabled in Settings → Capabilities

Claude Code (plugin):

/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites

(No GitHub SSH key? Use the HTTPS URL variant instead.)

Claude Code (manual): Copy plugins/motionsites-web-builder/skills/motionsites-web-builder into ~/.claude/skills/.

Optional for best results: Install Playwright so Claude can see its own work:

pip install playwright && python -m playwright install chromium

How to use it

Just ask Claude for a site — the skill kicks in automatically. Example prompts from the README:

• "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."

Free vs. paid

This skill is a free sample. A paid tier called MotionSites Unlimited unlocks:

• 500+ premium website prompts (for Lovable, Bolt, v0, Cursor, and Claude)
• Animated hero backgrounds and section prompts (features, pricing, footers…)
• 40+ Lovable templates
• The MotionSites MCP, letting Claude search and pull any premium prompt into a build
• Use for personal and client work

License

• The skill's instructions and code are MIT.
• The example prompts and media remain © MotionSites, but you may use them in sites you build with this skill.

Key takeaway

The core idea: Claude doesn't just generate a page from a vague request. It studies award-winning examples, picks real media, writes a precise spec, builds, then reviews its own screenshot and iterates until the result meets a high quality bar.