Complete website redesign in 20 minutes with 21st.dev and Claude Code

Today I completely rebuilt airepublic.cz in a single session. New typography, new colors, new navigation, animated hero with a Pong game — the works. And the key tool was 21st.dev Magic MCP plugged straight into Claude Code.

What is 21st.dev?

21st.dev is a marketplace of UI components. Hundreds of ready-made React components — navigation, hero sections, cards, forms. Most use Tailwind and shadcn/ui. You can browse them on the web, but the more interesting part is the MCP server — you plug it into Claude Code and Claude can search, read, and adapt components directly in the conversation.

How I hooked it up

1. Getting the API key

On 21st.dev in the dashboard → MCP section → copy the API key.

2. Configuring .mcp.json

In the project root I created a .mcp.json file:

{
  "mcpServers": {
    "21st-magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

Restart Claude Code and the server connects. You get 4 new tools:

• component_inspiration — search components by description
• component_builder — generate new components
• component_refiner — improve existing ones
• logo_search — search for SVG logos

3. Important: .gitignore

The .mcp.json file contains an API key, so:

# .gitignore
.mcp.json

Redesign in practice

I drove the whole redesign from a single Claude Code session. Here's what happened:

Brainstorming with UI/UX Pro Max

I started with the UI/UX Pro Max skill — it generated a design system and showed me variants in the browser via visual companion. I picked:

• Style: Minimal Monochrome
• Fonts: Space Grotesk (headings) + DM Sans (body)
• Accent: Teal #0d9488
• Navigation: Floating pill
• Cards: Border cards

Subagent-driven implementation

Claude broke the plan into 8 tasks and dispatched subagents — each task was implemented by a different agent with fresh context. The whole redesign ran in parallel wherever possible.

21st.dev as inspiration

That's where 21st.dev came in. I told Claude: "I'd like this in the hero" and I gave him a link to the animated-hero-section component from 21st.dev.

Claude used the component_inspiration tool, pulled the component's code, understood the pattern (a canvas Pong game with pixel text) and adapted it to my design:

• Changed the text to "AIREPUBLIC / TESTUJI AI ZA VAS"
• Retuned the colors to the teal accent
• Added dark/light mode support
• Integrated it as a background for the hero section with glass overlay cards on top

Same thing for the navigation — he searched for floating navbar animated blur, got back a 3D Adaptive Navigation Bar, and took the pattern for scroll-hide/show and hover indicator from it.

Result

What came out of 20 minutes

| Change | Detail | |-------|--------| | Fonts | Geist → Space Grotesk + DM Sans | | Colors | Purple → Teal monochrome | | Navigation | Fixed header → floating pill with scroll-hide and hover indicator | | Hero | Static text → Pong game in the background + glass cards | | Cards | Flat → teal glow hover + lift effect | | Footer | Structured → minimal inline | | Transitions | None → fade-in on every page | | Dark mode | Worked → works + animated toggle + real-time canvas switching | | Three.js | 934 lines of particles → deleted, replaced with 250 lines of canvas Pong |

Why it works

1. MCP is a game changer. Claude doesn't have to guess what a component looks like — he pulls the exact code and adapts it. No hallucinations.

2. 21st.dev has quality components. These aren't hello-world examples. They're production components with animations, dark mode support, and responsiveness.

3. Subagent-driven development. Every task is handled by an agent with clean context. No "context fatigue" where Claude forgets what he already did.

4. Visual companion for brainstorming. Instead of typing "I want this," I see a mockup in the browser and click the option. Decision-making is 10× faster.

What I'd do differently

• I wouldn't use ssr: false in a Server Component. It cost me a 500 error and 5 minutes of debugging. Always a wrapper with 'use client'.
• Restart the dev server after adding new files. Hot reload sometimes misses files added outside the editor.

Conclusion

21st.dev + Claude Code + MCP = the fastest way to redesign a website I know of. I'm not saying you don't need taste — you have to know what you want. But how to implement it? That's now a question of minutes, not hours.

The site is live at airepublic.cz. Source is on GitHub. And that Pong on the hero? Let it run for a bit — it's hypnotic.