frontend-design (Anthropic)

Avis

Codex CLI 0.166 (gpt-6-astra, low reasoning), un projet temporaire neuf à chaque exécution, skill installé ou absent, deux exécutions par groupe, réseau coupé. Nous n'avons jamais mentionné le skill dans le prompt, ce qui teste aussi le déclenchement automatique. Trois tâches : une page d'accueil pour un abonnement inventé de snacks aux algues (Tidepool), un tableau de bord de surveillance de la qualité de l'eau avec des données d'exemple, et une refonte d'une page d'accueil volontairement fade de salle d'escalade qui devait conserver tout son contenu. Nous avons rendu chaque page avec Playwright (desktop 1440 px et mobile 390 px) dans un bac à sable sans réseau et les avons notées en aveugle à partir des captures, de 0 à 5. Nous avons aussi compté des fonctionnalités précises dans le HTML.

Comparaison à trois bras

Mesuré avec Codex CLI sur 18 exécutions, noté par des contrôles basés sur des règles, sans juge LLM. Total 25.5 / 30, verdict Selon les cas.

Verdict : selon les cas (25.5 / 30, le meilleur score de nos trois premières évaluations). Source : anthropics/skills, skills/frontend-design, épinglé au commit ca45fc4. Installation : npx skills@latest add anthropics/skills --skill frontend-design. Apache-2.0.

Présentation

Un seul fichier de prose, aucun script. Il demande à l'agent de se comporter comme le directeur artistique d'un studio qui a déjà rejeté les propositions clichés : choisir une palette, des typographies et une mise en page propres au brief, éviter les valeurs par défaut typiques de l'« IA générée » (fond crème avec accent terracotta, surtitre en majuscules au-dessus de chaque titre, marqueurs numérotés 01/02/03 qui ne marquent aucune séquence), travailler en deux passes (planifier, relire le plan au regard du brief, puis construire), et finir par une auto-critique. Il énumère aussi des exigences minimales de qualité : adaptatif au mobile, focus clavier visible, mouvement réduit respecté.

Notre méthode de test

Codex CLI 0.166 (gpt-6-astra, raisonnement faible), un projet temporaire neuf par exécution, skill installé ou absent, deux exécutions par groupe, réseau coupé. Nous n'avons jamais mentionné le skill dans le prompt, ce qui teste aussi le déclenchement automatique. Trois tâches : une page d'atterrissage pour un abonnement fictif à des snacks aux algues (Tidepool), un tableau de bord de surveillance de la qualité de l'eau avec des données d'exemple, et la refonte d'une page d'accueil de salle d'escalade volontairement fade qui devait conserver tout son contenu. Nous avons rendu chaque page avec Playwright (bureau 1440 px et mobile 390 px) dans une sandbox sans réseau et les avons notées à l'aveugle à partir des captures d'écran, de 0 à 5. Nous avons aussi compté des éléments précis dans le HTML.

Ce qui s'est passé

Ça se déclenche tout seul. Le fichier du skill a été lu dans les six exécutions avec le skill, sans qu'on l'y invite. Personne n'a eu à taper de commande.

Les tics qu'il nomme disparaissent bien. Par page, les pages témoins utilisaient en moyenne 3.2 surtitres en majuscules et 1.5 marqueurs numérotés ; les pages réalisées avec le skill en utilisaient 0.3 et 0. C'est le conseil du skill qui apparaît dans le résultat. Aucun groupe n'a utilisé les codes hexadécimaux crème et terracotta qu'il déconseille, et l'usage des dégradés était identique (0.17 par page). Les familles de polices étaient limitées aux polices système dans les deux groupes parce que la sandbox était hors ligne, ce qui pénalise un skill attaché à la typographie. Nous nous attendons à des résultats différents avec des polices web.

La qualité globale était à peu près la même. Les scores à l'aveugle atteignaient en moyenne 3.75 avec le skill et 3.5 sans. Les pages d'atterrissage faisaient mieux avec le skill (4.0 contre 3.25), le tableau de bord et la refonte étaient à égalité. Avec deux exécutions par cellule, c'est du bruit. Toutes les pages étaient correctes : hiérarchie claire, espacements sensés, aucune mise en page cassée.

L'uniformité reste intacte. Trois des quatre pages d'atterrissage, avec et sans le skill, utilisaient le même titre, « A little ocean. A lot of crunch. » ; la quatrième (une exécution avec le skill) écrivait « A little sea. » avec un texte différent. Les quatre partageaient la même mise en page générale : des sachets de produit et une carte tarifaire au milieu de la page. Le skill demande « un point de vue distinctif propre à ce brief », mais un modèle exécuté deux fois à partir du même prompt converge encore vers sa propre valeur par défaut. Le skill élimine les clichés de surface ; il ne diversifie pas l'idée sous-jacente. La tâche de refonte a produit un peu plus de variété typographique : les exécutions témoins utilisaient Arial/Helvetica et Courier, les exécutions avec le skill choisissaient une police d'affichage de style Impact avec Helvetica Neue ou Avenir Next. Ce n'est qu'une variété de polices système.

Les exigences minimales étaient satisfaites à égalité. La balise meta viewport, les requêtes @media et les styles :focus apparaissaient sur chaque page des deux groupes. La gestion de la réduction des mouvements manquait sur les deux tableaux de bord des deux groupes. Le débordement mobile était nul sur 10 pages sur 12 ; une page d'atterrissage de chaque groupe débordait de 2 à 6 pixels.

Aucun surcoût. Les exécutions avec le skill utilisaient en moyenne 87,900 tokens contre 93,000 sans (0.95x) et duraient 155 secondes contre 189. Lire le fichier coûte peu au regard des pages elles-mêmes.

Une réserve sur nos propres vérifications

Notre vérification automatisée de la conservation des prix « $22 / $79 / $720 » a échoué sur trois des quatre exécutions de refonte, dans les deux groupes. C'est un défaut de notre regex, pas des pages : les prix étaient répartis entre des balises <span>, et les captures d'écran montrent les trois prix présents. Nous n'avons pas utilisé cette vérification dans les scores.

Revue de sécurité

Un fichier markdown et un fichier de licence. Le scanner n'a rien trouvé ; le seul domaine est apache.org dans le texte de la licence. Aucun script, binaire, caractère caché ni instruction concernant des secrets. Voir security.md.

Scores

À qui cela s'adresse

Si les pages de votre agent arrivent toujours avec les mêmes surtitres en majuscules et les mêmes marqueurs 01/02/03, ce skill y met fin de façon fiable, sans surcoût en tokens : il y a donc peu de raisons de ne pas le garder installé. Si vous espérez qu'il fasse produire à un modèle moyen un design visiblement plus original, nous ne l'avons pas constaté : vous obtiendrez toujours une page correcte qui ressemble à ce que le modèle fait d'habitude. Le remède fiable à l'uniformité, c'est un brief plus fort de votre part (une palette, une référence, une ambiance), et le skill précise que les mots du brief ont toujours la priorité.

Limites de ce test

Deux exécutions par cellule, un seul modèle, sandbox hors ligne avec polices système, trois tâches, notées par un seul évaluateur à l'aveugle plutôt qu'un panel. Le jugement en design est subjectif. Le niveau Codex compte pour Codex et Claude Code selon la règle du site.

Mise à jour (2 nov. 2026) : ajout du groupe « une phrase »

Nous avons ajouté un troisième groupe : pas de skill, mais une phrase ajoutée au prompt qui porte la règle centrale du skill (« Donne à la page un point de vue visuel précis et affirmé ... évite les tics génériques du design IA comme les dégradés violets, les surtitres en majuscules, les marqueurs numérotés 01/02 et les grilles identiques de trois cartes »). 6 exécutions, sur une machine Windows avec la même version de Codex, réseau coupé.

La phrase unique égale le skill (gain du skill sur elle : 0.00) et dépasse l'absence de skill de 0.25, tout cela dans le bruit à n=2. Les exécutions avec le prompt d'une phrase ont dépensé environ 1.4x les tokens du témoin ; le skill, non. La plus belle page de tout l'ensemble (un titre de tableau de bord en serif, « A clear view of your water. ») venait d'une exécution avec le prompt d'une phrase, et la seule page clairement boguée (un ticker illisible avec le texte littéral ?/b>) venait de l'autre exécution avec ce prompt sur la tâche de refonte. Les scores du nouveau groupe ont été attribués dans une session à l'aveugle distincte de la comparaison initiale à six exécutions, une petite dérive est donc possible (la même page d'atterrissage a obtenu 4.5 dans une session et 3.25 en moyenne dans l'autre). La part gratuite du skill reste la même : il supprime les tics précis qu'il nomme. Un prompt d'une phrase en fait l'essentiel aussi.