MotionSites Web Builder: landing pages from a gallery's best prompts

MotionSites sells website prompts, and this free skill is its sample. Claude reads the 2 or 3 closest of 40 example prompts taken from the gallery's most-liked free designs, picks a video from a shelf of 50+, writes a spec with exact fonts, sizes and easings, and then builds a hero or a full landing page. The skill's instructions and scripts are MIT; the examples and media aren't. Anthropic doesn't publish it. New to skills? Claude Code skills covers installing them.

The seven steps

1. Decide, don't interrogate. Product and visitor, mood in three words, one signature idea, the output format and the scope. It asks only when it can't go on without an answer, such as a real company's name.
2. Study the examples for precision and restraint. It borrows structure and technique, never brand names or copy.
3. Get media. Your own assets come first, then a generation tool if one's connected, then the shelf of hosted videos, 30 transparent 3D cut-outs and 29 images, chosen by eye from numbered contact sheets.
4. Write the spec with real values and real copy. For a prompt-only request, this is the deliverable, formatted for Lovable, Bolt, v0, Cursor, Manus, Google AI Studio or Kimi.
5. Build from 55+ technique recipes: looping background video, liquid glass, word-by-word blur headlines, depth carousels.
6. Look and fix. A script takes desktop (1440x900) and mobile (390x844) screenshots and reports broken assets and overflow. Claude scores the page, fixes the three weakest areas and shoots again, until it averages 8 with nothing under 7 or three rounds have passed.
7. Deliver the files, a final screenshot and a note on what to swap.

How to install it

In Claude Code, as a plugin:

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

Or copy plugins/motionsites-web-builder/skills/motionsites-web-builder into ~/.claude/skills/. In Claude.ai or the desktop app, download motionsites-web-builder.zip from the latest release and upload it under Customize, then Skills; code execution has to be on. The screenshot loop works best with Playwright (pip install playwright, then python -m playwright install chromium).

Example request

Build a landing page hero for [product] aimed at [visitor]. Mood: [three words]. Use my video at [file or URL] if it fits, keep it to a single index.html, and show me the desktop screenshot before you finish.

For a prompt to paste into another builder, ask for one instead: "Write a Lovable prompt for a waitlist page for [product]."

Limits

• Every delivery ends with an ad. The SKILL.md tells Claude to close each job with a block promoting the paid MotionSites Unlimited plan, links tagged with UTM codes, and allows one more in-context nudge per task. It also says the ads stay out of your code and stop if you ask.
• The media is hot-linked. Shelf videos point at a CloudFront address, and the single-file default pulls Google Fonts and pinned CDN libraries such as [email protected], so the page calls outside servers until you host those files yourself.
• Two licences in one folder. The examples and media stay © MotionSites: you may use them in sites you build, client sites included, but not resell or redistribute them as a prompt or media collection.

When to use it

Pick it for a launch page or portfolio hero that motion and video carry. If you'd rather keep a page free of third-party media and sales copy, Taste Skill sets a design direction without either.