Réflexions et impressions sur Claude Design
(samhenri.gold)- Avec le renforcement de la systématisation du design, Figma a développé une structure complexe centrée sur ses propres unités comme les composants, styles, variables et props, créant ainsi une distance avec le support réel d’implémentation
- Le format propriétaire de Figma a été naturellement exclu des données d’entraînement des LLM, et à l’ère des agents, avec la montée des outils fondés sur le code, la source of truth du design se déplace à nouveau vers le code
- Claude Design est un support honnête qui manipule directement HTML/JS ; au lieu de passer par une approximation avec perte (
lossy approximation) du code comme Figma, l’approche consiste à travailler directement dans le support réel d’implémentation - Grâce à sa relation fraternelle avec Claude Code, il bénéficie d’un avantage structurel permettant d’unifier dans une seule conversation la boucle de feedback entre design et implémentation
- À mesure que le marché des outils de design se scinde entre outils fondés sur le code et outils d’exploration pure, il devient possible que Figma suive la trajectoire de Sketch :
**Sketch moment**
Le paradoxe de la systématisation chez Figma
- À mesure que les équipes produit grossissaient, le design a dû justifier son existence au sein des organisations d’ingénierie, ce qui l’a poussé vers la systématisation (
systematization) - Pour cela, Figma a inventé des primitives propriétaires comme les composants, styles, variables et props, mais certaines sont empruntées à la programmation et d’autres non, si bien que l’ensemble ne correspond proprement à aucun autre système
- Les guidelines changent sans cesse, les migrations s’accumulent, et pour automatiser quoi que ce soit il faut s’appuyer sur quelques plugins de mauvaise qualité
- La complexité a tellement augmenté qu’un rôle de design spécialisé dans la gestion de ce système a fini par apparaître
Le déplacement de la source of truth
- Entre Figma et le code, il a toujours existé une tension autour de ce qui doit constituer la source of truth
- En battant Sketch, Figma a adopté la position selon laquelle son outil deviendrait la référence canonique
- Mais cette victoire comportait un coût caché : un format verrouillé (
locked-down), largement non documenté, difficile à manipuler par programmation, et donc naturellement exclu des données d’entraînement des LLM - Les LLM ont été entraînés sur du code, pas sur les primitives de Figma ; le modèle n’a donc pas appris le système de Figma
- Comme écrire du code devient plus facile même pour les designers et que les agents progressent, la source of truth suit un mouvement de retour naturel vers le code
- En comparaison, l’infrastructure complexe que Figma a introduite au cours des dix dernières années peut difficilement ne pas paraître excessive
« Si l’on veut faire de la poterie, pourquoi peindre des aquarelles de poterie ? Pourquoi ne pas simplement modeler l’argile ? »
La complexité du système de design interne de Figma
- Dans le travail réel, le back-porting vers Figma de modifications de design effectuées directement dans le code est extrêmement pénible
- L’auteur prend comme exemple le fichier de design system du produit Figma lui-même, montrant qu’il est dans un état d’extrême complexité alors même qu’il a été produit par l’une des équipes de design system les plus compétentes
- 946 variables de couleur sont organisées en groupes imbriqués comme
bg/desktopBackgrounded, avec pour une même variable des valeurs pour 8 modes différents comme Light, Dark ou FigJam-Light - Le composant de pied de modal possède 12 variantes, ainsi qu’un menu déroulant avec des valeurs comme
DS Library SwapetQA Plugin, plus 8 props - Le style d’effet du composant slider existe comme un style nommé séparément pour une seule ombre portée de 0.5px — parce que c’est la seule façon de documenter sa correspondance avec les variables CSS
- Le composant d’entrée combo comporte 16 variantes, avec des noms de calques du type
Default, Default, Close Button=False
- 946 variables de couleur sont organisées en groupes imbriqués comme
- Lorsque les couleurs s’affichent mal, le processus de débogage exige un traçage en plusieurs étapes : vérifier le composant → vérifier la variable → vérifier une autre variable aliasée → vérifier le mode → vérifier les overrides au niveau de l’instance → vérifier les composants imbriqués auxquels un library swap a été appliqué
Figma Make vs Claude Design
- À mesure que la source of truth bascule vers le code, Figma se retrouve dans une position inconfortable avec un système passif et pré-agentique (
pre-agentic) - Les outils de design de demain pourraient se diviser en deux formes bien distinctes
- La compétition recommence autour de la question à laquelle Figma répondait en 2016 : « Quel est l’outil qui me permet, en tant que designer, de sortir mon idée le plus vite possible ? »
- Figma Make est un outil pour les personnes déjà familières de l’écosystème Figma
- Il lit les styles Figma, les bibliothèques de composants et les props propriétaires (
Prop Props), et reste le seul outil de ce nouvel environnement à supposer que le fichier de design demeure la référence canonique - C’est un outil pour celles et ceux qui veulent rester dans ce système, ou qui n’ont pas d’autre choix que d’y rester
- Il lit les styles Figma, les bibliothèques de composants et les props propriétaires (
- Claude Design fait le pari exactement inverse
- Il s’accorde avec le principe « truth to materials » du mouvement Arts and Crafts — l’idée qu’un objet doit être honnête à l’égard de sa nature et de son mode de fabrication
- Figma est à l’opposé : une enveloppe libre et “vibey” posée sur un schéma extrêmement rigide — comparé à une personnalité de type A qui fait semblant d’être détendue tout en hurlant intérieurement au sujet des imbrications de frames et de la séparation des tokens
- Claude Design est brut, mais au moins honnête sur ce qu’il est : du HTML et du JS jusqu’au bout
Les avantages structurels de Claude Design
- L’avantage structurel clé de Claude Design est que son frère est Claude Code, un outil très à l’aise avec le code
- À terme, la structure permettrait de transmettre directement de Claude Design à Claude Code, ou inversement
- L’onboarding de Claude Design propose déjà une fonction d’import de dépôt (
repo) - La boucle de feedback entre design et implémentation — historiquement toujours une source de friction — converge ainsi vers une seule conversation
L’émergence possible d’autres outils sans rapport avec le code : des environnements d’exploration pure
- L’autre branche de cette bifurcation pourrait voir apparaître des outils sans aucune attente vis-à-vis du code
- Des environnements d’exploration pure où l’on pose des rectangles, empile des styles de calque, manipule librement les modes de fusion et les dégradés, sans être contraint par un système ou des règles de prompt
- Cela pourrait prendre la forme d’une app compatible iPad + Pencil permettant d’esquisser rapidement des rectangles, ou d’un terrain où 37signals peut tenter quelque chose d’intéressant
- Dans l’autre direction, on pourrait aller vers un outil à la Photoshop, misant tout sur la composition haute fidélité (
high-fidelity), libérant l’imaginaire des limites des effets CSS - Il est étrange de constater que, pendant 90 % de sa durée de vie, Figma n’a proposé comme effets de calque que des ombres portées ou du flou
Le « Sketch moment » de Figma
- Le Sketch moment de Figma — le moment où Figma se fait dépasser comme Sketch l’a été par Figma — approche rapidement
1 commentaires
Avis sur Hacker News
J’ai repris aujourd’hui un design system que j’avais créé auparavant, en y ajoutant le logo, le branding et les polices, et après un nombre agaçant de retouches j’ai enfin obtenu un résultat à peu près satisfaisant
Mais en regardant l’usage, j’ai vu que j’avais déjà consommé 95 % de mon quota hebdomadaire de Claude Design
À ce niveau-là, ça m’a semblé plus proche d’un jouet de démonstration que d’un véritable outil de production
Ce n’était pas du tout aligné avec le style que nous voulions, mais certaines décisions de regroupement de contenu et d’architecture de l’information valaient la peine d’être reprises dans mon propre travail
Dans l’ensemble j’ai été assez impressionné, mais plus tard, en voyant sur Twitter le cas de réussite de quelqu’un d’autre, j’ai éclaté de rire en constatant que c’était presque exactement la même maquette que celle que j’avais reçue
À mon avis, ce problème d’uniformisation va continuer à suivre l’IA, comme pour les textes, le code ou les images qu’elle produit
Ma belle-sœur dirige une petite entreprise de vêtements, et même si elle a énormément progressé en six ans, elle a vraiment peiné au début à transformer ses idées en résultats concrets
Pour quelqu’un comme elle, je pense que n’importe quel outil capable de réduire la barrière d’entrée initiale mérite largement qu’on l’essaie
Cela dit, on est encore en phase de research preview, donc je pense que ça va évoluer
Avec le premier design system, j’ai créé une nouvelle section de footer pour ma startup iPaaS, et parmi les quatre propositions, la quatrième était plutôt bonne
Ensuite je l’ai relié à Claude Code pour faire quelques ajustements, générer le code, puis déployer directement. Si ça t’intéresse, tu peux regarder la section du bas sur tediware.com : la partie « Origin story » à gauche et le panneau d’inscription à droite
Ce n’était pas une implémentation complexe, mais les idées générées et le flux d’intégration étaient si simples que ça m’a vraiment donné l’impression d’un fort potentiel
Claude Design utilise Opus 4.7, qui coûte plus cher que les modèles précédents
Ce n’est que son deuxième jour de disponibilité, donc ce n’est pas un produit fini, et Anthropic a l’habitude d’améliorer ses produits extrêmement vite
En plus, si tu utilises Claude depuis longtemps, il connaît déjà mes goûts et mon style, alors que passer à un autre outil de design IA voudrait dire repartir de zéro
En revanche, l’export ZIP fonctionne, donc j’ai essayé de l’importer dans Stitch de Google, mais la compatibilité n’était pas fameuse
Je ne suis pas vraiment d’accord avec l’idée que Claude Design ferait disparaître toute la complexité du design
Si les apps faites en vibe coding avec Claude semblent simples, c’est surtout parce que leur périmètre produit est simple
Ça donne l’impression de confondre la simplicité en comparant un vélo et un avion avec les mêmes critères
Si on crée les mêmes composants de design system en code et dans Figma, le code peut être plus concis grâce aux conditions et au flux de contrôle
Mais le code est moins flexible que le fait de dessiner directement sur l’écran, et il est plus difficile d’y obtenir une vraie liberté créative
Au final, la complexité vient souvent du fait que les humains se l’imposent eux-mêmes, par exemple en empilant 8 modes et des thèmes clair/sombre sur 4 produits
Claude peut peut-être faciliter un peu la maintenance, mais je ne pense pas qu’il fasse vraiment disparaître la complexité elle-même
Donc je pense que cette tendance va porter un coup assez dur à Figma
Le logiciel qui y arrivera finira par gagner
Je voulais vérifier si j’avais bien compris
Je développe depuis l’enfance, mais je ne suis pas très à l’aise avec le CSS, et je me demandais s’il y a vraiment beaucoup d’organisations où les développeurs, y compris des front-end, collaborent avec des designers qui gèrent le design complet du produit dans des outils comme Figma, et pas seulement des logos ou des croquis de landing pages
Et je me demandais aussi si l’objectif pour ces designers, sans être développeurs, est de maintenir une sorte de base de données de styles afin de gérer l’apparence sans modifier le code, ou si, en général, ce sont plutôt les développeurs front-end qui utilisent aussi Figma tout en n’aimant pas le fait qu’il soit séparé du code
Le client la consulte directement, ou au minimum valide des slides de branding qui reflètent ce résultat Figma
Ensuite le front-end reprend Figma et le réimplémente en CSS, mais la fonction de copie du CSS dans Figma n’est en pratique guère plus qu’un inline CSS inutilisable, donc on refait presque toujours une meilleure approximation à la main
Le système d’unités ne correspond pas, et les relations parent/enfant, les variables CSS ou la hiérarchie de classes ne sont pas représentées non plus
Si plusieurs développeurs front-end implémentent chacun leurs composants de leur côté, il y a aussi de la dérive
C’est pourquoi on crée souvent un autre point de référence front-end avec Storybook, puis on l’intègre dans React ou NextJS, ou on le réimplémente encore comme composants de CMS
À ce stade, on se demande ce qui est le vrai source of truth, mais en pratique cela ressemble plutôt à une chaîne de références successives, comme dans un téléphone arabe
Et dès qu’il faut en plus des landing pages promotionnelles construites hors du projet principal, on finit par réimplémenter encore une fois le même design dans un autre système
Au final, c’est dans ce fossé de handoff entre design et code que l’intention du designer se dégrade, ou que le développeur se retrouve à gérer tardivement des problèmes bien réels comme la longueur des chaînes, les changements du nombre d’éléments, le vrai scroll ou l’adaptation à différentes tailles d’écran
Si cette courte vidéo-mème est à la fois drôle et pas drôle, c’est précisément parce qu’elle vise trop juste sur cette réalité
En général, les designers ne codent pas et les développeurs ne font pas de design, et les gens vraiment bons dans les deux sont extrêmement rares
Franchement, c’est une méthode assez affreuse, même si elle reste meilleure que les alternatives d’avant
Mais je pense qu’elle restera inférieure à des outils reliés directement au code, même si elle automatise une grande partie du travail fastidieux de traduction du design visuel en code
Je n’ai pas encore utilisé Claude Design, mais je fais partie des gens qui trouvent le code bien plus confortable que les innombrables options GUI de Figma
J’ai un parcours proche de celui de l’auteur de la question, donc ce point de vue me provoque instinctivement un rejet
Avec le temps, il faut une certaine référence centralisée pour garantir que tous les ingénieurs produisent une implémentation cohérente sans divergences de style
En ce moment, je fais de la rétro-ingénierie du protocole Figma avec figma-kiwi-protocol, donc l’idée que « Figma s’est lui-même exclu des données d’entraînement nécessaires à l’ère des agents » m’a vraiment parlé
Le format binaire de Figma part du principe qu’il faut tout réinventer, et comme il cherche à couvrir le web, Android, iOS et tous les autres types de design, il finit par être universel sans jamais correspondre parfaitement au web en 1:1
Or, pour être utile à un agent, l’intention doit être claire, et quiconque a déjà implémenté un Figma produit par un UX designer sait qu’il est souvent difficile, même pour un humain, de comprendre l’intention de design exacte
Que devient le bouton si le texte s’allonge comme en allemand, que faire si en CSS ça casse sur deux lignes, qu’en est-il sur d’autres téléphones qu’un iPhone, par quoi remplacer une bordure dégradée impossible en CSS, ou encore que se passe-t-il sur un écran 4K : ce genre de questions surgit sans cesse
On peut répondre en partie avec les props ou l’autolayout, mais dans la réalité, les UX designers ne sont pas toujours ces êtres mythiques qui maîtrisent parfaitement Figma
J’espère donc que les outils dont l’intérieur repose sur du HTML vont rattraper rapidement leur retard, et si possible qu’on puisse aussi voir les prompts que les chefs de produit ont donnés aux UX designers
Le texte lui-même était bon, et les derniers paragraphes étaient vraiment drôles
J’ai particulièrement aimé le passage disant qu’il faut être honnête avec sa propre identité, au lieu de faire semblant d’être autre chose
Ça m’a aussi fait penser que PenPot pourrait être assez bien placé dans cette ère des agents
Contrairement à l’approche canvas de la famille fig, ils sont allés vers un design réellement fondé sur le markup, donc si cette direction t’intéresse, ça semble d’autant plus prometteur
Depuis qu’InVision a fermé et s’est replié sur le whiteboard numérique, j’ai l’impression que ce marché des outils de design est pratiquement terminé pour moi
Je pense vraiment que c’est un marché extrêmement difficile
Plus fondamentalement encore, il est trop difficile de maintenir correctement un design system sur le long terme, surtout quand il est profondément imbriqué dans le code et les bibliothèques de composants, alors que les designers touchent très peu à cette couche
Ni Claude Design, ni Figma, ni aucun autre outil ne me semble capable de résoudre à la racine cet enfer Storybook autour des composants et layouts réutilisables et esthétiques
J’ai plutôt l’impression que la solution doit venir d’un niveau plus bas, au niveau même des composants
Pour l’instant, on reste enfermés dans une logique où l’on crée des composants à réinjecter dans chaque nouveau design
Quand on trouve un composant qui nous plaît, on pourrait simplement enregistrer sa définition en markdown, puis, pour le design suivant, demander à l’outil de lire ce markdown et d’utiliser ce composant chaque fois que nécessaire
Je pense qu’un tel flux serait bien plus flexible et intéressant
Elle devrait être scriptable et permettre aussi le dessin direct ; si on change le design, le code front-end devrait être modifié immédiatement, et les changements de code devraient pareillement se refléter dans le design
À terme, je pense à un modèle où designers et ingénieurs front-end deviennent des co-auteurs sans handoff
Cela dit, certains soutiennent qu’à l’avenir, comme la modification, l’extraction et le nettoyage deviendront presque gratuits, cette structuration elle-même deviendra moins importante
Je ne suis pas encore totalement convaincu, mais je comprends pourquoi on le dit
Du point de vue de quelqu’un qui a construit lui-même des outils de design ces dernières années, j’ai trouvé que ce texte comprenait assez mal, de manière assez fondamentale, à la fois le domaine du design et l’entreprise Figma
Figma a toujours été orienté autant vers la construction d’une entreprise prospère que d’un produit prospère
Au départ, il y avait des ambitions plus vastes, et avec des gens comme Evan Wallace ils avaient aussi la capacité d’exécution, mais au final ils se sont concentrés sur un produit concret qui rapportait de l’argent plutôt que sur des démos WebGL impressionnantes, et c’est ce qui a fait le business qu’ils sont aujourd’hui
Le fait qu’ils n’aient pas de fonctions 3D relève aussi de ce choix
Avant même d’être un outil de design, Figma a été une entreprise qui fabriquait des produits réellement utilisés en entreprise, et au moment de l’IPO, cet objectif était déjà largement atteint
Je ne sais pas comment le marché évoluera ensuite, mais face à des démos techniquement brillantes, le camp disposant du plus gros trésor de guerre pourrait avoir un net avantage
Et les problèmes évoqués dans l’article, les gens de Figma les connaissent eux aussi, comme en fait toute personne ayant déjà construit un outil de design
Le fait que l’UI/UX se trouve à l’intersection du design, du développement et du PM, ou qu’il faille se rapprocher d’une source of truth de type code, tout cela est assez évident
Le problème, c’est qu’au moment où on essaie vraiment de l’implémenter, cela déborde largement l’outil de design pour toucher au codage, à la gestion des données et aux outils d’architecture, ce qui en fait un défi gigantesque
Sur l’IA, je n’ai pas non plus de certitude, mais j’ai l’impression que les modèles SOTA récents sont tellement généralistes que leur capacité de raisonnement de base pourrait compter davantage que des données spécialisées
Les informations visibles liées au design UI sont en effet nombreuses à l’extérieur, donc on peut aussi les récupérer sur le web
Je n’ai pas d’intérêt particulier dans cette bataille, et je ne sais pas non plus si l’analyse de l’auteur initial est correcte
Cela dit, les histoires du type « ils ont pris du retard à cause d’un format de fichier propriétaire » me procurent toujours une petite schadenfreude
Certaines remarques étaient bonnes, mais dans l’ensemble je ne suis pas totalement d’accord
À mon avis, si Sketch a perdu face à Figma, c’est à cause de l’outillage de design et de l’expérience multijoueur
De la même manière qu’on conçoit un produit physique avant de le fabriquer, je ne pense pas que l’étape de conception disparaisse dans le produit numérique
Au contraire, je pense que Figma doit rapidement décider ce qu’il veut exactement être, plutôt que d’essayer de jouer sur tous les tableaux
À l’inverse, devoir installer une app Mac et ouvrir un fichier précis faisait qu’avec le temps les fichiers vieillissaient et l’accessibilité se dégradait
À ce sujet, il y a aussi eu récemment un fil HN sur Claude Design, qui avait suscité une forte réaction avec 732 commentaires au total en date d’avril 2026