claudeskills DocsFrontend Design Skill - Un meilleur code UI par Claude
Comment la skill Frontend Design pousse Claude vers un design UI distinctif : direction esthétique, typographie et choix qui ne sentent pas le template.
Source : contenu adapté de anthropics/skills (MIT). Dernière synchronisation : 8 juillet 2026, sur la réécriture upstream du 9 juin 2026.
Vue d'ensemble
La description officielle : "Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one."
La réécriture 2026 recentre toute la skill sur une posture : Claude agit comme le directeur artistique d'un petit studio dont le client a déjà refusé les propositions trop génériques. Chaque choix - palette, typographie, layout - doit être spécifique au brief, y compris « un vrai risque esthétique justifiable ».
Comment fonctionne la skill
La SKILL.md actuelle déroule cinq étapes :
- Ancrer dans le sujet - si le brief ne précise pas le produit, Claude doit d'abord nommer un sujet concret, son audience et la mission unique de la page.
- Principes de design - le hero est une thèse ; la typographie porte la personnalité ; la structure est de l'information (numérotation seulement si l'ordre compte vraiment) ; le motion est délibéré, pas dispersé.
- Processus : brainstorm → plan → critique → build → critique encore - Claude écrit d'abord un système de tokens compact (4-6 couleurs hex nommées, 2+ rôles typographiques, un concept de layout en wireframes ASCII et un élément « signature »), puis confronte ce plan au brief avant d'écrire du code.
- Calibrage anti-défaut - la skill nomme les trois looks autour desquels le design IA tourne actuellement (crème + serif + terracotta ; quasi-noir + vert acide ; filets façon broadsheet) et interdit d'y dépenser les choix libres.
- Discipline CSS - surveiller la spécificité des sélecteurs pour que les règles de sections et de CTA ne s'annulent pas.
Contenu du dossier de la skill
SKILL.md- le playbook design complet (~8 Ko)LICENSE.txt
À retenir pour vos propres skills
- Encoder le goût en anti-patterns nommés : lister les looks par défaut est plus actionnable que « sois créatif ».
- Une étape plan-puis-critique avant génération force Claude à débattre avec son propre premier jet.
Voir sur GitHub
Canvas Design Skill - Affiches et art visuel avec Claude
La skill Canvas Design fait de Claude un créateur d'affiches avec philosophie de mise en page et sortie PNG/PDF - visite complète.
Slack GIF Creator Skill - GIFs sur mesure avec Claude
Comment la skill Slack GIF Creator génère des GIFs animés au format Slack - validateurs, fonctions d'easing et recettes d'animation.