Motionsites-AI/claude-skill

Worth a try if you already use Claude to generate front-end pages and find the output bland; skip it if you need a self-contained design system or cannot enable Claude's code execution and a headless browser.

The problem

You ask Claude for a landing page and get something that renders but looks like every other AI-generated site: a vague layout, placeholder gradients and stock-ish media. The missing steps are usually a concrete visual reference, real media chosen with taste, and a check of the rendered result. This skill packages all three so Claude reads a detailed brief, builds against it, then screenshots the page and fixes issues before handing it over. The output is still HTML/CSS/JavaScript you can deploy anywhere, but the plan and review stages move from your head into the skill's workflow.

What's different

The mechanism is a set of reference material rather than a framework: 40 example prompts selected from MotionSites' most-liked free prompts, a hosted media shelf of 50+ hero videos, transparent 3D cut-outs and images shown on contact sheets, plus 55+ technique recipes with code covering video loops, liquid glass, scroll stories and Three.js scenes. There are also numeric design rules for type scale, spacing, colour and motion timing, and a spec template Claude fills in before coding. The look-and-fix loop uses a screenshot and QA script that checks broken assets, mobile overflow, fonts and video playback against a scoring rubric; Playwright is listed as the way to make this work.

The practical trade-off is that the skill's judgement depends on that reference library, which is a free sample of a paid catalogue. The README says the skill's instructions and code are MIT while the example prompts and media remain © MotionSites and may only be used in sites you build with the skill, so the license file is worth reading before reuse in templates or client deliverables. Prompt mode also targets Lovable, Bolt, v0, Cursor, Manus, Google AI Studio and Kimi, which makes the skill useful even when Claude is not the builder.

Who should try it

A good fit is a developer or designer using Claude Code or Claude.ai to produce marketing pages and willing to install Playwright so the look-and-fix loop can actually see the page. It also suits people who want a polished prompt for another builder, since asking for a Lovable or v0 prompt avoids the code-execution requirement entirely. A poor fit is someone who needs a deterministic component library, offline media assets or a permissively licensed set of prompts and videos to redistribute: the media shelf depends on public hosting, and the asset license is narrower than the code license.

Requirements and limitations

On Claude.ai and Claude desktop the skill is installed as a zip and requires code execution to be enabled in Settings → Capabilities; without that the skill cannot run its scripts. Claude Code users can install it as a plugin from the repository's marketplace or copy the skill folder manually. The screenshot QA loop is described as working best with Playwright, which means a Chromium install and an extra dependency beyond the skill itself. Media is publicly hosted rather than bundled, so previews depend on those URLs remaining available.

The broader limitation is scope and upkeep: the library is a sample of 40 prompts and a fixed media shelf, and premium prompts, section prompts and the MotionSites MCP sit behind a paid plan. The example prompts and media are licensed for use in sites built with the skill, not for general redistribution, and the license link is the only place the full terms are documented.

HotRepo's take

The only dated signal is a 2026-10-27 observation on the NEW-REPOSITORY board for Python at #23 with 142 total stars; that is a snapshot, not daily growth, and there is no comparable history to judge persistence. Treat it as a young project with one recorded appearance. Before adopting, open the license and confirm exactly what the media and prompt terms permit for your intended output.

Project source and documentation