Même page d'atterrissage, avec et sans compétence

Le Banc d'Essai des Compétences, partie 1 sur 4. Même modèle, même prompt, une compétence installée ou non. Cette entrée : une page d'atterrissage. Également dans la série : un bot Telegram, le débogage d'un jeu de serpent, et l'audit d'un script Google zx.

Chaque évaluation de compétence sur ce site se termine par la même question non résolue : cette compétence permet-elle à Claude de faire un meilleur travail, ou lui fait-elle simplement faire plus de travail ? Ce ne sont pas la même chose, et la plupart des configurations de test ne peuvent pas les distinguer car les exécutions ne sont pas suffisamment contrôlées pour isoler la seule variable qui compte.

Nous avons donc mené une expérience. Deux exécutions, même modèle, même brief, jusqu'à la ponctuation. La seule différence entre elles est une instruction : "read and follow this installed skill." Pour l'exécution un, le modèle construit sans aide. Pour l'exécution deux, nous le dirigeons vers la compétence frontend-design réelle, celle qui se situe à 9,6 sur 10 dans notre catalogue, et le laissons lire le vrai SKILL.md avant de toucher à tout code. Ensuite, nous comparons les deux pages d'atterrissage ligne par ligne et comptons les jetons que chaque exécution a coûtés.

Ceci est la première de quatre comparaisons de ce type. Nous avons choisi une page d'atterrissage pour commencer car le design visuel est le domaine où le "mieux" est le plus facile à débattre et le plus difficile à simuler. Un héros avec beaucoup de dégradés ressemble soit à toutes les autres pages construites par IA, soit non, et vous n'avez pas besoin d'un benchmark pour voir lequel.

La configuration

Le brief était le même pour les deux exécutions, une page d'atterrissage en un seul fichier pour "Nimbus", une API météo fictive, rédigée selon un standard de calibre Stripe : section héros, trois blocs de fonctionnalités, un tableau de prix avec les niveaux Free, 29 $ et 199 $, un bloc d'exemple de code et un pied de page. Pas de frameworks, pas d'étape de build, un seul fichier HTML avec CSS intégré.

L'exécution un a reçu ce brief et rien d'autre. L'exécution deux a reçu le brief identique plus un pointeur vers la compétence frontend-design installée, que le modèle a ensuite lue en entier avant de commencer.

Une mise en garde importante, énoncée clairement plutôt que dissimulée : il s'agit de N=1. Une exécution par bras, un modèle, un brief. Nous ne prétendons pas que ces chiffres sont statistiquement stables sur cent essais, et si vous refaites cela vous-même, vous obtiendrez des chiffres spécifiques différents. Ce que nous affirmons est plus restreint et, nous pensons, plus utile : voici ce qui s'est passé, en détail, lors d'une exécution réelle, avec une télémétrie réelle, et c'est un schéma que nous avons suffisamment observé lors de tests moins contrôlés pour faire confiance à sa forme avant même de lancer les deuxième et troisième tours.

Ce que la référence a construit

Laissé à lui-même, Claude a produit une page que la plupart des personnes ayant examiné de nombreuses sorties d'IA reconnaîtraient immédiatement. 890 lignes, une palette de couleurs claires construite autour de tons papier et ambre, et il est juste de le dire : le code était propre, le texte était raisonnable, la mise en page fonctionnait, rien n'était cassé.

Les indices étaient tous dans les détails. Onze dégradés distincts sur la page, dans l'arrière-plan du héros, dans les états des boutons, dans les bordures des cartes, dans des endroits où un dégradé ajoutait du bruit visuel plutôt que de remplir une fonction. Deux titres utilisaient background-clip: text pour peindre le texte lui-même en dégradé, la signature de design IA la plus reconnaissable à ce jour. Les chiffres statistiques flottaient dans leurs propres cartes au-dessus de la ligne de flottaison, détachés de toute logique de mise en page, le genre d'élément qui semble avoir été ajouté parce qu'un modèle en contient un, et non parce que cette page particulière en avait besoin.

Rien de tout cela n'est incompétent. C'est le résultat d'un modèle qui est bon en conception web en général et qui n'a pas de point de vue spécifique sur cette marque en particulier, il utilise donc les mêmes approches qui apparaissent chaque fois que la même question est posée sans plus de contraintes. Une exécution de 63 329 jetons a permis d'obtenir une page livrable. Elle n'a pas permis d'obtenir une page dont quiconque se souviendrait, et c'est la même page que nous attendrions de la plupart des compétences de notre récapitulatif des meilleures compétences de design si vous retiriez la compétence de design.

Ce que le bras de compétence a construit différemment

L'exécution guidée par la compétence a lu le fichier SKILL.md de anthropics/skills frontend-design avant d'écrire quoi que ce soit, et la page résultante semble provenir d'un brief de design entièrement différent. Un arrière-plan bleu marine foncé (--bg: #0B1119) associé à un accent laiton (--brass: #D2A25C), une combinaison qui n'apparaît nulle part dans l'espace de recherche de la référence et qui se lit comme un choix délibéré plutôt qu'un défaut. 985 lignes, quatre dégradés au lieu de onze, et zéro instance de texte en dégradé. Pas moins, zéro. Le système typographique était discipliné d'une manière que celui de la référence ne l'était pas : échelle cohérente, logique de poids cohérente, titres qui semblent choisis plutôt que dimensionnés pour s'adapter.

Rien dans cette page ne crie "premium" comme une photo de poignée de main crie "corporate". C'est plus subtil que cela. La palette est suffisamment inhabituelle pour ne pas ressembler à un modèle, et la retenue sur les dégradés signifie que ceux qui restent ont réellement du poids au lieu de décorer tout ce qu'ils touchent. Si vous remettiez les deux pages à un client et lui demandiez laquelle un fondateur soucieux du design expédierait, le choix ne serait pas difficile.

Les chiffres

	Référence (sans compétence)	Bras de compétence (frontend-design)	Delta
Jetons utilisés	63,329	125,165	+98%
Appels d'outils	6	57	+51
Longueur de la sortie	890 lines	985 lines	+95 lines
Dégradés	11	4	-7
Instances de texte en dégradé	2	0	-2
Palette	Clair, papier + ambre	Bleu marine foncé + laiton	—

Le nombre de jetons est le titre principal et il n'est pas subtil : l'exécution avec compétence a coûté presque deux fois plus cher. Ce n'est pas une erreur d'arrondi que l'on peut attribuer au bruit, et c'est le chiffre par rapport auquel toutes les autres affirmations de cet article doivent être lues.

Pourquoi la compétence coûte plus cher

L'écart de jetons ne concerne pas vraiment la taille du fichier de la compétence. Les fichiers SKILL.md représentent généralement quelques milliers de jetons, ce qui n'est pas suffisant à eux seuls pour doubler une exécution de 63 000 jetons. Ce qui s'est réellement passé est visible dans le nombre d'appels d'outils : 6 contre 57. L'exécution de référence a écrit la page et a terminé. L'exécution avec compétence a lu la compétence, puis a itéré par rapport à elle, vérifiant sa propre sortie par rapport à une liste de contrôle que la compétence établit, ajustant l'espacement, réexaminant les choix de couleurs, remettant en question une décision de mise en page qu'elle avait déjà prise.

C'est le mécanisme, et il est important de le nommer car cela signifie que le coût en jetons n'est pas "la lecture d'un document plus long". C'est "faire le travail plus d'une fois". Une compétence qui décrit à quoi ressemble un bon design transforme une tâche de génération en un seul passage en quelque chose de plus proche d'une boucle d'auto-évaluation, et les boucles d'auto-évaluation sont coûteuses en jetons par nature, qu'elles soient exécutées par un humain ou un modèle.

Quand +98 % de jetons est une bonne affaire, et quand ce ne l'est pas

Si le livrable est le design, ce n'est pas une décision difficile. Une page d'atterrissage qu'un client regardera, une pièce de portfolio, tout ce où "est-ce que cela a l'air d'avoir été fait par quelqu'un de bon goût" fait partie de la description de poste : le coût en jetons ici est plus proche d'une erreur d'arrondi que d'une ligne budgétaire. Personne ne discute de payer un designer pour une deuxième ébauche. Payer un modèle en jetons pour l'itération équivalente est le même échange à un prix bien inférieur, même au double du coût de référence.

Si le livrable est un outil interne, un prototype que personne en dehors de l'équipe ne verra, ou une page qui existe pour prouver qu'un point de terminaison d'API fonctionne plutôt que pour représenter une marque, ignorez-le. La page papier et ambre de la référence avec ses dégradés égarés fait le travail. Personne évaluant un panneau d'administration interne ne remarquera que le titre utilisait background-clip: text, et payer le double des jetons pour corriger un défaut que personne ne verra n'est pas un achat de qualité, c'est juste une facture plus élevée.

Le point de décision n'est pas la qualité de la compétence, qui est réelle. C'est de savoir si quelqu'un va regarder le résultat d'assez près pour s'en soucier.

Comment reproduire cela vous-même

Vous n'avez pas besoin de notre brief exact pour effectuer cette comparaison sur votre propre travail. La configuration est suffisamment simple pour être refaite en un après-midi.

• Rédigez un brief avec des contraintes concrètes : un nom de produit, un ensemble spécifique de sections, une structure de prix spécifique, "no frameworks" si cela vous importe. Les briefs vagues produisent des deltas vagues, car il y a moins de choses contre lesquelles une compétence de design peut s'opposer.
• Exécutez-le une fois avec un modèle propre et sans compétences installées. Enregistrez la sortie et notez le nombre de jetons à partir de votre télémétrie de harnais, pas une estimation.
• Installez frontend-design (ou toute autre compétence de design que vous évaluez), redémarrez votre session afin que la description de la compétence soit fraîchement chargée, et exécutez à nouveau le brief identique, modifié par rien d'autre qu'une ligne indiquant au modèle de lire et de suivre la compétence.
• Comparez les deux sorties pour les indices spécifiques que nous avons trouvés ici : nombre de dégradés, utilisation de background-clip: text, si la palette semble choisie ou par défaut, si l'échelle typographique est cohérente. Lisez notre protocole de test pour la version complète de ce processus, y compris la batterie de déclencheurs que nous exécutons avant toute comparaison de sortie.
• Comparez les nombres de jetons en dernier, après avoir formé une opinion sur la sortie. Si vous regardez la facture en premier, cela influence votre générosité dans la comparaison visuelle, et cet ordre importe plus qu'il n'y paraît.

FAQ

La compétence frontend-design double-t-elle toujours l'utilisation des jetons ? Pas nécessairement, et nous ne revendiquons pas un multiplicateur fixe. Cette exécution a montré +98 % sur un brief avec un modèle. Le mécanisme derrière l'augmentation, davantage d'appels d'outils parce que le modèle vérifie sa sortie par rapport aux propres directives de la compétence, devrait se généraliser, mais le pourcentage exact variera en fonction de la complexité du brief et de la quantité d'allers-retours que le modèle décide de nécessiter.

Une exécution par bras est-elle suffisante pour faire confiance à ces chiffres ? Suffisant pour faire confiance au modèle, pas suffisant pour faire confiance au pourcentage précis. Nous appelons cela N=1 délibérément afin que personne ne le confonde avec une étude contrôlée. Ce que nous pouvons dire avec plus de confiance, c'est la direction : l'itération guidée par les compétences coûte plus cher et produit un résultat visiblement plus réfléchi, un modèle qui apparaît dans chaque comparaison de compétences de design que nous avons menée moins formellement lors de tests normaux.

Pourquoi ne pas simplement demander à Claude d' "avoid gradient-text and generic AI design" ? Vous pouvez, et cela aidera un peu. Mais une instruction d'une seule ligne ne contient pas le raisonnement qu'une compétence complète apporte, la logique spécifique de la palette, les règles d'échelle typographique, la liste de contrôle contre laquelle le modèle itère. Notre protocole de test complet explique pourquoi les instructions au niveau du prompt et celles au niveau de la compétence ont tendance à produire des profondeurs de résultats différentes même lorsqu'elles visent le même objectif.

Comment cela se compare-t-il aux résultats de Claude sur d'autres types de tâches ? Les tâches de design sont le cas où une compétence a le plus d'opportunités évidentes d'aider, car "est-ce que cela a l'air distinctif" est lisible même sans tableau de bord. Nos autres entrées du Banc d'Essai des Compétences testent les compétences par rapport à la construction d'un bot Telegram, une session de débogage et un audit de script, trois domaines où la victoire, s'il y en a une, est différente d'une palette plus agréable. Consultez la méthodologie complète pour savoir comment nous notons les quatre.

Nous avons choisi ce brief parce qu'une page d'atterrissage plaide en faveur d'une compétence de design sans aucune interprétation requise. Regardez les deux pages côte à côte et la palette, le nombre de dégradés et la discipline typographique vous diront tout ce que le tableau des jetons ne peut pas. La prochaine entrée de cette série échangera cette clarté visuelle contre quelque chose de plus difficile à évaluer à l'œil nu : un bot fonctionnel, où le "mieux" doit être jugé par le fait que la chose fonctionne.