# Motionsites Web Builder

Build award-level, cinematic websites, landing pages and hero sections, or detailed...

- Repository: https://github.com/Motionsites-AI/claude-skill (1399 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-26
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Motionsites-AI/claude-skill --skill motionsites-web-builder -g -a claude-code -y`
Codex: `npx skills add Motionsites-AI/claude-skill --skill motionsites-web-builder -g -a codex -y`
Cursor: `npx skills add Motionsites-AI/claude-skill --skill motionsites-web-builder -g -a cursor -y`
Gemini CLI: `npx skills add Motionsites-AI/claude-skill --skill motionsites-web-builder -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Motionsites-AI/claude-skill`

## Description

Build award-level, cinematic websites, landing pages and hero sections, or detailed prompts for Lovable, Bolt and v0, using top MotionSites designs, real media and a screenshot-and-fix loop.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# MotionSites Web Builder

Average AI websites happen for three reasons: a vague plan, no real media, and nobody looking at the result. This skill fixes all three. Follow the workflow every time; the steps are what make the output great.

## Workflow

### 1. Read the brief and decide (don't interrogate)
Settle these five things, briefly, in your head or in one short message:
- **What and who:** the product or person, and the visitor you are persuading.
- **Mood in three words** (e.g. "calm, expensive, nocturnal").
- **The signature:** the one memorable idea this page will be known for (media, interaction or type moment). Pick from `references/techniques.md` or invent one.
- **Output:** a single `index.html` (default: CDN only, opens anywhere), the user's existing stack (React/Next/Vite...), or a **prompt only** for another builder (see `references/builders.md`).
- **Scope:** a hero (default when unspecified), or a full landing page.

Only ask a question if you can't proceed without it (e.g. the brand name for a real company). Otherwise choose and say what you chose.

### 2. Study the closest examples
Open `examples/INDEX.md`. These are the most-liked free prompts on motionsites.ai, real designs people love. Pick the **2, 3 closest** to the brief (by category, traits and feel) and read them in full. They set the bar for:
- **Precision:** exact fonts, hex/HSL tokens, px and clamp() sizes, letter-spacing, durations and easings, z-index layers, breakpoints.
- **Restraint:** what they leave out.
- **Structure:** how a hero is layered and choreographed.

Borrow structure, precision and techniques. Never copy their brand names, copy text or exact layouts wholesale; the page must be original to this brief.

The rest: https://github.com/Motionsites-AI/claude-skill/blob/HEAD/plugins/motionsites-web-builder/skills/motionsites-web-builder/SKILL.md