claude-skill

Enable Claude to build high-quality, cinematic landing pages.

Agent SkillDesignOpen source

Type: Agent Skill
Open source: Yes
GitHub Stars: ★ 1.1k
Source: skill-github
Repository: github.com/Motionsites-AI/claude-skill

Overview

This skill empowers Claude to create high-quality, cinematic landing pages, addressing the issue of AI-generated websites being overly generic. Claude references top designs from MotionSites, selects authentic cinematic media assets, and writes detailed construction specifications. It also uses screenshot-based validation and iterative refinement loops to ensure the final output meets gallery-level standards. The skill includes 40 example prompts, over 50 cinematic hero videos, 30 transparent 3D edits, 29 images, and more than 55 technical recipes. Ideal for users requiring premium web design quality.

Capabilities

▪Build high-quality landing pages
▪Select authentic cinematic media assets
▪Write detailed construction specifications
▪Take screenshots and refine pages iteratively
▪Provide multiple technical recipes

Use cases

Build a landing page for a luxury sleep-tracking ringCreate a portfolio homepage for a architectural photographerDesign a waitlist page for an AI travel appOptimize an existing website's design

Setup

Requires: API KeyNode 环境

1. Download `motionsites-web-builder.zip` from the latest release.
2. In Claude, go to Customize → Skills → + → Create skill → Upload a skill, select the zip file, and enable the skill. (Code execution must be enabled in settings.)
For Claude Code plugin: "/plugin marketplace add Motionsites-AI/claude-skill /plugin install motionsites-web-builder@motionsites"

This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.