Le skill officiel de design : l'installer et le voir travailler

Un skill, deux adresses officielles

Le skill frontend-design est publié par Anthropic à deux endroits, avec le même fichier d'instructions :

• comme plugin dans la place de marché officielle d'Anthropic, claude-plugins-official. Un plugin est un paquet qui ajoute des skills, des commandes ou des outils à Claude Code ;
• dans le dépôt anthropics/skills, au milieu d'autres skills d'exemple comme skill-creator et webapp-testing.

Sa licence est Apache 2.0 : tu peux le lire, l'adapter et le redistribuer, à condition de garder la mention de licence. Le dépôt prévient que ces skills sont fournis pour la démonstration et l'apprentissage. Teste-les chez toi avant de t'y fier.

Je te conseille le plugin : il n'installe que ce skill, et Claude Code connaît déjà sa place de marché.

L'installer

Lance Claude Code dans un dossier, puis tape :

/plugin install frontend-design@claude-plugins-official

La commande n'installe pas tout de suite. Elle ouvre la fiche du plugin : ce qu'il ajoute et, pour la place de marché officielle, son coût en contexte. Le contexte, c'est tout ce que Claude garde en tête pendant la session : chaque skill installé y prend un peu de place.

Choisis ensuite où l'installer :

• Install for you (user scope) : pour toi, dans tous tes projets. C'est le bon choix pour essayer.
• Install for all collaborators on this repository (project scope) : pour toute l'équipe du projet, écrit dans .claude/settings.json.
• Install for you, in this repo only (local scope) : pour toi, dans ce projet seulement.

La dernière phrase du résumé te dit si c'est prêt. Plugin is now active. : rien d'autre à faire. Run /reload-plugins to apply. : Claude Code relance le chargement des plugins pour toi en fermant le panneau.

Si Claude Code ne connaît pas claude-plugins-official, ajoute la place de marché, puis relance l'installation :

/plugin marketplace add anthropics/claude-plugins-official

Pour vérifier, tape / dans Claude Code : le skill apparaît sous la forme /frontend-design:frontend-design. Les skills d'un plugin portent toujours le nom du plugin devant. Depuis ton terminal, hors session, claude plugin list affiche aussi la liste des plugins installés.

Ce qu'il demande à Claude

Le SKILL.md du skill fait environ 70 lignes. Voici ce qu'il demande, dans l'ordre.

Un point de vue. Claude joue le directeur artistique d'un studio réputé pour donner à chaque client une identité qu'on ne confond avec personne. Le client a déjà refusé des propositions trop convenues.

Partir du sujet. Les choix originaux viennent du métier, des matières et du vocabulaire du sujet. Le skill donne un exemple : un jouet pour des filles de 8 à 11 ans n'a rien à voir avec un tableau de bord d'analystes financiers. Si le brief ne dit pas de quoi il s'agit, pour qui, et ce que la page doit faire, Claude doit le proposer et te le faire confirmer.

Un plan avant le code. Quatre à six couleurs nommées, en hexadécimal. Les polices et leur rôle. Une mise en page décrite en une phrase, avec des croquis en caractères de texte (on parle de croquis ASCII). L'alignement du texte. Les principes qui rendent cette page unique.

Relire le plan. Si une partie ressemble à ce que Claude produirait pour n'importe quelle page semblable, il la revoit, et il dit ce qu'il a changé et pourquoi. C'est le cœur du skill.

Construire, puis se critiquer. Claude prend des captures si son environnement le permet. Le skill cite le conseil de Chanel : avant de sortir, regarde-toi dans le miroir et enlève un accessoire. Une seule audace, mise en valeur par tout le reste, plus sobre.

Un plancher de qualité, sans l'annoncer. La page s'adapte jusqu'au téléphone. Le focus clavier est visible : c'est le contour qui montre où tu es quand tu navigues avec la touche Tab. Le réglage « réduire les animations » est respecté, les contrastes sont accessibles, les couleurs s'accordent.

Des mots utiles. Un bouton dit ce qu'il fait : « Enregistrer les modifications », pas « Envoyer ». Une action garde le même nom de bout en bout : le bouton « Publier » mène au message « Publié ». Un message d'erreur dit ce qui s'est passé et comment réparer, sans s'excuser.

Un premier essai

Crée un dossier vide et lance Claude Code dedans (mêmes commandes dans PowerShell) :

mkdir essai-design
cd essai-design
claude

Appuie sur Shift+Tab jusqu'à voir plan mode on : Claude te présentera son plan avant de toucher au moindre fichier. Le mode plan est détaillé dans la formation Bien parler à Claude. Puis envoie :

Crée la page d'accueil d'une boulangerie de quartier, en une seule page
HTML avec son fichier CSS. Elle est ouverte de 6 h 30 à 19 h 30, sauf le lundi.
Ses trois spécialités : un pain au levain, une brioche feuilletée
et une tarte du jour. Le visiteur doit trouver l'adresse et les horaires
en moins de cinq secondes.

Tout le texte visible est en français, avec la typographie française :
espaces insécables avant : ; ! ? et guillemets « ».

Avant de coder, montre-moi ton plan : palette en hexadécimal, polices
et leur rôle, croquis de la page, et ce que tu as changé pour éviter
un look par défaut.

Le skill devrait se charger tout seul : sa description parle de construire une interface. Pour le forcer, commence ton message par /frontend-design:frontend-design.

Ce qu'il faut regarder

Ne juge pas d'abord le résultat. Juge le plan :

• Y a-t-il des couleurs en hexadécimal, avec un nom et un rôle ?
• Le croquis montre-t-il l'adresse et les horaires tout de suite ?
• Claude dit-il ce qu'il a revu, et pourquoi ?

Puis regarde le piège. Une boulangerie appelle le crème, le brun et une police à empattements : c'est exactement la famille 1 de la leçon précédente. Si le plan y tombe, réponds simplement : « Ton plan tombe dans le crème et la terre cuite. Propose autre chose, qui vienne du quartier ou du four. »

Chaque essai donne un résultat différent. C'est justement ce qu'on cherche : un site qui vient de son sujet, pas du milieu.

Ce que le skill ne fait pas seul

Le skill apporte une méthode et du goût. Il ne connaît ni ton client, ni tes textes, ni ta marque. Si le brief est vide, il invente le sujet, les textes et la direction. Il ne garde pas non plus ton style d'une session à l'autre.

Ce que la suite t'apporte

La suite comble exactement ces trous :

• Un brief en huit parties, prêt à copier : objectif, public, contenu réel, direction, palette, polices, mouvement et critères de fin. Le skill porte le goût, le brief porte ton projet.
• Quatre directions avant de coder, la méthode recommandée par Anthropic pour obtenir des pistes vraiment différentes, et comment choisir.
• Des couleurs, des polices et un mouvement lisibles : contrastes mesurés, lignes courtes, animations qui respectent le réglage de l'appareil.
• Ton skill de marque, pour que ton style survive d'une session à l'autre, puis une scène animée qui ne fait pas ramer, et une vérification complète dans le navigateur.

Sources

Pages officielles vérifiées le 19 octobre 2026 :

• Claude Code : Install and manage plugins (installation, portées, /reload-plugins, nom /plugin:skill)
• anthropics/claude-plugins-official et son plugin frontend-design
• anthropics/skills (place de marché, avertissement, licences)
• Le skill frontend-design (SKILL.md) et sa licence Apache 2.0
• Claude Code : Extend Claude with skills (chargement automatique, skills de plugin)