Par défaut, Claude Code écrit du HTML qui fonctionne mais qui ne ressemble à rien : structure correcte, style plat, espacements au hasard. Deux installations changent complètement le résultat — c'est tout ce qu'il y a dans cette page, avec les commandes exactes.
Un skill, c'est un dossier de connaissances que Claude Code charge tout seul quand la tâche correspond. Celui-là lui donne les vraies règles du design : palettes de couleurs cohérentes, associations de polices, échelles d'espacement, états d'interaction (hover, focus, disabled), et les patterns propres à chaque type de produit.
Concrètement, tu récupères le dossier du skill et tu le déposes dans le répertoire des skills de ton projet :
Claude Code le détecte au démarrage de la session — aucune commande à lancer. Tu peux aussi coller l'URL du skill directement dans le chat et demander à Claude de l'installer : il télécharge le dossier et le range au bon endroit.
Tape / dans Claude Code : le skill doit apparaître dans la liste. S'il n'y est pas, c'est que le dossier n'est pas au bon niveau — il doit être dans .claude/skills/, pas dans un sous-dossier de plus.
Le skill donne le goût. Le MCP donne la matière : 21st.dev est une bibliothèque de milliers de composants d'interface (heroes, navbars, pricing, dashboards, shaders) que Claude peut chercher et intégrer directement dans ton code.
Récupère une clé API gratuite sur 21st.dev, puis ajoute le serveur en une commande :
Ou directement dans ton .claude/settings.json :
Un serveur MCP lancé par npx tourne en local, sur ta machine. Si tu utilises Claude Code depuis le navigateur ou un environnement hébergé, ce type de serveur ne peut pas se connecter — seuls les MCP en HTTP/SSE fonctionnent là-bas. Ce n'est pas une erreur de config : installe-le sur le Claude Code de ton poste.
Avec les deux en place, tu n'as plus besoin de décrire le CSS. Tu décris l'intention, le public et l'ambiance — Claude s'occupe du reste :
Trois précisions changent tout dans ce prompt : le public (il dicte le ton), l'ambiance (elle dicte la palette), et la liste des sections (elle dicte la structure). Sans elles, tu obtiens une page générique — avec elles, tu obtiens une page qui a un point de vue.
Ajoute une capture d'écran d'un site dont tu aimes le style dans ton prompt. Claude s'en sert comme référence visuelle et transpose le style dans ton contexte — c'est le raccourci le plus rapide vers un résultat qui ne « sent pas le template ».