Claude Code design : créer un site web premium en discutant avec Claude

Regarde d’abord, installe ensuite

« Créer des sites web grâce à Claude Code (MCP + Skills utilisés) ». Le playbook écrit suit.

Trois sites construits avec cette méthode

Trois maquettes de page d’accueil réalisées pour des artisans de la région nantaise : un couvreur-façadier, un paysagiste-élagueur, une entreprise de couverture. Même méthode, trois identités différentes. Aucune ne ressemble à un gabarit.

Ce qu’ils ont en commun : l’anatomie d’une page d’accueil qui convertit

1. Le téléphone en haut à droite, en toutes lettres, cliquable sur mobile.
2. Un sur-titre métier + ville (« Couvreur & façadier à Nantes ») : le visiteur et Google savent où ils sont.
3. Un titre qui promet un résultat, pas un slogan : « Un jardin impeccable, taillé par quelqu’un du coin. »
4. Une vraie photo du métier en fond, avec un voile sombre pour garder le texte lisible.
5. Un formulaire court dans le premier écran : nom, téléphone, ville. Trois champs, pas dix.
6. Deux boutons : « Demander un devis » et « Appeler ». Chacun choisit son canal.
7. Une typographie qui a du caractère : un titre avec empattements ou très serré, jamais la police par défaut.
8. Une couleur par métier : bleu ardoise pour la toiture, vert pour le jardin, ocre pour la couverture.

Tu parles, Claude exécute

Claude Code est un agent : il lit tes fichiers, lance des commandes, installe des outils, ouvre un navigateur. Tu n’as donc pas besoin de connaître les commandes d’installation. Tu dis ce que tu veux, il s’en occupe, et il te montre ce qu’il a fait. Les commandes sont dans ce guide, repliées, pour ceux qui veulent savoir ce qui se passe en coulisse.

Demande un site à une IA sans rien d’autre et tu obtiens la moyenne de ce qu’elle a vu : police par défaut, dégradé violet-bleu, trois cartes avec une icône au-dessus du titre. Il lui manque trois choses, et chaque outil de ce guide en apporte une :

Outil	Type	Ce qui manquait	Coût
Firecrawl	MCP	Des références : il lit les sites qui marchent dans ton secteur, identité visuelle comprise	Gratuit limité, puis crédits
Playwright	MCP	Des yeux : il ouvre un vrai navigateur et regarde le résultat	Open source
UI UX Pro Max	Skill	Un système : palette, typos, structure adaptées au secteur	Open source (MIT)
21st	MCP	Des composants soignés au lieu de tout réinventer	Clé gratuite
Impeccable	Skill	Du goût : il repère et corrige le « look IA »	Open source (Apache 2.0)

Un MCP branche Claude sur un outil réel (un navigateur, le web, une bibliothèque). Un skill lui apprend une méthode, qu’il charge quand la tâche s’y prête.

Installer Claude Code : la seule commande que tu tapes

Il faut un abonnement Claude payant (Pro, Max…) ou une clé API. Ouvre un terminal, colle cette ligne (macOS et Linux), puis lance claude dans un dossier vide :

curl -fsSL https://claude.ai/install.sh | bash
mkdir mon-site && cd mon-site
claude

À partir de là, tu ne tapes plus de commande. Tu écris en français.

Un message pour tout installer

Tu n’as pas besoin d’installer les outils un par un. Tu demandes, Claude fait.

Exemple d’échange dans Claude Code

Toi

Installe-moi pour ce projet : les MCP Playwright, Firecrawl et 21st, et les skills UI UX Pro Max et Impeccable. Dis-moi ce dont tu as besoin de ma part.

C’est fait pour Playwright, UI UX Pro Max et Impeccable. Firecrawl est branché en version gratuite, sans clé. Pour 21st, il me faut ta clé : crée-la sur 21st.dev/mcp et lance la commande ci-dessous toi-même, elle ne passera pas dans notre conversation. Relance-moi ensuite pour que je charge les nouveaux outils.

• claude mcp add playwright npx @playwright/mcp@latest
• claude mcp add –transport http firecrawl https://mcp.firecrawl.dev/v2/mcp
• npm install -g ui-ux-pro-max-cli && uipro init –ai claude
• npx impeccable install –providers=claude –scope=project

Toi

C’est relancé. Qu’est-ce qui est branché ?

Playwright, Firecrawl et 21st répondent, les deux skills sont chargés. On peut commencer le site.

# MCP
claude mcp add playwright npx @playwright/mcp@latest
claude mcp add firecrawl -e FIRECRAWL_API_KEY=fc-TA_CLE -- npx -y firecrawl-mcp
npx @21st-dev/cli@latest init --client claude
# Skills
npm install -g ui-ux-pro-max-cli && uipro init --ai claude
npx impeccable install
# Ou par la place de marché de plugins, dans Claude Code :
# /plugin install playwright@claude-plugins-official
# /plugin install firecrawl@claude-plugins-official

Firecrawl : partir de ce qui marche déjà

• Lecture de sites web
• Format « branding »
• Version gratuite sans clé

Firecrawl transforme une page web en texte propre, et son format branding en extrait l’identité visuelle : couleurs, polices, tailles, espacements, logo, composants. C’est la matière du brief : au lieu d’inventer, Claude part de trois sites qui fonctionnent dans ton secteur et en tire ce qui les rend crédibles.

Exemple d’échange dans Claude Code

Toi

Je fais le site d’un couvreur à Nantes. Trouve trois sites de couvreurs bien faits, récupère leur branding avec Firecrawl et fais-moi un tableau : couleurs, polices, structure de la page d’accueil. Ce qu’ils ont en commun, ce qui les distingue.

Voici le tableau. Point commun : le téléphone visible partout et une photo de chantier dès le premier écran. Aucun ne montre de formulaire court en haut de page : c’est une opportunité pour se démarquer.

• firecrawl_search « couvreur Nantes »
• firecrawl_scrape · formats: branding · ×3

UI UX Pro Max : le design system du secteur

• Skill
• Palettes, typos, structures
• Open source (MIT)

Ce skill donne à Claude une base de design interrogeable : styles d’interface, palettes, associations de polices, structures de landing page, règles par type d’activité. À partir de ton secteur, il sort un design system complet : structure de page, style, couleurs, typographies, effets, erreurs à éviter, et une checklist avant livraison (contraste, focus clavier, animations réduites, responsive de 375 à 1 440 px).

Exemple d’échange dans Claude Code

Toi

Avec UI UX Pro Max, génère le design system du couvreur, en tenant compte du tableau Firecrawl. Je veux un rendu sérieux, artisanal, pas « startup ».

Structure : hero avec preuve et formulaire, services, zone d’intervention, avis, devis. Palette ardoise et bleu gris, titres à empattements, texte en sans-serif lisible. À éviter : néons, dégradés violets, animations appuyées. Je l’enregistre dans le projet.

• search.py « roofing contractor » –design-system –persist
• Écrit design-system/couvreur/MASTER.md

21st : des composants soignés, adaptés à ta charte

• Bibliothèque de composants
• Clé gratuite
• Ex-« Magic MCP »

21st.dev rassemble des composants d’interface : sections hero, tableaux de prix, témoignages, menus, formulaires. Son MCP permet à Claude d’en chercher un, d’en récupérer le code et de l’adapter au design system. L’ancien « Magic MCP » s’appelle désormais 21st MCP ; les anciennes clés ont été réinitialisées, il faut en créer une nouvelle.

Exemple d’échange dans Claude Code

Toi

Construis la page d’accueil. Pour les avis et le formulaire de devis, cherche sur 21st les composants les plus sobres et adapte-les au design system.

Page construite. J’ai pris un bloc d’avis en grille et un formulaire en carte, recolorés en ardoise, avec les polices du projet. Le formulaire garde trois champs : nom, téléphone, ville.

• 21st · search « testimonials »
• 21st · get_component ×2
• Écrit index.html, styles.css

La recherche et la récupération de composants marchent avec la clé gratuite. La génération par l’IA de 21st demande un accès en plus ; sans lui, c’est Claude qui adapte le code, et c’est très bien.

Playwright : Claude regarde ce qu’il a fait

• Vrai navigateur
• Captures mobile et ordinateur
• Open source (Microsoft)

C’est l’outil qui change le plus la qualité. Sans lui, Claude écrit du CSS à l’aveugle. Avec lui, il ouvre la page dans un vrai navigateur, la redimensionne, clique, fait des captures, et voit le bouton qui déborde sur mobile avant toi. Par défaut, la fenêtre s’affiche : tu le regardes travailler.

Exemple d’échange dans Claude Code

Toi

Ouvre la page avec Playwright à 390, 768 et 1440 px de large. Liste tout ce qui casse ou fait amateur, corrige, puis refais les captures pour me montrer l’avant et l’après.

Trois problèmes à 390 px : le numéro de téléphone passait sur deux lignes, le formulaire collait au bord, le titre prenait tout l’écran. Corrigés. Voici les captures avant et après.

• browser_navigate · index.html
• browser_resize 390 / 768 / 1440
• browser_take_screenshot ×6

Impeccable : chasser le « look IA »

• Skill
• Commandes /impeccable
• Open source (Apache 2.0)

Impeccable part du skill frontend-design d’Anthropic et va plus loin : une commande par intention (critique, audit, finitions, typographie, mise en page, animation) et des règles qui détectent les tics des interfaces générées par IA : polices par défaut, dégradés violet-bleu, cartes dans des cartes, texte gris sur fond coloré. Au premier lancement, /impeccable init te pose quelques questions (public, objectif, ton) et les garde dans un fichier PRODUCT.md que les commandes suivantes relisent.

Exemple d’échange dans Claude Code

Toi

/impeccable critique la page d’accueil, puis corrige les points bloquants.

Deux points bloquants : le texte gris clair sur la photo manque de contraste, et les trois cartes de services sont identiques, on ne voit pas laquelle compte. J’ai renforcé le voile de la photo et mis la réparation d’urgence en avant.

Les commandes les plus utiles : /impeccable craft (de l’idée au code), critique (revue UX), audit (accessibilité, performance, responsive), typeset (typographie), polish (dernière passe avant livraison).

Les autres skills et MCP utiles

Tous dans la place de marché officielle de plugins Claude Code. Même principe : demande à Claude de les installer.

• frontend-design (Anthropic) : pousse Claude vers une direction esthétique affirmée plutôt que le gabarit moyen.
• context7 : la documentation à jour des bibliothèques (Tailwind, Astro, Next.js…), pour éviter du code écrit pour une version dépassée.
• chrome-devtools-mcp : traces de performance, requêtes réseau, console. Le complément de Playwright pour la vitesse du site.
• figma : si le client arrive avec une maquette, Claude lit ses composants et ses couleurs au lieu de deviner.
• vercel ou netlify-skills : mettre le site en ligne et suivre les déploiements sans quitter la conversation.
• Un MCP de génération d’images (chez nous, Gemini) : pour les illustrations abstraites. Pour le métier, de vraies photos.

Un site en six messages

1. Cadrer« /impeccable init » : public, offre, ton. Tout part de là.
2. Regarder« Récupère le branding de trois sites du secteur. »
3. Poser le système« Génère le design system avec UI UX Pro Max. »
4. Construire« Construis l’accueil, avec les composants 21st. »
5. Voir et corriger« Captures à 390, 768, 1440 px, corrige, recapture. »
6. Finir« /impeccable audit, puis polish. »

Ou tout d’un coup, avec ce prompt de départ à adapter :

Tu construis le site de [ENTREPRISE], [ACTIVITÉ] à [VILLE].
Cible : [CLIENT IDÉAL]. Objectif de la page : [DEVIS / APPEL / RDV].
1. Lis PRODUCT.md. S'il n'existe pas, lance /impeccable init.
2. Avec Firecrawl, récupère le branding de trois sites du secteur.
   Résume ce qu'ils ont en commun. Ne copie ni texte ni logo.
3. Avec UI UX Pro Max, génère le design system adapté.
4. Construis la page d'accueil. Cherche sur 21st les composants
   dont tu as besoin et adapte-les au design system.
5. Avec Playwright, capture la page à 390, 768 et 1440 px.
   Corrige tout ce qui casse, puis refais les captures.
6. Termine par /impeccable audit et corrige les points bloquants.
Montre-moi les captures finales avant de t'arrêter.

Ce que ces outils ne font pas à ta place

La checklist qualité

• Contraste du texte d’au moins 4,5:1 sur tous les fonds, photos comprises.
• Focus visible au clavier sur chaque lien et chaque bouton.
• Aucun débordement horizontal à 375, 768, 1024 et 1440 px.
• Animations coupées quand le visiteur a activé « réduire les animations ».
• Des icônes SVG, pas d’emoji en guise d’icônes.
• Un seul H1, des H2 et H3 dans l’ordre, un title et une meta description par page.
• Images compressées, avec dimensions et texte alternatif.
• Formulaire testé pour de vrai : le message arrive bien chez le client.

Questions fréquentes