Améliorer la conception d’interfaces grâce aux Skills

Vous avez peut-être remarqué que lorsqu’on demande à un LLM de créer une page de destination sans directives précises, il adopte presque toujours des polices Inter, des dégradés violets sur fond blanc et des animations minimales. 

Le problème ?  La convergence distributionnelle. Pendant l'échantillonnage, les modèles prédisent les jetons en fonction des tendances statistiques présentes dans les données d'entraînement. Les données du web à partir desquelles les modèles sont entraînés résultent principalement de choix de conception sûrs qui fonctionnent universellement et n’offensent personne. En l’absence d’instruction précise, Claude échantillonne à partir de cette zone de haute probabilité.

Pour les développeurs qui créent des produits destinés aux clients, cette esthétique générique compromet l'identité de marque et rend les interfaces générées par l'IA immédiatement reconnaissables, voire inutilisables.

Le défi de la pilotabilité

La bonne nouvelle, c'est que Claude peut facilement être piloté avec la requête appropriée. Il suffit de dire à Claude d’éviter Inter, Roboto ou d’utiliser des fonds d’ambiance à la place de couleurs unies pour que les résultats s’améliorent immédiatement. Cette sensibilité au guidage est une qualité : Claude peut s'adapter aux contextes de conception, aux contraintes et aux préférences esthétiques. 

Mais cela pose un défi pratique : plus la tâche est spécialisée, plus le contexte doit être étoffé. Pour la conception d’interfaces, des instructions efficaces doivent couvrir les principes de typographie, la théorie des couleurs, les motifs d’animation et le traitement de l’arrière-plan. Vous devez spécifier les valeurs par défaut à éviter et les alternatives à privilégier pour diverses dimensions.

On pourrait intégrer tout cela dans une requête système, mais  chaque requête (débogage en Python, analyse de données, rédaction d’e-mails) se retrouverait chargée du contexte de design de l’interface. La question devient alors la suivante : comment fournir à Claude des directives spécifiques à un domaine au bon moment, sans surcharge de contexte permanente pour des tâches sans rapport ?

Les Skills : un chargement dynamique en contexte

C'est précisément pour cela que les Skills ont été conçues : fournir des services spécialisés à la demande, sans surcharge permanente. Une Skill est un document (souvent en markdown) contenant des instructions, des contraintes et des connaissances relatives au domaine, stocké dans un répertoire dédié auquel Claude peut accéder via de simples outils de lecture de fichiers. Claude peut utiliser ces Skills pour charger dynamiquement les informations dont il a besoin au moment de l’exécution, améliorant progressivement son contexte au lieu de tout charger dès le départ. 

Une fois muni de ces Skills et des outils nécessaires pour les interpréter, Claude sera capable d’identifier et de charger de manière autonome les Skills pertinentes en fonction de la tâche à accomplir. Par exemple, lorsqu'on lui demande de créer une page de destination ou un composant React, Claude peut charger une Skill de design d’interfaces et appliquer ses instructions au moment opportun. C’est le modèle mental essentiel : les Skills sont des requêtes et des ressources contextuelles qui s’activent à la demande, fournissant des directives spécialisées pour des types de tâches spécifiques, sans surcharge contextuelle permanente.

Les développeurs peuvent ainsi tirer parti de la pilotabilité de Claude sans surcharger la fenêtre de contexte en encombrant la requête système d’instructions disparates couvrant de nombreuses tâches. Comme expliqué précédemment, trop de jetons dans la fenêtre de contexte peuvent entraîner une dégradation des performances. Il est donc extrêmement important de veiller à ce que le contenu de la fenêtre de contexte soit précis et ciblé pour optimiser les performances du modèle. Les Skills répondent à ce problème en rendant les requêtes efficaces, réutilisables et contextualisées.

Rédiger des requêtes pour une  meilleure interface

La génération d'interfaces utilisateur avec Claude peut être nettement améliorée, sans surcharge contextuelle permanente, en créant une Skill de design d'interfaces.  L’idée clé est de penser la conception d’interfaces comme le ferait un ingénieur. Plus vous pouvez faire correspondre les améliorations esthétiques au code de l’interface, meilleures sont les performances de Claude.

Grâce à cette idée, nous avons identifié plusieurs domaines dans lesquels les requêtes ciblées fonctionnent bien : typographie, animations, effets d'arrière-plan et thèmes. Tous ces éléments se traduisent clairement en code que Claude peut écrire. La mise en œuvre de cette option dans vos requêtes ne nécessite pas d’instructions techniques détaillées. Un langage ciblé permettant au modèle de développer une réflexion plus critique sur ces axes de conception suffit pour obtenir des résultats plus élevés. Ceci est en parfaite adéquation avec notre article de blog sur l'ingénierie contextuelle, qui préconise de rédiger les requêtes au bon niveau d'abstraction, en évitant deux écueils : une logique hardcodée trop prescriptive, comme des codes hexadécimaux exacts et de l’autre, des consignes trop vagues et générales, fondées sur l’hypothèse d'un contexte partagé.

Typographie

Pour mettre ces principes en pratique, commençons par envisager la typographie comme une dimension unique que l’on peut influencer via une requête. La requête ci-dessous permet de guider Claude vers des polices plus intéressantes :

<use_interesting_fonts>
Typography instantly signals quality. Avoid using boring, generic fonts.

Never use: Inter, Roboto, Open Sans, Lato, default system fonts

Here are some examples of good, impactful choices:
- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
- Editorial: Playfair Display, Crimson Pro
- Technical: IBM Plex family, Source Sans 3
- Distinctive: Bricolage Grotesque, Newsreader

Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.

Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.

Pick one distinctive font, use it decisively. Load from Google Fonts.
</use_interesting_fonts>

Résultat généré avec la requête de base :

Résultat généré avec la requête de base et la section typographique

‍

Fait intéressant, l’utilisation de polices plus originales semble encourager le modèle à améliorer d’autres aspects de la conception. 

La typographie seule apporte des améliorations significatives, mais les polices de caractères ne représentent qu'une dimension. Quid d’une esthétique cohérente pour l’ensemble de l’interface ? 

Thèmes

Une autre dimension pouvant être ajoutée est un design inspiré par des thèmes et une esthétique reconnus. Claude comprenant parfaitement les thèmes courants, on peut lui indiquer l'esthétique spécifique souhaitée pour l’interface. Voici un exemple :

Cela produit l'interface utilisateur suivante, inspirée de celle des RPG :

<always_use_rpg_theme>
Always design with RPG aesthetic:
- Fantasy-inspired color palettes with rich, dramatic tones
- Ornate borders and decorative frame elements
- Parchment textures, leather-bound styling, and weathered materials
- Epic, adventurous atmosphere with dramatic lighting
- Medieval-inspired serif typography with embellished headers
</always_use_rpg_theme>

Typographie et thèmes répondent à des requêtes ciblées. Mais spécifier manuellement chaque dimension est fastidieux. Et si on pouvait combiner toutes ces améliorations en un seul outil réutilisable ?

Requête généraliste

Le même principe s'applique aux autres dimensions du design : les mouvements (animations et micro-interactions) apportent un niveau de finition absent des designs statiques, tandis que le guidage du modèle vers des choix d’arrière-plans plus intéressants renforce la profondeur et l’intérêt visuel. C'est là qu’une Skill exhaustive excelle.

En combinant tous ces principes, nous avons développé une requête de 400 jetons, suffisamment compacte pour être chargée sans alourdir le contexte (même lorsqu'elle est chargée en tant que Skill), qui améliore considérablement l’interface en termes de typographie, de couleur, de mouvements et d’arrière-plan :

<frontend_aesthetics>
You tend to converge toward generic, "on distribution" outputs. In frontend design,this creates what users call the "AI slop" aesthetic. Avoid this: make creative,distinctive frontends that surprise and delight. 

Focus on:
- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character

Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
</frontend_aesthetics>

Dans l'exemple ci-dessus, nous commençons par fournir à Claude un contexte général du problème et de ce que nous essayons de résoudre. Nous avons constaté que ce type de contexte général était une tactique de rédaction de requête utile pour des résultats calibrés. Nous identifions ensuite les vecteurs d'amélioration du design dont il a été question plus haut et donnons des conseils ciblés pour encourager le modèle à penser de manière plus créative, toutes dimensions confondues.

Nous ajoutons également des directives supplémentaires à la fin du test afin d'éviter que Claude ne converge vers un autre maximum local. Même avec des consignes explicites évitant certains patterns, le modèle peut utiliser d’autres choix courants par défaut (comme Space Grotesk pour la typographie). Enfin, le rappel de sortir des sentiers battus renforce la créativité.

Impact sur le design d'interface

L'activation de cette Skill améliore les performances de Claude sur plusieurs types de design d’interface, notamment : 

Exemple 1 : page de destination SaaS

Exemple 2 : présentation de blog

Exemple 3 : tableau de bord d'administration

‍

Amélioration de la qualité des artéfacts dans Claude.ai avec les Skills

Les préférences visuelles ne sont pas la seule limitation. Claude doit également respecter des contraintes architecturales lors de la création d’artéfacts. Les artéfacts sont des contenus interactifs modifiables (codes, documents, etc.) que Claude crée et affiche en regard de votre chat.

Outre les préférences de conception évoquées ci-dessus, Claude présente un autre comportement par défaut qui limite sa capacité à générer de superbes artéfacts d’interface dans claude.ai. Actuellement, lorsqu'on lui demande de créer une interface utilisateur, Claude crée un simple fichier HTML avec CSS et JS. En effet, Claude comprend que les interfaces doivent être de simples fichiers HTML pour les rendre correctement en tant qu'artéfacts.

Comme un développeur humain bridé à un unique fichier HTML/CSS/JS ne peut produire que des interfaces très basiques, nous avons émis l’hypothèse que Claude serait capable de générer de meilleurs artéfacts  en lui donnant pour instruction d’utiliser des outils plus riches.

Cela nous a amenés à concevoir une Skill dédiée à la création d’artéfacts Web, s’appuyant sur la capacité de Claude à interagir avec un environnement informatique et l’orientant vers la création d'artéfacts multi-fichiers reposant sur des technologies web modernes comme React, Tailwind CSS et shadcn/ui. En arrière-plan, la Skill expose des scripts qui 1) aident Claude à configurer efficacement un fichier React de base et 2) regroupent tout en un seul fichier utilisant Parcel pour répondre à l’exigence d’un fichier HTML unique une fois les modifications terminées. C'est l'un des principaux avantages des Skills : Claude accède à des scripts pour effectuer des actions standardisées, ce qui lui permet de réduire l'utilisation des jetons tout en améliorant la fiabilité et les performances.

Avec les artefacts Web, Claude a pu exploiter les composants de formulaires de shadcn/ui et du système de grille réactive de Tailwind pour créer un artefact plus complet.

Exemple 1 : application de tableau blanc

Par exemple, lorsqu'on lui a demandé de créer une application de tableau blanc sans création d’artéfacts Web, Claude a généré une interface très basique :

En revanche, avec la nouvelle Skill de création d’artefacts web, Claude a généré dès le départ une application beaucoup plus propre et riche en fonctionnalités, incluant le texte et le dessin de différentes formes :

‍

Exemple 2 : application de gestion des tâches

De même, lorsqu'on lui a demandé de créer une application de gestion des tâches, sans la Skill, Claude a généré une application fonctionnelle mais très minimaliste :

Claude a généré une application  plus riche en fonctionnalités prête à l’emploi. Par exemple, Claude a inclus un composant de formulaire « Créer une nouvelle tâche » permettant aux utilisateurs de définir une catégorie et une date d'échéance associées aux tâches :

‍

Pour tester cette nouvelle Skill dans Claude.ai, il suffit d'activer la Skill, puis de demander à Claude d'utiliser la Skill de génération d’artéfacts Web pour la création d’artéfacts.

Optimisation des capacités de Claude pour la conception d’interfaces  avec les Skills

Cette skill de conception d’interface démontre un principe plus large concernant les capacités des modèles linguistiques : les modèles ont souvent des capacités supérieures à celles qu'ils expriment par défaut. Claude possède une solide compréhension du design, mais la convergence distributionnelle l'occulte en l’absence de directives. Vous pouvez ajouter ces instructions à votre requête système, mais cela implique que chaque prompt inclut le contexte de design de l’interface, même si ces connaissances ne sont pas pertinentes pour la tâche à accomplir. Grâce aux Skills, Claude n’est plus un simple outil à guider en permanence : il intègre une expertise métier dans chaque tâche. 

Les Skills sont également hautement personnalisables : vous pouvez créer des Skills en fonction de vos besoins. Cela vous permet de définir précisément les primitives à intégrer dans les Skills, qu'il s'agisse du système de design de votre entreprise, de patterns de composants spécifiques ou de conventions d’interface utilisateur propres à un secteur. En codant ces décisions dans une Skill, vous convertissez des briques du raisonnement de l’agent en un actif réutilisable exploitable par l’ensemble de l’équipe de développement. La compétence organisationnelle devient un savoir-faire durable, adaptable pour garantir une qualité cohérente d’un projet à l’autre.

Ce modèle va au-delà de l’interface. Tout domaine pour lequel Claude génère des résultats génériques alors qu’il dispose d’un niveau de compréhension supérieur profite du développement de Skills. La méthode est toujours la même : comprendre ce vers quoi le modèle converge par défaut, lui offrir des options concrètes, le guider au bon niveau d’abstraction et rendre ces choix réutilisables grâce aux Skills.

Pour le développement d'interfaces, Claude peut générer des interfaces originales sans ingénierie de requêtes à la demande. Pour démarrer, consultez notre guide de conception d’interfaces ou essayez notre nouveau plug-in de conception d’interfaces dans Claude Code.

En manque d’inspiration ? Pour créer vos propres Skills pour le design d'interfaces, utilisez notre créateur de Skills.

‍

Remerciements
Rédigé par l'équipe IA appliquée d’Anthropic : Prithvi Rajasekaran, Justin Wei et Alexander Bricken, ainsi que nos partenaires marketing Molly Vorwerck et Ryan Whitehead.

‍