Kompletní redesign webu za 20 minut s 21st.dev a Claude Code

Dneska jsem za jednu session kompletně přestavěl airepublic.cz. Nová typografie, nové barvy, nová navigace, animované hero s Pong hrou — všechno. A klíčovým nástrojem byla 21st.dev Magic MCP připojená přímo do Claude Code.

Co je 21st.dev?

21st.dev je marketplace s UI komponentami. Stovky hotových React komponent — navigace, hero sekce, karty, formuláře. Většina používá Tailwind a shadcn/ui. Můžeš si je prohlížet na webu, ale zajímavější je MCP server — připojíš ho do Claude Code a Claude může hledat, číst a adaptovat komponenty přímo v konverzaci.

Jak jsem to připojil

1. Získání API klíče

Na 21st.dev v dashboardu → sekce MCP → zkopírovat API klíč.

2. Konfigurace .mcp.json

V kořenu projektu jsem vytvořil soubor .mcp.json:

{
  "mcpServers": {
    "21st-magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "TWENTY_FIRST_API_KEY": "váš-api-klíč"
      }
    }
  }
}

Restart Claude Code a server se připojí. Dostanete 4 nové nástroje:

• component_inspiration — hledání komponent podle popisu
• component_builder — generování nových komponent
• component_refiner — vylepšování existujících
• logo_search — hledání SVG log

3. Důležité: .gitignore

Soubor .mcp.json obsahuje API klíč, takže:

# .gitignore
.mcp.json

Redesign v praxi

Celý redesign jsem řídil z jedné Claude Code session. Tady je co se stalo:

Brainstorming s UI/UX Pro Max

Začal jsem s UI/UX Pro Max skillem — vygeneroval design systém a ukázal mi varianty v prohlížeči přes visual companion. Vybral jsem:

• Styl: Minimal Monochrome
• Fonty: Space Grotesk (headings) + DM Sans (body)
• Accent: Teal #0d9488
• Navigace: Floating pill
• Karty: Border cards

Subagent-driven implementace

Claude rozepsal plán do 8 tasků a dispatchoval subagenty — každý task implementoval jiný agent s fresh kontextem. Celý redesign proběhl paralelně kde to šlo.

21st.dev jako inspirace

Tady přišla 21st.dev. Řekl jsem Claudovi: "Chtěl bych do hero tohle" a dal jsem odkaz na komponent animated-hero-section z 21st.dev.

Claude použil component_inspiration tool, stáhl kód komponenty, pochopil pattern (canvas Pong hra s pixel textem) a přizpůsobil ho mému designu:

• Text změnil na "AIREPUBLIC / TESTUJI AI ZA VAS"
• Barvy přeladil na teal accent
• Přidal dark/light mode support
• Integroval jako pozadí hero sekce s glass overlay kartami navrchu

Totéž pro navigaci — hledal floating navbar animated blur, dostal zpátky 3D Adaptive Navigation Bar a vzal z něj pattern pro scroll-hide/show a hover indicator.

Výsledek

Co vzniklo za 20 minut

| Změna | Detail | |-------|--------| | Fonty | Geist → Space Grotesk + DM Sans | | Barvy | Purple → Teal monochrome | | Navigace | Fixed header → floating pill se scroll-hide a hover indicator | | Hero | Statický text → Pong hra na pozadí + glass karty | | Karty | Ploché → teal glow hover + lift efekt | | Footer | Strukturovaný → minimální inline | | Přechody | Žádné → fade-in na všech stránkách | | Dark mode | Fungoval → funguje + animovaný toggle + real-time canvas přepínání | | Three.js | 934 řádků particles → smazáno, nahrazeno 250 řádky canvas Pong |

Proč to funguje

1. MCP je game changer. Claude nemusí hádat jak komponenta vypadá — stáhne si přesný kód a adaptuje ho. Žádné hallucinations.

2. 21st.dev má kvalitní komponenty. Nejsou to hello-world příklady. Jsou to produkční komponenty s animacemi, dark mode supportem a responzivitou.

3. Subagent-driven development. Každý task řeší agent s čistým kontextem. Nedochází k "context fatigue" kde by Claude zapomínal co už udělal.

4. Visual companion pro brainstorming. Místo psaní "chci tohle" vidím mockup v prohlížeči a kliknu na volbu. Rozhodování je 10× rychlejší.

Co bych udělal jinak

• Nepoužil bych ssr: false v Server Component. Stálo mě to 500 error a 5 minut debugování. Vždycky wrapper s 'use client'.
• Dev server restartovat po přidání nových souborů. Hot reload někdy nevidí soubory přidané mimo editor.

Závěr

21st.dev + Claude Code + MCP = nejrychlejší způsob jak redesignovat web, co znám. Neříkám, že nepotřebujete vkus — musíte vědět co chcete. Ale jak to implementovat? To je teď otázka minut, ne hodin.

Web běží na airepublic.cz. Zdrojáky jsou na GitHubu. A ten Pong na hero? Zkuste ho nechat chvíli běžet — je hypnotický.