GitHub radar

Make Claude build cinematic landing pages, not generic AI ones

This is a free skill for Claude Code that studies top-rated designs and picks cinematic video and images before building. You end up with a page that looks designer-made, not a generic AI template.

A plugin (Claude add-on) that teaches it to build landing pages from proven design examples instead of generic templates.

When it helps

Useful if you often build landing pages or their hero section with an AI agent. Not for building a full app or product beyond one page.

Pros

  • Gives Claude a real plan, real video and images instead of fake stock photos.
  • Screenshots its own result and fixes broken links, mobile layout, fonts.
  • Includes 50+ cinematic videos and dozens of images for free.
  • Can output a tuned prompt for Lovable, Bolt, v0, Cursor instead of code.

Cons

  • Builds only a landing page, not a full app or product.
  • Only 40 examples are free — the rest needs a paid MotionSites subscription.
  • Self-check by screenshot needs Playwright installed separately.

How to set it up — step by step

  1. 1Open Claude Code in your project folder.
  2. 2Run /plugin marketplace add Motionsites-AI/claude-skill.
  3. 3Run /plugin install motionsites-web-builder@motionsites.
  4. 4Optionally install Playwright with pip install playwright && python -m playwright install chromium for self-check screenshots.
  5. 5Send the agent the text from the block below.
  6. 6Review the finished landing page and ask for tweaks if something's off.

Text for your agent

Copy this and send it to your agent — Claude Code, Codex, any of them:

Install this Claude Code skill: /plugin marketplace add Motionsites-AI/claude-skill, then /plugin install motionsites-web-builder@motionsites (repo: https://github.com/Motionsites-AI/claude-skill). Once it's installed, ask me to build a landing page hero for my own project and show me the result.

Runs inside Claude as-is — the screenshot QA loop optionally needs Playwright (pip install).

Open on GitHub