The guide · paste into Claude Code

Set up Claude Code for studio-grade websites.

Out of the box, Claude Code writes working sites that still look generated. This is the kit I install to fix that: a design-brief stage that locks the look before any code, a code generator that follows the brief, a free component library, and AI image + video on tap. Run the commands in order, confirm each one, and you build sites that look designed.

claude-design full-page design generator: turns intent into a complete page design.
impeccable writes the design brief that locks colours, fonts, motion, and forbidden patterns first.
frontend-design writes the UI code from the brief, without the generic AI look.
magic (21st.dev) free library of pre-built buttons, cards, animations, and icons.
higgsfield AI image + video: rotating products, hero clips, characters.
motion the animation engine behind every modern site (install per project).

Paste into Claude Code

🔒 Drop your email to reveal the commands

Get the full setup, free.

Drop your email and the commands unlock instantly, plus every other guide and resource in the library. One email a week, unsubscribe anytime.

Set up my Claude Code environment for building studio-grade websites. Run each step in order and confirm it worked before moving on.

1. Add the official Anthropic plugin marketplace:
   /plugin marketplace add anthropics/claude-plugins-official

2. Install Claude Design (full-page design generator):
   /plugin install claude-design

3. Install Impeccable (writes the design brief that locks colors, fonts, motion, and forbidden patterns before any code):
   /plugin install impeccable

4. Install Frontend Design (writes the UI code from the brief, no generic AI slop):
   /plugin install frontend-design

5. Add the 21st.dev Magic MCP (free library of pre-built buttons, cards, animations, and icons):
   claude mcp add magic -- npx -y @21st-dev/magic@latest

6. Add the Higgsfield MCP (AI image + video generation — rotating products, hero clips, characters):
   claude mcp add --transport http higgsfield https://mcp.higgsfield.ai/mcp

7. When you start a new website project, install Motion (the animation engine behind every modern site):
   npm install motion

For full-page design generation in the browser, also use claude.ai/design — Anthropic's standalone design web app.

After everything installs, list the connected plugins and MCPs and confirm each one is ready.