Frontend Design : des interfaces qui ne trahissent pas l'IA
Une page produite par une IA se repère vite : fond crème et accent terracotta, cartes arrondies identiques, surtitre en capitales au-dessus de chaque titre. Frontend Design nomme ces réflexes et demande à l'agent de planifier d'abord couleurs, typographie et mise en page, de confronter ce plan au brief, puis seulement de coder.
Fixe d'abord le sujet, le public et la fonction première de la page, puis puise les choix visuels dans les matières et le vocabulaire du métier.
Impose un plan avant le code : quatre à six couleurs hex nommées, rôle de chaque police, maquette ASCII et principes propres à la page.
Décrit cinq familles de tics du design généré, du kit de cartes SaaS à ombre grise unique jusqu'à la flèche collée à chaque bouton.
Pose des règles typographiques : une ou deux familles, une échelle nette, des lignes de moins de 80 caractères.
Traite aussi les textes d'interface : voix active, même verbe sur le bouton et dans la notification, erreurs claires et sans excuses.
Quand s’en servir
Les pages d'accueil de votre agent se ressemblent toutes et le client veut une identité qu'on ne confondra avec aucune autre.
Vous refondez une interface existante et voulez plus de caractère sans sacrifier le focus clavier, le contraste ni le mouvement réduit.
Le brief ne précise pas le produit : l'agent doit proposer un sujet et un public avant de dessiner.
Demandez à l’agent
Conçois l'accueil d'une fromagerie lyonnaise, sans fond crème ni accent terracotta
Avant le code, montre le plan : palette hex, polices et maquette ASCII du premier écran
Réécris les boutons et messages d'erreur du formulaire de paiement à la voix active
Questions
Comment installer le skill Frontend Design ?
Avec npx skills add anthropics/skills@frontend-design. Dans Claude Code, on peut aussi déclarer le dépôt comme marketplace : /plugin marketplace add anthropics/skills.
Frontend Design interdit-il le thème sombre ou la mise en page façon journal ?
Non. Ces styles sont présentés comme des choix par défaut, pas comme des fautes ; si le brief les demande explicitement, c'est le brief qui l'emporte.
Frontend Design est-il une bibliothèque de composants ?
Non, il ne fournit ni composants ni code. C'est une méthode et un ensemble de principes qui guident l'agent dans le choix de la palette, de la typo, de la grille et du mouvement.
