Progresser en design avec Claude : 25 astuces pratiques en 13 minutes

La première chose qui trahit un design généré par IA n'est pas la couleur mais la fadeur : police par défaut, phrases génériques, icônes dépareillées. L'intervenant part de ce constat et répartit 25 astuces en trois couches : bases, niveau moyen et avancé. La thèse est simple mais audacieuse ; avec le bon matériau de contexte, un agent peut hisser une main débutante au niveau vitrine. Je prends ce cadre au sérieux, car le problème siège rarement dans le talent du modèle mais dans ce qu'on lui remet.

Bases : systèmes design et emprunt de style

Le premier arrêt est la mise en place d'un système design . Ouvrir un nouveau système dans l'interface design de Claude (claude.ai/design) et y verser couleurs, polices et logo de la marque fonde tout ce qui sera produit ensuite. L'agréable, c'est l'inutile départ de zéro : on peut verser une présentation aimée, un site ou une capture et en faire extraire couleurs et composants. Selon l'aide propre d'Anthropic, Claude Design génère en conversation et s'appuie automatiquement sur le système joint ; l'insistance de l'intervenant repose exactement là-dessus. La deuxième astuce compte parmi les raccourcis les plus rentables : la galerie de Refero, à styles.refero.design, héberge des recettes lisibles par IA de vrais produits comme Mercury et Linear, avec couleurs, polices et espacements en texte copiable. On copie un système aimé, on le colle dans Claude, on ajoute les changements voulus, et on décroche une base de qualité en un coup. La troisième astuce va plus loin : au lieu de se perdre parmi des milliers d'options, on remet le lien de la galerie au modèle pour qu'il choisisse les trois systèmes les plus proches de son activité.

La quatrième astuce rappelle la limite de l'interface web : l'appli design du navigateur n'atteint pas les fichiers de l'ordinateur. La correction proposée consiste à définir le système design comme compétence personnalisée côté Claude Code ou agent de bureau ; une commande façon Duolingo, par exemple, parle la même langue à chaque appel. Selon l'intervenant, la plupart des astuces de la vidéo marchent aussi dans l'agent de code grâce à cette souplesse ; l'enjeu est donc une manière de travailler plutôt qu'un produit unique.

La cinquième astuce touche aux polices, et j'y vois le gain le moins cher de la liste. Le travail qui garde la fonte par défaut se dénonce aussitôt ; choisir une famille adaptée dans un service gratuit comme FontShare, la nommer dans la consigne ou verser son fichier dans le système redresse l'aspect d'un coup. Le parrain de FontShare, l'Indian Type Foundry, déclare ces fontes gratuites même pour un usage commercial ; des outils comme FontJoy génèrent des paires titre-texte pour qui cherche des accords. L'intervenant suggère en outre de l'enchâsser dans le système plutôt que d'analyser des rivaux en pleine conversation. La sixième astuce porte sur la rédaction : même avec des visuels impeccables, des phrases qui sentent l'IA font fuir le public. La suggestion est de demander à Claude d'étudier les cinq meilleurs rivaux du domaine et de cuire les motifs dans le système design. La production se nourrit ainsi de la langue réelle du secteur au lieu du prêt-à-formuler du modèle. La septième astuce prolonge cette logique : fusionner délibérément deux systèmes, prendre la police de l'un et la couleur plus le mouvement de l'autre pour les faire fondre par le modèle, fait naître un idiome original qui ne ressemble jamais à une copie.

Niveau moyen : police, texte et compléments visuels

La huitième astuce bouche l'angle mort de l'outil design : Claude Design ne génère ni images ni vidéos seul, mais peut se brancher à un service de génération externe. L'intervenant cite Kie.ai en exemple ; le service rassemble de nombreux grands modèles visuels et vidéo sous un toit avec paiement à l'usage, et l'installation est laissée à Claude Code. Le marché actuel de Kie.ai couvre de la vidéo par texte à la retouche d'image, si bien que le branchement ne dépend jamais d'un seul modèle. La neuvième astuce colle le lien d'un projet fini dans une session neuve pour en hériter système et matériaux ; le travail passé devient le point de départ du nouveau.

La dixième astuce systématise le goût : monter une bibliothèque de références personnelle qui amasse le travail admiré depuis des lieux comme Dribbble, Awwwards et X. L'intervenant décrit une extension de navigateur en un clic qu'il a bâtie, Rubric References ; la page sauvegardée entre aux archives avec capture et note, et plus tard Claude peut consulter ces archives. La onzième astuce est une compétence d'audit nommée Impeccable : elle balaye un site sur hiérarchie, espacement, police, accessibilité et états vides, puis les corrige, rendant poli un bon brouillon.

La douzième astuce fige le ton de voix : bâtir une compétence de ton avec liste de mots bannis, tournures personnelles et style de parole. Des règles prêtes peuvent s'y joindre ; le standard ASD-STE 100 pour l'anglais technique, le guide de style de la documentation développeur de Google et le style d'écriture d'Apple sont cités en exemples. La treizième astuce est 21st.dev : des composants d'interface partagés par la communauté open source, prêts à remettre droit à l'agent. On copie un morceau aimé et on le colle au modèle ; au lieu de dessiner de zéro, il enchâsse une section testée dans la page, et le support MCP de 21st permet de le faire sans quitter l'éditeur. Les quatorzième et quinzième astuces courent dans le même sillon : le site ReactBits offre des pièces hardies comme textes animés, cartes effet verre et jeux de curseur ; CanvasUI.dev héberge une trentaine d'effets gratuits, avec verre liquide brisé et révélations de particules en échantillons. La logique est identique : prendre le code de ce qu'on aime, le remettre à Claude, le faire ajouter à l'interface ou garder au système design. Voilà comment les touches vues sur les sites de pointe atterrissent sur la page sans brûler de jetons.

Bibliothèques de composants et d'icônes

La seizième astuce énonce une vérité amère : Claude dessine souvent mal les icônes. La correction est de télécharger tout un jeu d'un seul style depuis une source comme Iconify et de remettre le dossier au modèle ; on obtient des icônes prêtes et le modèle gagne une référence cohérente pour la suite. L'univers d'Iconify couvre des centaines de jeux et des centaines de milliers d'icônes, ne chargeant que les icônes utilisées sur une page. La dix-septième astuce impose le format SVG en demandant des dessins neufs : vectoriel, il reste net à toute taille, sa couleur change à la main, et il peut même s'animer. La dix-huitième astuce traite des icônes animées avec Lordicon : des icônes, dont des milliers gratuites, se téléchargent en fichiers Lottie et se déposent dans le projet ; comme l'animation arrive enchâssée dans le code, cela compte comme un cran au-dessus du SVG plat. La bibliothèque de Lordicon a atteint des dizaines de milliers d'icônes avec couleur, vitesse et taille réglables à l'export. La dix-neuvième astuce est une suggestion de signet unique : un guide nommé Creator's Toolbox rassemblant plus de 150 ressources design gratuites en une liste : composants animés, effets 3D, icônes SVG, galeries de logos et kits de maquettes.

La vingtième astuce convoque les règles d'interface d'Apple : l'entreprise publie ces règles ouvertement, avec mise en page, tailles de police, zones tactiles et couleurs définies d'avance. Les convertir en compétence et y faire passer le modèle en dessinant un écran d'appli supprime les erreurs de devinette. Le guide d'interface humaine d'Apple donne des tailles par défaut et minimales par plate-forme pour la lisibilité et exige la hiérarchie par l'équilibre de graisse et de couleur. La vingt et unième astuce est GSAP : la bibliothèque JavaScript de GreenSock fluidifie des tâches comme sections au défilement et textes révélés, et les grandes agences la préfèrent aussi. Son site dit qu'on peut tout animer, et avec l'extension de défilement les chorégraphies complexes tombent à quelques lignes.

Avancé : règles, mouvement et commandes

Le quatuor final couvre le front design de l'agent de code. La vingt-deuxième astuce est la commande /design : une planche virtuelle s'ouvre avec une idée ou une capture, des espaces modifiables façon Figma arrivent, mais la différence est que l'agent connaît tout le projet et ses règles. La vingt-troisième est /tweak : bâtir le panneau à curseurs du côté web comme compétence propre côté code, jongler avec police, espacement et couleurs puis verser le résultat dans le design. La vingt-quatrième est le texte-vers-animation : extraire un script horodaté au mot avec Whisper, demander à Claude de choisir les moments méritant l'animation, et produire des clips calés sur la voix via Hyperframes. L'intervenant dit que les animations de cette vidéo furent faites ainsi.

La vingt-cinquième et dernière astuce ramasse tout dans un système d'exploitation design : une petite appli exhibant le travail fini et indexant chaque visuel et vidéo générés ; on y trouve le motif cherché tandis que Claude atteint les mêmes archives. L'équipe de l'intervenant l'exploite en bibliothèque d'éléments, avec matériaux 3D, animations et icônes SVG aux couleurs de la marque en attente de réemploi. La liste se ferme ici et se rattache au premier point : sans système les astuces restent des numéros épars, avec un système elles composent comme des intérêts.