The 6-Piece Stack That Gives Claude Code Taste

Claude Code builds the site fine. It just builds it ugly — templated hero, purple gradient, three equal cards, stock placeholder images, animations that ease the wrong way.

Six pieces fix that. Three are free and install in one prompt. Three need a human step.

Verified against live repos, npm, and MCP endpoints on 2026-10-15.

The one prompt

Paste this into Claude Code, from the root of the project you want the stack in.

Install my 6-piece design stack. Work through this in order and do not skip the report at the end.

PREFLIGHT
Run `node -v`. If it is below v22.20.0, STOP and tell me to update Node first — the
`skills` installer (step 2) declares that floor.

INSTALL THESE THREE (you can do these yourself, non-interactively)

1. Impeccable — design brief, 59 detector rules, and an edit-time hook:
   npx impeccable install -y --providers=claude --scope=project

2. Anthropic's Front End Design skill — turns the brief into code:
   npx skills@latest add anthropics/skills -s frontend-design -a claude-code

3. Higgsfield MCP — add the server only (I have to authorize it myself, see below):
   claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp
   If that command errors, do not retry or hand-edit my config — just say so in the report.

DO NOT ATTEMPT THESE THREE
They need a browser, a login, or an interactive terminal prompt. You cannot complete
them and you should not try — a half-finished install here is worse than none.

4. Motion AI Kit — `npx motion-ai` is interactive-only (it prompts for scope and which
   agents; it has no --yes flag). I run it in my own terminal.
5. 21st MCP — `npx @21st-dev/cli@latest init --client claude` requires me to sign in
   and mint an API key.
6. Claude Design — nothing to install. It is a surface at claude.ai, not a package.

REPORT
When you are done, print exactly this, filled in:
- Node version found
- Which of steps 1-3 succeeded, and the actual error text for any that failed
- Then this checklist of what is left for ME to do, in order:
    [ ] /impeccable init          (in this Claude Code session, once per project)
    [ ] npx motion-ai             (in a normal terminal, pick Project + Claude Code)
    [ ] npx @21st-dev/cli@latest init --client claude   (then sign in at 21st.dev/mcp)
    [ ] /mcp                      (authorize higgsfield + motion via OAuth)
    [ ] restart Claude Code so every new skill and MCP loads
Do not mark any of those as done. They are mine.

What that prompt actually gets you: two skills installed, one MCP server registered. Everything else is gated behind a login or a terminal prompt, and the prompt says so instead of pretending.

Anyone selling you a single prompt that installs all six is not counting the OAuth screens.

1 · Higgsfield MCP

Name: Higgsfield — one word. The reel says "Higgs Field." That's wrong, and searching for it that way finds nothing. Endpoint: https://mcp.higgsfield.ai/mcp — verified live, returns 401 until you OAuth. Site: higgsfield.ai

A pipe between Claude Code and a media generator. Instead of placeholder-hero.jpg, Claude generates the actual image or video and drops it into the build.

Install

claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp

Then /mcp inside Claude Code and authorize. OAuth against your Higgsfield account — there is no API key to paste.

You can also add it as a connector in the claude.ai settings UI, which is how it shows up if you connected it there first. Same server either way.

Cost

This is the one that costs money. Free tier exists and it is limited. Paid plans are credit-based and Higgsfield reprices often enough that any number written here would be stale; check higgsfield.ai/pricing.

Credit cost varies by model and output type; check the pricing page before generating video.

What breaks without it

Nothing breaks. You get placeholder images. For a portfolio or a landing page where the imagery is the product, that is the whole gap. For a dashboard or an app UI, it is irrelevant — skip it.

2 · Impeccable

Repo: github.com/pbakaus/impeccable · Apache-2.0 · by Paul Bakaus · v4.6.0 Site: impeccable.style Needs Node ≥ 18.19 for the npx installer (the installed skill itself needs no runtime)

Locks in the design brief — colors, fonts, spacing, motion rules — so Claude stops guessing at taste. Started from Anthropic's own frontend-design skill and grew into 24 commands, a standalone CLI, 59 deterministic detector rules, and a hook that fires on every UI edit.

Install

npx impeccable install -y --providers=claude --scope=project

Then, once per project, inside Claude Code:

/impeccable init

init asks only for the gaps in your product context, then writes PRODUCT.md. (DESIGN.md comes from /impeccable document.) Skip init and the other 23 commands run blind. This is the single most-skipped step in the whole stack.

The installer also writes a hook into .claude/settings.local.json that runs the detector after every Edit/Write on a UI file, plus a deeper pass on Stop. Don't want it: add --no-hooks.

Cost

Free. Apache-2.0. No account.

What breaks without it

Claude picks a look per file instead of per project. Page 3 stops matching page 1. This is the piece the other five are hanging off — everything downstream reads the brief it writes.

3 · Front End Design

Repo: github.com/anthropics/skills, skill frontend-design · Apache-2.0 · by Anthropic

Anthropic's official skill for making UI look designed rather than defaulted. Its own description: guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.

Install

npx skills@latest add anthropics/skills -s frontend-design -a claude-code

Run it from inside Claude Code and the CLI detects the agent and installs without prompting.

Needs Node ≥ 22.20.0 — that's the skills CLI's floor, and it is higher than Impeccable's.

Cost

Free. No account.

What breaks without it

Less than the reel implies, if you already ran Impeccable. Impeccable was built on top of this skill and covers most of the same ground. Installing both is not harmful — it is just not additive the way six-separate-tools sounds.

If you install exactly one of the two, install Impeccable.

4 · Motion

The name changed. Framer Motion is now just Motion. Same library, same author, dropped the "Framer." Site is motion.dev. Packages are motion and motion/react. framer-motion still resolves for old projects.

What to install is the Motion AI Kit — not a community skill scraped off a marketplace. Motion ships this themselves.

npm: motion-ai v14.2.0 · Hosted MCP: https://mcp.motion.dev (verified 200)

Install

npx motion-ai

Interactive. It asks Project or Global, then which agents. Pick Project and Claude Code. It installs a skill named motion and wires up Motion's hosted MCP servers.

No non-interactive flag exists — the CLI only accepts --help and --version. This is why the one-prompt installer hands it back to you. Run it in a real terminal.

Then use it with /motion in Claude Code.

Cost

The library is MIT and free. The AI Kit's free tier gets you animation best practices plus docs and example search — no token, no account.

Motion+ is a one-time payment (Solo licence, not a subscription; team plans renew annually; motion.dev/plus lists $399 USD on 2026-10-15 — check the page for your price) and adds CSS spring generation, MotionScore performance audits, the visual transition editor, and 490+ premium examples. You unlock it by signing into the motion-plus MCP server from your agent, not with an API key.

What breaks without it

Animation is where AI output gives itself away fastest — ease-in on an enter, a 400ms fade that should be 150ms, a bounce on something that should not bounce. The free tier's best-practices context alone fixes most of that. Skip Motion+ until the free tier stops answering your questions.

5 · 21st MCP

Renamed since the reel. It was Magic MCP. It is now the 21st MCP. The old magic.21st.dev backend was superseded and every old Magic API key was reset — if you set this up before mid-2026, your key is dead.

npm: @21st-dev/cli v1.18.0 · Site: 21st.dev/mcp

Search 12,000+ React/Tailwind components built by actual designers and drop them into the build.

Install

npx @21st-dev/cli@latest init --client claude

Then sign in at 21st.dev/mcp and mint a fresh API key. Restart Claude Code. Ask in plain language — "search 21st for a pricing table with three tiers and a monthly/annual toggle." (The old /ui trigger is gone.)

Old tool names still work but were renamed: 21st_magic_component_builder → generate, logo_search → search_logo.

Cost

Search, publishing, and managing are free. Installs are capped at two per day on the free tier, and the AI generation runs on credits. Account required.

What breaks without it

Nothing structural. You hand-roll components Claude writes from scratch instead of pulling ones a designer already shipped. The two-a-day cap makes this a garnish, not a foundation — you cannot build a whole site through it.

6 · Claude Design

This is not a package. There is nothing to install.

Anthropic Labs shipped Claude Design in April 2026 — a visual canvas at claude.ai where you comment on elements, edit text directly, and tune spacing and color with adjustment sliders instead of asking Claude to regenerate the page. Claude Code handoff exists too: designs hand off to Claude Code as a bundle, and /design-sync pulls your design system into Claude Design.

Inside Claude Code it is reachable as /design.

Cost

Included on every Claude plan, Free included (claude.com/pricing, 2026-10-15). Not sold separately.

What breaks without it

The last 10%. Everything before this is Claude making decisions from written rules. This is you looking at the thing and nudging it by hand. If you have a Claude account, you have it — it costs you nothing extra to use.

Free, paid, and what to skip

If you stop after three

Impeccable · Front End Design · Motion AI Kit.

All three are free, none need an account, and together they cover the three things that actually make output look AI-made: no consistent brief, templated layout, and wrong animation.

Two of the three install from the one prompt. The third is one command in your terminal.

What to add fourth

Depends on what you are building:

• Marketing site or portfolio → Higgsfield. The imagery is the product.
• App UI or dashboard → 21st MCP. Components over generated media.
• Any Claude account → Claude Design. It is already included.

Skip Higgsfield if

You are building anything where the images are not the point. It is the only piece here with an open-ended bill attached.

What this stack does not fix

• These are instructions, not guarantees. Skills are text loaded into context. The model drops parts of it in long sessions.
• They cost context. Six tools' worth of instructions is paid for in every session. Install what you use.
• Impeccable and Front End Design overlap. One is built on the other. Six pieces is really about four-and-a-half distinct jobs.
• No skill fixes your copy. A better-looking page that does not say what the thing is, is still a page that does not say what the thing is.
• No brand comes out of this. No name, no positioning, no offer. That part is still yours.

Order of operations

Installing them is not the same as using them. The sequence:

1. 1/impeccable init — once per project. Everything downstream reads what it writes.
2. 2Deciding the look — Impeccable's brief plus Front End Design.
3. 3Building — Impeccable's edit hook runs in the background catching slop as it lands.
4. 4Media — Higgsfield generates real images into the build instead of placeholders.
5. 5Components — 21st MCP for anything a designer already solved.
6. 6Motion — /motion last on the code side. Animate what exists, don't animate speculatively.
7. 7Claude Design — the visual pass, by hand, after the code is right.

Uninstall

npx skills@latest list      # see what's installed
npx skills@latest remove    # pick what to remove
claude mcp list             # see MCP servers
claude mcp remove higgsfield

Impeccable: delete the .impeccable/ folder, the .claude/skills/impeccable/ folder, and the hook entry it added to .claude/settings.local.json.

Everything, in one place:

• Higgsfield — higgsfield.ai (opens in a new tab) · MCP https://mcp.higgsfield.ai/mcp
• Impeccable — github.com/pbakaus/impeccable (opens in a new tab) · impeccable.style (opens in a new tab)
• Front End Design — github.com/anthropics/skills (opens in a new tab)
• Motion — motion.dev (opens in a new tab) · AI Kit motion.dev/docs/ai-kit (opens in a new tab)
• 21st MCP — 21st.dev/mcp (opens in a new tab)
• Claude Design — claude.ai (opens in a new tab)

Built for you by Jonathan Gutierrez — AI Systems by Jon.