Claude Design est sorti il y a un mois à peu près. J’ai voulu taponner avec.

Au début, j’ai pas trop compris la prémisse. Faire du design dans Claude, on pouvait déjà en faire, dans le chat normal. Du coup, je me suis posé la question : qu’est-ce qu’on peut faire de plus, et de différent, avec cet outil dédié?

J’ai fini par comprendre, en partie en me trompant (oui, plusieurs fois). Et j’ai utilisé Claude Design pour bâtir le site sur lequel tu lis cet article, 00h11.ca. Cinq heures de travail réparties sur quelques sessions, quatre itérations. Voici ce que j’en retiens.

Petite note avant qu’on commence : je parle de Claude Design parce que c’est l’outil que j’ai testé. Ce que je raconte ici, sur le flow et les pièges, transpose largement à des outils comparables comme Figma Make, ou aux générateurs de sites low-code qui partent d’un prompt. La logique est la même, l’interface change.

Ma première erreur, taper directement dans Claude Design

Première semaine, j’ouvre Claude Design, j’écris ce que je veux, j’itère. En une heure, j’avais explosé mes tokens pour la semaine.

Logique en fait. Chaque itération recharge tout le contexte visuel du projet, et ça consomme un max. À chaque fois que tu redemandes une modif, tu repaies une bonne partie du prompt. Et comme c’est un outil qui se prête vite à l’aller-retour, tu fais 30 itérations en une heure sans t’en rendre compte.

J’avais brûlé mon quota hebdo en pensant juste explorer.

Mauvaise approche.

Le flow que j’ai trouvé après coup

Plutôt que de taponner direct dans Claude Design, j’ai recommencé en sortant tout le travail amont dans Claude classique (le chat). C’est moins cher en tokens, et surtout, c’est plus efficace pour le travail conceptuel.

Concrètement, dans Claude (le chat), j’ai fait trois choses.

D’abord, j’ai défini ce que j’aimais. Pas juste « j’aime le minimalisme ». J’ai pris en photo plusieurs tableaux que j’ai à la maison, des affiches, des typographies que je trouvais belles. Je les ai donné à Claude, j’ai expliqué ce qui me plaisait dans chacun. Couleurs, rythme, sensation.

Ensuite, on a construit ensemble un design system : palette, typographies, tailles, hiérarchie. Une vraie petite bible qui me suivait pour la suite.

Enfin, j’ai demandé à Claude de me préparer un prompt initial très précis pour Claude Design. Le genre de prompt qui contient déjà tout : le design system, la stack technique cible (Astro statique, Markdown, pas de CMS), la structure des pages.

Là, j’ai ouvert Claude Design avec ce prompt béton, et j’ai eu un résultat très propre du premier coup. Quelques itérations légères pour ajuster, et c’était bon.

Différence entre les deux approches : en partant du prompt préparé, je savais ce que je voulais avant d’arriver. Claude Design n’avait plus qu’à exécuter, pas à improviser.

Le passage à Claude Code pour raffiner

Une fois que j’étais content du visuel, j’ai exporté les fichiers et je les ai envoyés à Claude Code pour la review.

Bonne idée que j’ai eue, parce que Claude Code m’a listé pas mal de choses à corriger.

Le projet visait du Astro statique avec des composants simples. Claude Design, lui, avait pris des libertés. Il avait mis du React partout, fait des trucs un peu over-engineered pour ce qu’il fallait. Le résultat visuel me satisfaisait, mais le code dessous était pas conforme à mon brief de départ.

Autant le rendu était propre, autant le reste demandait une vraie passe.

Ce moment-là m’a coûté une autre leçon : le visuel qui semble fini ne veut pas dire que le projet est fini. Claude Design produit du HTML qu’on peut éditer en ligne, on voit des liens cliquables, on peut changer les textes directement. C’est déstabilisant, parce que ça ressemble à un produit terminé. Mais pour le code, l’accessibilité, le responsive, le pipeline de mise en ligne, le référencement, on est encore loin.

J’ai sorti tout le raffinement après, dans Claude Code : retravail du logo, navigation, mobile, accessibilité, pipeline de production, mise en ligne, carousel de la page À propos. Toute la partie qui transforme un beau mockup en site qui tient debout.

Pour le logo, j’ai trouvé l’expérience beaucoup moins réjouissante. J’ai essayé de générer du SVG avec des formes simples, et là, il a du mal à respecter un cadre, à être cohérent et constant entre les itérations.

Pour moi, à ce stade, c’est pas encore un outil de design pur. C’est plus un outil de wireframing très développé, qui te sort des maquettes interactives crédibles. Sur la même base que Figma, mais avec l’IA qui pose les premières briques.

Sur la partie purement graphique, identité visuelle, logos vectoriels précis, on n’y est pas encore.

(Je vais continuer d’explorer, ça change tellement vite que ça vaut la peine de revenir voir dans trois mois.)

Trois leçons, pour si tu veux essayer

Premièrement, prépare tes inputs ailleurs. Le design system, les références, le prompt initial. Plus tu arrives préparé, moins tu manges de tokens pour rien.

Deuxièmement, travaille en parallèle entre les outils. Au moment où j’écris ces lignes, Claude Design, Claude classique et Claude Code se parlent peu. Ça va probablement changer. En attendant, tu fais le pont à la main : tu sors les fichiers d’un outil, tu les passes à un autre pour la review. C’est artisanal, mais ça marche.

Troisièmement, n’utilise pas Claude Design pour itérer le code final. Sors le projet, ouvre Claude Code, raffine là. Tu économises des tokens précieux, et tu gagnes en propreté du code.

Verdict après cinq heures et quatre itérations

Le résultat me satisfait. Je l’ai sous les yeux à chaque fois que j’ouvre 00h11.ca. C’est bluffant ce que l’outil produit en quelques heures, surtout en travaillant à plusieurs places en parallèle.

Mais c’est un outil à apprendre à utiliser. Pas un outil magique qui sort un site en cliquant sur un bouton.

Et toi, tu as testé Claude Design? Sur quel projet, et avec quel flow? Je suis curieux de savoir si le pattern préparation amont, exécution dans Design, raffinement dans Code se confirme chez d’autres, ou si tu as trouvé un meilleur flow.