MotionSites Web Builder

Overview

MotionSites Web Builder is a free Claude skill by MotionSites that helps Claude produce award-level, cinematic landing pages rather than average AI layouts. It addresses vague plans, lack of real media, and missing review by supplying example prompts, a cinematic media shelf, technique recipes, design taste rules, a build spec template, and a screenshot-based look-and-fix loop.

Key Features

• 40 example prompts drawn from the most-liked free prompts on MotionSites, with Claude reading the closest 2-3 for each brief.
• A media shelf with 50+ cinematic hero videos, 30 transparent 3D cut-outs, and 29 images shown on numbered contact sheets.
• 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 with Three.js.
• Design taste rules with real numbers for type scale, tracking, spacing, colour, motion timing, and copy.
• A spec template for the precise brief Claude writes before coding, plus a look-and-fix loop with a screenshot and QA script and scoring rubric.
• Prompt mode that returns a prompt tuned for Lovable, Bolt, v0, Cursor, Manus, Google AI Studio, or Kimi.

Use Cases

• Build a landing page hero for a luxury sleep-tracking ring.
• Create an editorial, quiet portfolio homepage for an architectural photographer in Lisbon.
• Write a Lovable prompt for a waitlist page for an AI travel app.
• Improve an existing site so it looks award-winning.

Getting Started

• For Claude.ai and Claude desktop, download motionsites-web-builder.zip from the latest release, then open Customize → Skills → + → Create skill → Upload a skill, choose the zip, and switch the skill on.
• For Claude Code with the plugin, run /plugin marketplace add Motionsites-AI/claude-skill and then /plugin install motionsites-web-builder@motionsites; an HTTPS marketplace add command is available as an alternative when no GitHub SSH key is available.
• For manual Claude Code installation, copy plugins/motionsites-web-builder/skills/motionsites-web-builder into ~/.claude/skills/.
• Ask Claude for a site and the skill kicks in automatically; for example, request a landing page hero, a portfolio homepage, a Lovable prompt, or an award-winning redesign.
• Optionally install Playwright for the look-and-fix loop with pip install playwright && python -m playwright install chromium.

Deployment & Requirements

• Code execution must be enabled in Settings → Capabilities for Claude.ai and Claude desktop use.
• Claude Code installations use either the plugin marketplace flow or manual copying into ~/.claude/skills/.
• The optional look-and-fix loop works best with Playwright; install it with pip install playwright && python -m playwright install chromium.

Before You Adopt

• License: Other. Review its terms before using, modifying, or distributing the project.
• Claude.ai and Claude desktop use requires enabling code execution before the skill can run.
• The screenshot-based look-and-fix loop works best with Playwright, an optional external dependency.