MotionSites turns Claude into an award-winning web designer

MotionSites open-sourced a new Claude skill called motionsites-web-builder, turning Claude into an award-winning web designer capable of creating cinematic landing pages instead of generic AI layouts.

AI-built websites usually look identical for three specific reasons: a vague initial plan, a lack of real cinematic assets, and the fact that the AI never actually sees what it coded. This skill solves all three problems systematically.

What is inside and how it works

Rather than just giving Claude vague aesthetic instructions, the skill integrates a full design system and an automated verification loop drawn from more than 700 real-world design builds.

It packs 40 free design prompts curated from MotionSites. Whenever you give Claude a brief, it pulls the two or three closest examples to match their structure and aesthetic standards.

To fix the asset issue, the skill includes a publicly hosted media shelf. Claude gets access to over 50 cinematic background videos, 30 transparent 3D cut-outs, and 29 images, all cataloged on numbered contact sheets so the model can visually select assets.

It also comes loaded with more than 55 functional code recipes. These cover seamless video loops, liquid glass styling, word-by-word blur headlines, mouse-scrubbed video progress, spotlight reveals, depth carousels, scroll-driven storytelling, and Three.js 3D models.

Before writing code, Claude drafts a precise build specification based on strict mathematical design rules for typography, spacing, motion timing, and copy.

Once the code is ready, an automated look-and-fix loop takes over. Claude runs a Playwright script to screenshot the live page, runs QA checks for broken assets, mobile overflow, missing fonts, and video playback, and repairs the build against a grading rubric.

If you prefer building in other tools, the skill includes a prompt mode that generates tailored prompts for Lovable, Bolt, v0, Cursor, Manus, Google AI Studio, or Kimi.

How to install and run it

Setup takes just a few steps. You can grab the motionsites-web-builder zip file from the project's GitHub releases at Motionsites-AI/claude-skill.

Inside Claude, navigate to Customize, select Skills, click Create skill, upload the zip archive, and turn it on. Make sure code execution is toggled on in your capability settings.

You can also install it via the Claude plugin marketplace CLI or copy the skill folder directly into your local Claude skills directory. To enable the automated screenshot QA loop, install Playwright and Chromium via pip.

Once active, Claude triggers the workflow automatically when prompted for landing page builds, portfolio layouts, or visual redesigns.

The skill instructions and code are open-sourced under the MIT license. The bundled prompts and media assets remain copyrighted by MotionSites, but they are free to use within websites generated by the skill. A commercial tier unlocks over 500 additional prompts and an MCP server.

Why it matters

For indie hackers and founders, this skill bridges the gap between functional code and polished, high-end visual design. Most AI code generators output dry, repetitive components, but this tool forces the model to respect professional art direction and motion.

Its real brilliance lies in giving the AI eyes through the Playwright screenshot loop. We think having the agent visually audit and fix its own overflow and typography flaws sets a benchmark for generative UI tools, though users will still need to supply their own brand assets to avoid relying solely on the bundled demo stock.