Top MCP design & UI Claude Code

Les MCP pour voir et interagir avec le web

Les MCP de design et UI donnent à Claude Code des yeux et des mains pour interagir avec le web. Prendre des screenshots, cliquer sur des boutons, remplir des formulaires, auditer des pages, générer des composants UI, tout devient possible directement depuis le terminal.

Playwright : Tests E2E et automatisation web

Le couteau suisse de l'automatisation web. Playwright permet à Claude Code de naviguer sur des pages web, prendre des screenshots, remplir des formulaires, cliquer sur des éléments et exécuter des tests end-to-end complets.

Installation

# Installer Playwright si ce n'est pas déjà fait
npm install -D @playwright/test
npx playwright install

# Ajouter le MCP
claude mcp add playwright -- npx -y @playwright/mcp

Configuration JSON

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

Outils disponibles

Playwright expose une riche collection d'outils :

• browser_navigate : Naviguer vers une URL
• browser_take_screenshot : Prendre un screenshot de la page
• browser_snapshot : Capturer le DOM accessible de la page
• browser_click : Cliquer sur un élément
• browser_fill_form : Remplir un formulaire
• browser_evaluate : Exécuter du JavaScript dans la page
• browser_wait_for : Attendre un élément ou une condition
• browser_network_requests : Observer les requêtes réseau

Cas d'usage

• Vérification visuelle : "Ouvre ma page d'accueil en local et prends un screenshot pour vérifier le rendu"
• Test E2E complet : "Teste le formulaire d'inscription : remplis les champs, soumets le formulaire et vérifie le message de succès"
• Debug responsive : "Prends un screenshot de ma page en mobile (375px) et en desktop (1440px) et compare les deux"
• Audit d'accessibilité : "Navigue sur ma page de contact, fais un snapshot du DOM accessible et identifie les problèmes d'accessibilité"

Chrome DevTools : Debug web avancé

Accédez aux Chrome DevTools directement depuis Claude Code. Inspectez le DOM, analysez les performances, surveillez les requêtes réseau et déboguez le JavaScript, le tout sans quitter votre terminal.

Via le MCP Playwright (recommandé)

Le MCP Playwright couvre la majorité des cas d'usage de Chrome DevTools :

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

Playwright expose des outils équivalents aux DevTools :

• browser_evaluate : Exécuter du JavaScript dans le contexte de la page
• browser_network_requests : Voir toutes les requêtes réseau
• browser_console_messages : Lire les messages de la console
• browser_take_screenshot : Capture d'écran
• browser_resize : Simuler un appareil mobile (redimensionner le viewport)

Cas d'usage

• Debug JavaScript : "Ouvre ma page, exécute un script de test et montre-moi les erreurs de la console"
• Analyse réseau : "Liste toutes les requêtes réseau de ma page et identifie celles qui prennent plus de 500ms"
• Debug mobile : "Redimensionne le navigateur à 375px de large et prends un screenshot de ma page"

21st.dev Magic : Composants UI modernes

Générez des composants UI modernes et prêts à l'emploi directement depuis Claude Code. 21st.dev Magic fournit des composants React inspirés par les meilleurs designs du web, avec support Tailwind CSS.

Installation

# 21st.dev Magic nécessite une API key
claude mcp add magic -e TWENTY_FIRST_API_KEY=votre-clé -- npx -y @21st-dev/magic

Configuration JSON

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic"],
      "env": {
        "TWENTY_FIRST_API_KEY": "votre-clé-21st-dev"
      }
    }
  }
}

Outils disponibles

• 21st_magic_component_builder : Générer un composant UI à partir d'une description
• 21st_magic_component_inspiration : Trouver de l'inspiration parmi des composants existants
• 21st_magic_component_refiner : Améliorer un composant existant
• logo_search : Rechercher des logos de marques

Cas d'usage

• Création rapide : "Crée un composant de pricing table avec 3 plans, des badges et un bouton CTA"
• Inspiration : "Montre-moi des exemples de hero sections modernes pour un site SaaS"
• Raffinement : "Prends ce composant Card et améliore-le avec des animations hover et un meilleur espacement"
• Prototypage : "Génère une page de login complète avec formulaire, validation et gestion d'erreurs"

Puppeteer : Scraping et screenshots

Automatisez Chrome pour le scraping, les screenshots et les tests. Puppeteer est l'outil historique de Google pour contrôler Chrome programmatiquement.

Installation

# Via la commande Claude
claude mcp add puppeteer -- npx -y @modelcontextprotocol/server-puppeteer

Configuration JSON

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Outils disponibles

• puppeteer_navigate : Naviguer vers une URL
• puppeteer_screenshot : Prendre un screenshot
• puppeteer_click : Cliquer sur un élément
• puppeteer_fill : Remplir un champ de formulaire
• puppeteer_evaluate : Exécuter du JavaScript
• puppeteer_select : Sélectionner une option dans un menu déroulant
• puppeteer_hover : Survoler un élément

Cas d'usage

• Web scraping : "Navigue sur ce site, extrait tous les prix des produits et présente-les dans un tableau"
• Screenshots comparatifs : "Prends un screenshot de la page avant et après mes changements CSS"
• Tests visuels : "Vérifie que le bouton 'Ajouter au panier' est visible et cliquable sur la page produit"

Comparatif : quel MCP choisir ?

Prochaines étapes

• Créer son premier workflow MCP : Combiner plusieurs MCP dans un flux de travail concret
• Top MCP productivité : Gmail, Slack, Calendar, Figma
• Installer et configurer un MCP : Guide d'installation détaillé