Four steps from blank canvas to a real URL — brief, pull, compose, ship. The whole stack is open-source, runs inside Claude Code, and the skill that orchestrates it is a single markdown file you can install in twenty seconds.
The brief is the whole game. Give Claude an actual creative direction: “A cinematic dark landing page for an indie design studio. Black background, oversized serif headlines, per-section palette shifts violet → amber → teal → bone → magenta. Five sections — hero, brief, pull, compose, ship.” Specific beats vague, every single time.
21st.dev’s Magic MCP turns natural language into real production components. One-time setup in Claude Code: run `claude mcp add magic`, paste your API key from 21st.dev/dashboard, restart. Then ask for a cinematic Three.js hero with scroll-driven palette morphing and it surfaces working code. Free tier covers ≈30 pulls a month.
Claude runs `npx create-next-app`, installs three, gsap, framer-motion, drops the pulled component into `components/ui/`, and writes your brand copy into `app/page.tsx`. CSS for the canvas, nav, and sections goes into `globals.css`. Tailwind is already wired. You go from a paragraph of brief to a running dev server in roughly a minute.
`vercel --prod` gives you a real URL in twenty seconds. Or `npm run dev` and screen-record localhost — Quicktime, 1080 by 1920, drop into your editor, cut to fourteen seconds. This entire page was deployed from this prompt. The URL is in the address bar.