Le bon goût pour Claude Code

Ce que c'est et pourquoi ça compte

Demandez à Claude Code la page de votre app et vous obtenez presque toujours la même : un titre centré, une petite étiquette au-dessus, trois blocs avec une icône, un dégradé doux. Rien n'est faux, mais rien n'est à vous. C'est la moyenne de toutes les pages que le modèle a vues.

Taste Skill sert à faire disparaître cette moyenne. C'est une Agent Skill, c'est-à-dire un dossier d'instructions et de petits programmes que Claude utilise quand vous lui demandez une page. Le code est ouvert sur GitHub, sous licence MIT, donc gratuit. Il donne à Claude une direction artistique, de vraies photos d'archives ouvertes et un contrôle dans un vrai navigateur avant de vous dire qu'il a fini.

C'est pour ceux qui font tout seuls et n'ont pas de designer : founders, indie hackers, ceux qui codent avec l'IA. Ça marche avec n'importe quelle technologie, de React au HTML simple. Le prix, c'est le temps : une page demande de 30 à 45 minutes et quelques centaines de milliers de tokens.

1. Ce qu'il vous faut et comment l'installer

Avant de l'installer, vérifiez deux choses sur votre ordinateur :

• Node 22 ou plus récent. Node est le programme qui fait tourner JavaScript hors du navigateur : pour voir votre version, tapez node -v dans le terminal.
• Chrome, Edge ou Chromium installé. Il sert à ouvrir la page et à la photographier.

Pas besoin de clés API, et il n'installe rien de son côté sur l'ordinateur. Il n'utilise internet que pour chercher des photos. Ensuite, vous l'installez comme plugin de Claude Code :

1. Ouvrez Claude Code et tapez /plugin marketplace add Leonxlnx/taste-skill. Cela ajoute le catalogue qui contient la skill.
2. Puis tapez /plugin install taste-skill@taste-skill. La skill arrive dans Claude Code avec le préfixe taste-skill, pour ne pas se mélanger avec vos autres skills.
3. Ouvrez une nouvelle session, pour être sûr que Claude la voie. Pour la mettre à jour plus tard, il y a /plugin update.

Ou installez-la depuis le terminal avec skills, un programme qui installe des skills dans les assistants de programmation :

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

2. Comment il travaille, en six étapes

Derrière, il y a une étude : 248 sites rassemblés à partir de deux galeries de design, 156 de One Page Love et 92 des Sites of the Day d'Awwwards, dont 247 se sont chargés. Les notes n'ont pas été données par des personnes, mais par des modèles d'IA, qui les ont jugés à partir de captures et de mesures. L'étude le dit elle-même.

De là sortent les règles et vingt directions, c'est-à-dire vingt façons de composer une page. Quand vous lui demandez une page, Claude fait ceci :

1. Il lit la demande et fait l'inventaire : de huit à douze choses que seul votre produit possède et aucun concurrent. Le nom et ce qu'il veut dire, les chiffres, la contrainte avec laquelle il vit.
2. Un programme, draw.mjs, tire au hasard trois directions parmi celles qui conviennent à la demande, et Claude en choisit une. Vous ne choisissez pas : un modèle laissé libre prend toujours la solution la plus attendue.
3. Il trouve l'idée : une phrase qui relie un élément de votre inventaire à la direction choisie. Si la phrase marche aussi pour votre concurrent le plus proche, il la jette.
4. Il construit la page avec de vraies photos : les vôtres d'abord. Si vous n'en avez pas, assets.mjs cherche des images de votre univers dans des archives ouvertes comme Wikimedia Commons, Openverse, le Met et l'Art Institute of Chicago (pour les vidéos, aussi Internet Archive et la NASA), et met les crédits sur la page.
5. Il fait le contrôle. lint.mjs lit le code, inspect.mjs ouvre la page dans un vrai navigateur à 1440, 768 et 390 pixels de large, jusqu'au téléphone, et marque FAIL là où une règle saute : titres sur plus de deux lignes, dégradés, écrans vides. Claude doit corriger chaque FAIL.
6. Il regarde ses captures, les juge, corrige les trois pires problèmes et revérifie. Trois tours au maximum.

À la fin, il vous fait un compte rendu : la direction, l'idée, ce qui ne le convainc pas encore et la liste des photos avec auteur, licence et source.

3. Le premier prompt : la page de votre app

Plus vous lui donnez, mieux il travaille. Voici le prompt que j'utiliserais pour la page d'une app de fitness faite par un founder seul. Remplacez les parties entre [ ] par les vôtres :

Utilise la skill design-taste-frontend pour créer la landing page de [nom de l'app], une app iPhone qui [ce qu'elle fait, en une phrase].
Pour qui : [qui l'utilise].
La seule chose que la page doit faire faire : [télécharger l'app depuis l'App Store].
Ce qu'elle seule possède : [trois ou quatre choses vraies : un chiffre, une contrainte, une habitude].
Stack : [HTML simple / Next.js].
Mes photos : [dossier avec les vraies photos, ou : aucune].
N'invente ni avis, ni clients, ni chiffres. À la fin, dis-moi la direction tirée, l'idée et quels textes d'exemple je dois remplacer.

La dernière ligne compte. La skill n'invente ni avis, ni clients, ni statistiques, mais elle comble les vides avec des textes d'exemple et les liste dans le compte rendu. Ceux-là, vous les vérifiez vous-même, un par un.

4. Donnez-lui ce que vous seul avez

Dans l'étude, les pages les mieux notées partaient d'une idée tirée du produit lui-même, pas du style. Votre travail, c'est donc de lui donner cette matière première :

• Le nom et ce qu'il veut dire. Il peut devenir le centre de la page.
• Vos vraies photos : vous, le produit, le lieu. Dites-lui qu'elles sont à vous et il les met en premier. Une vraie photo du produit finit en grand sur le premier écran.
• Les vraies captures de votre app. Pour un logiciel, c'est l'image la plus forte qui soit.
• La contrainte : ce que vous ne faites pas, ou seulement d'une certaine façon.

Voici mon matériel pour la page.
Nom : [nom], et il veut dire [sens].
Mes photos dans [dossier] : elles sont vraies, utilise-les avant toute autre.
Captures de l'app dans [dossier].
Vrais chiffres : [chiffres].
La contrainte qui nous rend différents : [contrainte].
Pars de ces éléments pour l'inventaire et l'idée, pas de la catégorie.

5. Refaire une page que vous avez déjà

Si vous avez déjà la page, vous ne repartez pas de zéro : refaire des pages existantes fait partie de la skill. Avant de toucher à quoi que ce soit, il ouvre votre page dans un vrai navigateur, la mesure et enregistre les captures de l'avant. Il garde votre technologie, les contenus et ce qui marche, et change polices, couleurs, marges et titres, et en dernier les blocs faits en série. À la fin, il vous montre l'avant et l'après.

Utilise la skill design-taste-frontend pour refaire la page située à [chemin ou adresse locale]. Enregistre d'abord son état actuel, avec mesures et captures. Garde le stack, les contenus, les liens et les formulaires qui fonctionnent. À la fin, montre-moi l'avant et l'après aux trois largeurs et dis-moi ce que tu as changé.

6. Tableaux de bord et écrans d'app

Ça marche aussi pour les écrans où l'on travaille : tableaux de bord, panneaux d'administration, réglages. Ici, il suit son propre parcours, tiré d'une étude à part sur 23 écrans de vrais produits : draw.mjs --app tire un style pour votre type de produit, et inspect.mjs --app contrôle avec ses propres règles, comme la couleur seulement sur les données et les chiffres alignés.

Utilise la skill design-taste-frontend pour le tableau de bord de [app] : c'est un écran où l'on travaille, pas une page à lire. Qui l'utilise : [qui]. La question à laquelle il doit répondre en premier : [question]. Des données réalistes qui tombent juste : [données ou fichier]. Utilise les mêmes couleurs et polices que ma landing page.

Les erreurs les plus courantes

• La lancer sans regarder combien d'usage il vous reste. Une page, c'est 30 à 45 minutes et quelques centaines de milliers de tokens : sur un forfait avec des limites, c'est une grosse part. Faites-la quand vous avez de la marge.
• Lui donner une demande d'une ligne. Sans votre matériel, l'idée vient de la catégorie, et la page ressemble de nouveau à toutes les autres.
• L'utiliser sans Node 22 ou sans Chrome. L'inspecteur ne démarre pas : Claude contrôle seulement le code, regarde des captures faites autrement et vous dit que l'inspecteur n'a pas tourné.

Check-list

• J'ai Node 22 ou plus récent et Chrome, Edge ou Chromium
• Taste Skill est installée et Claude la reconnaît
• Le prompt contient le nom, ce que ça fait, pour qui et la seule chose à faire faire
• L'inspecteur termine avec zéro FAIL à 1440, 768 et 390
• J'ai remplacé les textes d'exemple listés dans le compte rendu
• Les crédits des photos sont en bas de la page

Questions fréquentes