Claude Design

Ce que c'est, vu d'utilisateur

Claude Design est un atelier de design accessible depuis claude.ai. Contrairement à un plugin Figma classique qui produit des écrans à partir de spécifications visuelles, l'outil prend en entrée un brief en langage naturel et renvoie un brief de design structuré : direction artistique, palette avec contrastes pré-validés, typographie, composants, règles d'usage. L'output est texte (Markdown), à appliquer ensuite dans le code.

Cet article est un retour d'usage — le crédit de l'outil revient intégralement à Anthropic et à l'équipe Claude. Le cas d'étude porte sur la refonte visuelle de Vite Fait, Bien Fait, un projet perso que je présente sur cette vitrine (lien en bas de page).

Le problème UX initial

Vite Fait, Bien Fait avait livré une v1 en mai 2026, suivie d'une fumée utilisateur qui a remonté 6 frictions UX : (1) le disclaimer « site non-officiel » pas assez visible, (2) couverture IDF microscopique en footer, (3) tooltips d'abréviations absents hors pages fiche, (4) liens internes visuellement indiscernables de la navigation externe, (5) sentiment global « site officiel français » trop fort (la palette marine évoquait la Marianne), (6) trop de drop-shadows qui donnaient un côté SaaS générique.

Le brief envoyé à Claude était volontairement court et philosophique : « Crée une identité visuelle originale et sérieuse, pas administrative française, indépendante et reconnaissable. »

Ce que Claude a produit en une passe

L'output : un document de 212 lignes en 8 sections, daté du même jour, conservé verbatim comme contrat figé. Aucune itération supplémentaire n'a été nécessaire avant de passer à l'implémentation.

Direction artistique : positionnement « almanach pratique tenu par quelqu'un qui connaît le système » avec références concrètes — Are.na, Robin Sloan, Craig Mod, Index magazine, Werkstatt. Le ton emprunte aux guides imprimés indépendants et registres notariés, mixé avec une mise en page web contemporaine. Le résultat doit dire en moins d'une seconde : c'est sérieux, c'est vérifié, ce n'est pas l'État.

Palette : mode clair sur surface crème (#FAF6EE) avec encre brune (#1A1714), primaire brique (#6F2509), accent safran (#8A5A0B) ; mode sombre sur surface charbon (#14110E) avec encre claire (#F0EAD8), brique orangée (#E8A074), safran clair (#E8C56A). Tous les contrastes validés WCAG AAA (7:1+) sur les deux modes. Aucune trace de bleu Marianne.

Typographie : Newsreader pour le display (serif éditoriale variable, Google Fonts) — aucune connotation administrative ; Atkinson Hyperlegible pour le body et l'UI, choisie comme défaut explicite pour la lisibilité dyslexique (pas une option dans un menu, la police par défaut) ; JetBrains Mono pour les références administratives (numéros CERFA, codes MDPH). Échelle modulaire 1.200, mesure de lecture cible 68ch.

• Composants signature : cartouche typographique (encadré filet + petites capitales), récurrent sur la home et les pages axe.
• Filets fins (1px brique) plutôt que drop-shadows, partout.
• Icônes Lucide outline 1.5px exclusivement, jamais d'icône seule sans label.
• Radii systématiquement < 8px (cible édito, pas SaaS).
• Deux ombres seulement, fines et chaudes.

Comment je l'ai exécuté en 4 PRs

Le brief Claude Design en main, j'ai découpé l'implémentation en 4 PRs phasées, chacune avec ses gates CI :

• PR 1 — Foundation (~450 LOC) : tokens @theme clair + sombre, fonts Newsreader/Atkinson/JetBrains, script anti-FOUC, ThemeToggle, rename mécanique marine→primary sur 28 fichiers.
• PR 2 — Composants (~700 LOC) : refactor de 10 composants existants + 8 nouveaux (Cartouche, SignatureIndep, BandeauPositionnement, VoirAussiLink, Callout, MetadonneesCartouche, TOC, ThemeToggle).
• PR 3 — Pages (~800 LOC) : restructuration des 7 pages (home, axe×3, fiche, lettre, decision, contact, légales) + helper extract-toc + TOC sticky.
• PR 4 — Search (~550 LOC) : indexation Pagefind + dialog Cmd-K avec combobox ARIA.

Gates appliquées à chaque PR : Vitest + typecheck + build + Pa11y CI sur les deux modes (clair et sombre) + Lighthouse a11y/perf/SEO ≥95 sur les deux modes + axe-core 0 violation serious/critical. Critère d'acceptation observable post-merge : aucun token marine résiduel, ThemeToggle 3 états avec persistance localStorage, contrastes AAA, signature « pas l'État » lisible en moins d'une seconde sur la home.

Ce qui a marché

• Concision : 212 lignes suffisent pour documenter une refonte complète. Aucun mockup Figma à itérer, aucune review pixel-par-pixel.
• Contrastes auto-validés : tous les ratios AAA pré-calculés dans l'output. Zéro correction post-réception sur la palette.
• Références culturelles externalisées : Are.na, Craig Mod, Index magazine = inspiration ancrée dans le réel, facile à valider visuellement plutôt que dans le vague.
• Philosophy-first : commencer par « c'est un almanach, pas une brochure » fait découler naturellement les choix techniques (serif édito + filets fins, pas drop-shadows + carrousels SaaS).
• Output déterministe : sur 8 mois, je n'ai pas eu besoin de retourner au prompt initial pour clarifier. Le brief est resté la source de vérité.

Points d'attention

• Newsreader variable font : ~50 KB woff2 compressé. Sans preload dans <head>, le LCP en prend un coup. Solution : preload + font-display: swap, et accepter une transition courte.
• Rename mécanique des tokens : 28 fichiers × 154 occurrences. Grep + sed sûr si exhaustif, mais nécessite un smoke runtime systématique avant push (sinon on rate un import mort).
• Dark mode systématique : anti-FOUC script obligatoire dans <head>, avec try/catch pour les navigateurs anciens (fallback prefers-color-scheme natif).
• Le brief ne donne pas les Tailwind tokens prêts à coller. Il faut traduire les valeurs HEX en variables @theme. Pas un blocage, mais comptez 30 minutes de transcription manuelle.

Quand l'utiliser, quand pas

Bon pour : startups solo ou petits effectifs, refontes philosophy-driven, projets où l'identité doit être neuve plutôt qu'itérée, équipes sans designer dédié, prototypes éditoriaux.

Moins bon pour : design systems d'entreprise avec stakeholders multiples qui veulent voir des écrans avant de valider, marques avec contraintes fortes déjà figées en amont (palette imposée, typo héritée), refontes itératives sur mockups existants. Dans ces cas, Claude Design peut quand même servir comme starter, mais l'output devra être beaucoup plus négocié.

Sources & crédits

Claude Design est conçu et maintenu par Anthropic. Cet article est un retour d'usage — l'intégralité du crédit du produit revient à Anthropic et à l'équipe Claude.

Cas d'étude tiré de Vite Fait, Bien Fait — fiche projet disponible sur ce site (lien plus bas).