MotionSites Web Builder: Free Claude Skill for Landing Pages

What is MotionSites Web Builder?

Checked 2026-11-05. MotionSites Web Builder is a Claude skill published by MotionSites, a site that sells website prompts, in the Motionsites-AI/claude-skill repository. Version 1.0.0 was released on 2026-10-26, and the repository had about 1,700 stars on 2026-11-05. Its README names the problem it targets: AI-built websites look alike because of a vague plan, no real media and nobody looking at the result. The skill answers each one with a written spec, a shelf of hosted media and a screenshot-and-fix loop.

• 40 example prompts: the most-liked free prompts on motionsites.ai. For every brief Claude reads the closest two or three to match their level of detail (SKILL.md).
• 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 (README).
• 55+ technique recipes with working code, for example seamless video loops, liquid glass, word-by-word blur headlines, mouse-scrubbed video, depth carousels, scroll stories and three.js models.
• Taste rules with real numbers for type scale, tracking, spacing, colour, motion timing and copy, and a spec template Claude fills in before it writes any code.
• A look-and-fix loop: a Playwright screenshot and QA script that reports broken assets, mobile overflow, fonts and video playback, plus a ten-point rubric (review.md).
• Prompt mode: ask for a prompt instead of code and get one adapted for Lovable, Bolt, v0, Cursor, Manus, Google AI Studio or Kimi (builders.md).

How do you install it?

For the look-and-fix loop the README recommends Playwright: pip install playwright, then python -m playwright install chromium. Without any screenshot tool, the rubric tells Claude to review the code line by line and say plainly that the page was not visually checked (review.md).

What does Claude do with it, step by step?

1. Reads the brief and decides. Who the page persuades, a mood in three words, one signature idea, the output (a single index.html by default, your own stack, or only a prompt) and the scope (a hero unless you ask for a full page). It asks a question only when it cannot go on without one, such as a real company's name.
2. Studies the two or three closest examples for their precision: exact fonts, colour tokens, sizes, easing and layering. The skill tells Claude to borrow structure and technique, never brand names, copy or whole layouts.
3. Gets media in this order: your own assets, a generation tool if one is connected, the shelf, or a type-and-motion page with no fake image boxes. It must not invent asset URLs or use media with recognisable characters, celebrities, logos or brands.
4. Writes the spec with real values and real copy before any code. If you asked only for a prompt, the spec is the deliverable.
5. Builds with CDN libraries at pinned versions (for example [email protected] and [email protected]), sets the page background first so there is no white flash, and respects prefers-reduced-motion.
6. Looks and fixes. It runs scripts/shoot.py, scores the screenshots on ten criteria and fixes the three weakest, until the average is 8 or more with nothing under 7, or for three rounds (SKILL.md).
7. Delivers the files, the final desktop screenshot and two or three lines on the choices it made.

Which prompts should you try first?

The README's own examples are short, because the skill fills in the rest (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."

For longer briefs with exact values, start from the prompts motif wrote on Landing pages made with Claude, which also lists real pages people built with Claude and the techniques each one uses.

What does the output look like?

On 2026-10-28 Viktor Oddy shared a reel of landing pages built in the previous weeks "using Claude and Kimi with my MotionSites skill" (@viktoroddy). The README shows 8 of the 40 example designs next to the hero videos they are built on. motif has not run the skill, so judge the reel as the publisher's own showcase.

What are the limits?

• Shelf media is hosted by MotionSites, so a page that uses it depends on those links staying online; the skill itself suggests replacing shelf video with your own footage.
• The free part is a sample: 40 prompts and the shelf. The premium library and the MotionSites MCP are paid, and motif did not check the price.
• The look-and-fix loop needs Playwright and a browser where your agent runs; in the Claude app it depends on code execution.
• Version 1.0.0 is the only release so far. Everything here is read from the repository on 2026-11-05.

How does it compare with other landing page skills?

More skills for motion, with their licences and last updates, are in Agent skills for motion.

Questions