web-design-pro

name

web-design-pro

description

Create stunning, high-end websites that never look AI-generated. Combines the frontend-design skill (design thinking process) with 21st.dev MCP components (premium UI library) to build production-grade sites in one command. Replaces the need for a website designer. Use when user says 'design', 'website', 'landing page', 'build a site', 'create a website', 'web design', 'site web', 'crée un site', or wants to build any web page or application.

Web Design Pro

Build high-end, production-grade websites that look professionally designed — not AI-generated. This skill combines a design thinking process with premium UI components from 21st.dev to create stunning websites in one command.

What This Skill Does

1. Design Thinking — Before writing a single line of code, analyze the purpose, audience, and aesthetic direction
2. Premium Components — Use 21st.dev MCP to access high-end UI components (buttons, cards, forms, navbars, heroes, etc.)
3. Production Code — Output clean, working Next.js + Tailwind + shadcn/ui code ready to deploy
4. No AI Slop — Avoid generic AI aesthetics (no Inter font, no purple gradients, no cookie-cutter layouts)

Prerequisites

1. Claude Code

Install Claude Code if not already done:

npm install -g @anthropic-ai/claude-code

2. Frontend Design Skill

Install the official frontend-design skill:

claude plugins add @anthropic-ai/claude-code-plugins/frontend-design

This gives Claude a design thinking process before coding — purpose, tone, constraints, differentiation.

3. 21st.dev MCP Server (CRITICAL)

Connect the 21st.dev MCP server to give Claude access to premium UI components.

Add to your Claude Code MCP settings:

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

Get your API key at: https://21st.dev

This gives Claude access to:

• 21st_magic_component_builder — Build custom components from 21st.dev library
• 21st_magic_component_inspiration — Browse and get inspiration from component library
• 21st_magic_component_refiner — Refine/improve existing components
• logo_search — Find brand logos

Workflow

Step 1: Understand the Project

Before any code, gather context:

• What is the website for? (SaaS, portfolio, agency, e-commerce, landing page)
• Who is the audience? (developers, designers, executives, consumers)
• What tone? Pick a BOLD direction:
  • Brutally minimal
  • Luxury/refined
  • Editorial/magazine
  • Retro-futuristic
  • Organic/natural
  • Playful/toy-like
  • Art deco/geometric
  • Industrial/utilitarian
  • Soft/pastel
  • Dark/moody

Step 2: Choose Typography & Colors

Typography rules:

• NEVER use generic fonts (Inter, Roboto, Arial, system fonts)
• Choose distinctive display fonts (via Google Fonts or 21st.dev)
• Pair a display font with a refined body font
• Use CSS variables for consistency

Color rules:

• NEVER use purple gradients on white backgrounds
• Commit to a cohesive palette (3-5 colors max)
• Dominant color + sharp accent > evenly distributed colors
• Use CSS variables: --primary, --accent, --background, --foreground

Step 3: Build with 21st.dev Components

Use the MCP tools to find and integrate premium components:

/ui hero section with gradient background
/ui pricing table with toggle
/ui navbar with glass effect
/ui testimonial carousel
/ui footer with newsletter signup

The 21st_magic_component_builder tool returns ready-to-use React/Next.js code snippets.

Component search tips:

• Use 2-4 word queries: "hero section", "pricing card", "contact form"
• Browse for inspiration first: 21st_magic_component_inspiration
• Refine existing components: 21st_magic_component_refiner

Step 4: Add Motion & Polish

• Page load: Staggered reveal animations (animation-delay)
• Scroll: Scroll-triggered animations for sections
• Hover: Surprising hover states on interactive elements
• Micro-interactions: Subtle feedback on buttons, inputs, links
• Prefer CSS-only animations. Use Motion library for React when complex.

Step 5: Backgrounds & Visual Details

Create atmosphere and depth:

• Gradient meshes
• Noise/grain textures
• Geometric patterns
• Layered transparencies
• Dramatic shadows
• Decorative borders
• Custom cursors (when appropriate)

Anti-Patterns (NEVER DO THIS)

These make websites look like "AI slop":

AI Slop	What to Do Instead
Inter/Roboto/Arial font	Distinctive Google Fonts (Satoshi, Clash Display, Cabinet Grotesk, etc.)
Purple gradient on white	Bold, intentional color palette
Centered hero + 3 feature cards	Unexpected layouts, asymmetry, grid-breaking
Generic stock icons	Custom illustrations or 21st.dev components
Cookie-cutter spacing	Generous negative space OR controlled density
Rounded corners everywhere	Mix sharp and rounded intentionally
Same design every time	Unique aesthetic per project

Project Setup

When starting a new website project:

# Create Next.js project
npx create-next-app@latest my-site --typescript --tailwind --eslint --app --src-dir

# Install shadcn/ui
cd my-site && npx shadcn@latest init

# Install motion library (optional)
npm install motion

Output

Every website project should produce:

• Working Next.js application
• All pages responsive (mobile-first)
• Production-ready code (no placeholders)
• Distinctive aesthetic that doesn't look AI-generated
• Fast loading (optimized images, code splitting)

Example Prompts

"Crée un site web pour une agence de design haut de gamme, style dark luxe"
"Build a SaaS landing page for an AI analytics tool, editorial magazine style"
"Crée une landing page pour un coach sportif, style brutalist avec du mouvement"
"Design a portfolio site for a photographer, minimal with large imagery"

Quick Reference

Need	Tool
New component	21st_magic_component_builder
Browse inspiration	21st_magic_component_inspiration
Improve existing UI	21st_magic_component_refiner
Find a logo	logo_search
Design direction	Frontend Design skill (auto-activated)