Créer son logo avec Claude Design : le cas intaircom, du design system à l'icône de l'app

« Fait moi le LOGO ». Quatre mots, une faute, et c'est la consigne qui a produit le logo d'intaircom, une app iPhone que je développe. Si quatre mots ont suffi, c'est que le travail avait été fait avant : un brief de 430 lignes, puis un design system monté dans Claude Design trois jours plus tôt. Le logo est arrivé en dernier, et il a hérité de tout le reste.

Cet article montre comment créer un logo avec Claude Design sur ce cas réel, dans l'ordre où les choses se sont passées : le brief, le design system, la demande de logo, la correction, puis la sortie des fichiers, jusqu'à l'icône sur l'écran d'accueil de l'iPhone. Avec ce qui a raté en route.

Claude Design pour créer un logo, c'est quoi exactement

Claude Design est l'outil de création visuelle d'Anthropic, lancé le 17 avril 2026 par son équipe Labs. On décrit ce qu'on veut, Claude produit le design sur une toile, et on le corrige en discutant, en commentant un élément ou en l'éditant. Il est en bêta, inclus dans les abonnements Claude Pro, Max, Team et Enterprise, et il consomme les mêmes limites d'usage que le reste de Claude. Pour situer les plans et les modèles, notre guide de Claude fait le tour.

Il a aujourd'hui deux portes d'entrée. La page autonome, claude.ai/design, avec ses projets et ses templates. Et le menu « Design » de l'application Claude, où un bandeau annonce : « Claude Design se trouve maintenant ici. Les nouveaux projets Slides et Design sont créés en tant qu'artefacts. » C'est par là que le logo d'intaircom est passé.

Le menu Design de l'application Claude. Quatre points de départ, et aucun ne s'appelle « Logo ».

Pour un logo, trois choses à savoir avant de commencer.

• Il n'y a pas de type de projet « Logo ». On part d'un « Design » vide, ou mieux, d'un « Design System » qui portera la marque.
• Ce qu'il produit est du code. La toile est une page HTML, les formes sont du SVG, le texte reste du texte. Cela compte beaucoup au moment de sortir les fichiers.
• Le modèle se règle. Les sessions d'intaircom ont tourné sur Opus 5.5 avec l'effort « Extra ».

Le cas : intaircom, une app iPhone sans logo

intaircom relie deux iPhones directement, en Bluetooth, sans réseau opérateur ni serveur, pour parler en continu comme dans un intercom de moto. Téléphone dans la poche, voix dans le casque. Fin septembre, l'app fonctionnait sur deux téléphones et n'avait aucune identité. Le brief le disait sans détour : « Aucun asset graphique aujourd'hui : pas d'icône, pas de logo, pas de catalogue d'assets. Tout part de zéro sur ce point. »

Il fallait donc un logo, une icône pour iOS 26, et un design system qui mette de l'ordre dans des écrans déjà codés.

Étape 1 : écrire le brief de marque

Le brief fait 430 lignes et un peu plus de 4 000 mots. Il a été écrit avec Claude Code, à partir du code de l'app : les couleurs, les tailles et les textes existants y sont repris tels quels, pour que Claude Design parte de ce qui tourne déjà. Il tient en un seul fichier, BRIEF-DESIGN.md, avec le produit en une page, la marque, le concept de logo, l'icône, le design system, les écrans, les livrables attendus.

Trois passages ont pesé sur le logo.

Le niveau de finition, avec la liste de ce qu'on ne veut pas. La section s'ouvre sur « agence haut de gamme, pas vibe coding » et énumère les tics à bannir. Pour le logo :

Logo « tech startup » : lettre dans un carré arrondi avec dégradé, glyphe abstrait générique, ondes, hexagones, nœuds connectés.

Les interdits propres à la marque. Chacun avec sa raison, ce qui évite de les voir contournés :

Arcs de Wi-Fi ou d'ondes concentriques : le produit est précisément sans réseau, et l'icône ressemblerait à AirDrop ou à un routeur.

Vert comme couleur de marque : dans l'app, le vert signifie « connecté ». Idem pour l'ambre (recherche) et le rouge (raccrocher).

La lecture du nom. Le brief écrit la graphie (intaircom, tout en minuscules, partout) et la façon de le lire : int-air-com, l'intercom qui passe par l'air. Cette ligne a fait le logo. Le « air » en couleur et l'arc qui relie les deux « i » en sortent directement.

Le brief demandait aussi un ordre de travail : le logo et l'icône d'abord, le design system ensuite, les écrans à la fin. Ce n'est pas ce qui s'est passé : le design system est sorti en premier, et le logo en a profité.

Étape 2 : poser le design system avant le logo

Le 25 septembre, j'ai ouvert un projet « Design System » et j'ai envoyé le fichier du brief. Rien d'autre : le premier message de la conversation est la pièce jointe, sans une ligne de texte.

Le brief en pièce jointe, et le design system qui en sort. Le fichier est enregistré à 19 h 08, les fichiers exportés sont datés de 19 h 42.

Claude Design a rendu un artefact à treize rubriques : vue d'ensemble, couleurs, typographie, espacements, rayons, ombres, tailles, opacités, durées, courbes, composants, assets, fichiers. Dedans, d'après son propre résumé, « la marque, l'icône iOS 26, les tokens, 19 composants avec leurs états et 6 planches d'écrans pour valider le tout ».

La vue d'ensemble du design system. Le « air » en cyan est déjà là, trois jours avant le logo.

Ce qui est passé dans le code ensuite, ce ne sont pas des planches, ce sont des décisions chiffrées. Claude Design a relu les valeurs du code et en a corrigé plusieurs, avec la mesure à l'appui :

• Douze opacités de blanc ramenées à sept. Rien sous 55 % pour du texte, parce que le texte à 35 % ne faisait que 3:1 de contraste.
• Un seul vert au lieu de deux. Et le libellé des boutons verts passe en couleur nuit : le blanc sur ce vert ne fait que 2:1, la nuit fait 10:1.
• Trois rayons au lieu de quatre, des bascules à 68 pt au lieu de 66 et un point de présence à 8 pt au lieu de 7, pour tenir la grille de 4 pt.

Il a aussi livré une première marque : un glyphe fait de deux points reliés par une vague, et un mot dessiné, sans police. « J'ai donc réuni les deux pistes du brief en une seule marque », écrit-il.

La première marque, sortie avec le design system. Ce n'est pas celle qui a été gardée.

Avec le design system est venu un zip de 64 fichiers, rangé selon l'arborescence demandée dans le brief : 16 SVG et 32 PNG de logo, deux planches, les calques de l'icône, les règles en Markdown et un tokens.json de 27 couleurs.

Tout n'y était pas. Le brief demandait aussi les écrans en PNG et un prototype cliquable. Claude Design l'a dit lui-même en fin de message : « Reste à produire pour le brief : les PNG des écrans en 3x, […] le prototype.html cliquable et les notes par écran. » Il a prévenu de même que les quatre apparences de l'icône étaient une simulation, et que ses aperçus ne s'affichaient en SF Pro que sur Mac et iPhone.

Étape 3 : demander le logo, en quatre mots

Le 28 septembre, nouvelle conversation, avec le design system intaircom sélectionné. Ma consigne, telle quelle :

Fait moi le LOGO

Toute la consigne. Le reste est dans le design system sélectionné.

La réponse commence par ce qui explique tout le reste : « Je suis parti du design system intaircom sélectionné, donc ses couleurs, sa typo arrondie et son « air » en cyan dans le nom. » Sur la toile, six plans de travail :

• le logo recommandé, baptisé « Le lien », sur fond nuit ;
• sa version sur fond blanc, en bleu profond ;
• l'icône iPhone en trois versions, claire, sombre et teintée ;
• les petites tailles, jusqu'à l'icône de 29 px ;
• deux autres pistes, « L'onde » (deux points reliés par une vague) et « La capsule » (deux points dans une même bulle).

La toile dans son état final. Chaque plan de travail a ses trois boutons : réglages, agrandir, télécharger.

L'idée de la piste recommandée : deux « i » face à face pour les deux personnes, et un arc cyan au-dessus de leurs têtes, qui ne touche ni l'une ni l'autre. L'air entre elles, la liaison sans fil. Dans cette première version, ce symbole était posé devant le mot.

Claude Design a terminé par deux réserves que je cite, parce qu'on les lit trop vite :

Rendu de la police : la police arrondie d'Apple ne s'affiche que sur Mac et iPhone. Sur un autre ordinateur, le nom apparaît dans une police de remplacement.

Pas encore vérifié : je n'ai pas contrôlé le rendu de la toile à l'écran.

Il livre donc une toile qu'il n'a pas regardée. C'est à vous de le faire.

Étape 4 : corriger la piste retenue

La piste me convenait, pas le symbole ajouté devant le mot. Le mot contient déjà deux « i » : autant poser l'arc dessus. J'ai d'abord essayé de le faire à la main sur la toile, puis j'ai écrit ceci, fautes de frappe comprises :

en gros le 1 me a mais faiut que le trait bleu soit ente les deux i deja existant pas deux i en plus au devut

La correction, tapée vite. Claude Design a compris « me va », « faut », « entre » et « début ».

La réponse :

C'est fait : il n'y a plus de symbole devant, et le trait bleu part maintenant du premier « i » d'intaircom pour arriver au « i » de « air », en passant au-dessus de « nta ». J'ai mis à jour le logo principal, la version sur fond blanc et les petites tailles. Ton essai à la main sur la planche principale a été remplacé.

Deux choses à noter. Il a écrasé mon essai manuel sans demander, en le disant. Et il a laissé l'icône telle quelle, en expliquant pourquoi : les deux « i » reliés sont l'extrait du même motif, l'ensemble reste cohérent. L'icône est restée comme ça.

Une consigne de quatre mots, une correction d'une ligne, et le logo était là.

Étape 5 : sortir le logo de Claude Design

C'est l'étape où il faut ralentir. Le bouton « Partager » de l'artefact a un onglet « Exporter » : HTML, PDF, PNG, puis « Plus de formats et d'applications ». Pas de SVG. L'export PNG demande de choisir un plan de travail, en 1× ou en 2×.

L'export PNG, plan de travail par plan de travail. On y voit au passage les deux pistes écartées.

Pour une app, il fallait du vectoriel, et là le logo d'intaircom posait un problème que l'export ne règle pas. Sur la toile, le mot n'est pas un dessin : c'est du texte, affiché dans la police arrondie du système d'Apple, avec un arc SVG positionné par-dessus. Ouvert sur un PC, le même fichier afficherait une autre police et un arc décalé, Claude Design l'a écrit lui-même.

J'ai donc demandé autre chose qu'un export :

ok on valide le logo intaircom plan A avec ses déclinaison

fait moi un markdown de tout ca pour que je donne a claude code

La validation, et la commande du document de passation.

Claude Design a rendu un fichier de spécification : la construction du mot et de l'arc avec ses mesures en em, les couleurs, les deux versions, le code SVG du glyphe de l'icône, ses trois variantes, et la liste des fichiers à produire. Avec, à la fin, trois points à régler qu'il a listés de lui-même :

• la position de l'arc est calée sur des mesures estimées de la police, à remesurer ;
• la licence de SF Pro limite son usage à la conception d'interfaces pour les appareils Apple, donc un logo dessiné avec cette police est à vérifier avant toute diffusion hors de l'app ;
• la marge de protection et la taille minimale ne sont pas fixées.

Un raté au passage. Le zip récupéré avec le design system contenait toujours la première marque, celle des deux points et de la vague. Entre le zip et le Markdown, deux logos différents circulaient. Il a fallu écarter les fichiers du zip pour ne pas importer le mauvais.

Étape 6 : fabriquer les fichiers et les poser dans l'app

Le Markdown est parti dans Claude Code, avec le dépôt de l'app. Plutôt que de retoucher des SVG à la main, Claude Code a écrit un script Swift de 554 lignes qui fabrique tout : il lit les contours de la police dans le système, mesure les vrais points des deux « i », pose l'arc selon les règles du Markdown et écrit les fichiers.

Les mesures estimées par Claude Design n'étaient pas justes. Il supposait un « i » large de 0,26 em avec un point centré à 0,68 em au-dessus de la ligne de base. Mesuré dans la police : 0,222 em et 0,662 em. L'écart paraît mince. Pour un arc qui doit s'arrêter à 0,058 em de chaque point sans jamais les toucher, il compte.

Le logo final, produit par le script, de 160 à 20 px. À la plus petite taille, l'arc fait environ 1,4 px d'épaisseur.

Le script sort le logo en SVG et en PDF, texte vectorisé, en PNG à 512 et 2048 px, l'icône en 1024 px dans ses trois apparences, et les calques séparés pour Icon Composer. Le glyphe de l'icône, lui, tient en neuf lignes :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 3 76 89" width="76" height="89">
  <title>intaircom</title>
  <circle cx="10" cy="26" r="10" fill="#FFFFFF"/>
  <circle cx="66" cy="26" r="10" fill="#FFFFFF"/>
  <rect x="2" y="44" width="16" height="48" rx="8" fill="#FFFFFF"/>
  <rect x="58" y="44" width="16" height="48" rx="8" fill="#FFFFFF"/>
  <path d="M24.14 11.86 A19.6 19.6 0 0 1 51.86 11.86"
        fill="none" stroke="#5AD1F5" stroke-width="6" stroke-linecap="round"/>
</svg>

L'icône dans ses trois apparences iOS, jusqu'à 29 px, la taille des Réglages.

Le même jour, les horodatages racontent la suite : le Markdown est téléchargé à 11 h 07, les fichiers de marque sont générés à 11 h 20, et à 14 h 01 la version avec la marque et le design system tourne sur l'iPhone de test.

Le logo à sa place, ici dans le simulateur : l'icône sur l'écran d'accueil, le mot en tête du premier écran.

Tout n'est pas fermé pour autant. Trois sujets restent ouverts dans le suivi du projet : composer l'icône dans Icon Composer à partir des calques, trancher la question de la licence de la police pour un usage hors de l'app, et fixer la zone de protection.

Claude Design pour un logo : ce qui est fait, ce qui reste à la main

Le bilan des deux sessions, celle du design system et celle du logo, ligne par ligne. La colonne de droite liste le travail qui ne disparaît pas.

Ce que Claude Design ne fait pas pour un logo

Il ne regarde pas toujours ce qu'il livre. Sur intaircom, deux réponses sur trois disent que le rendu n'a pas été vu à l'écran.

Il n'exporte pas de SVG par son menu. HTML, PDF, PNG, et c'est tout pour les formats de fichier. Le vectoriel s'obtient en demandant des fichiers dans la conversation, comme le zip du design system, ou en passant par une spécification et un outil de code.

Il ne vectorise pas une police qu'il n'a pas. Le mot intaircom est resté du texte en police système jusqu'au script écrit par Claude Code sur un Mac. Et c'est Claude Design qui a signalé que la licence de cette police limitait son usage : la question est toujours ouverte chez nous.

Il ne tient pas ses livrables en cohérence tout seul. Le zip du design system contenait encore l'ancienne marque après la validation de la nouvelle. Les écrans et le prototype demandés dans le brief n'ont pas été produits dans la même passe.

Il ne sort que des couleurs d'écran. Des valeurs hexadécimales partout. Les références d'impression restent à définir dans un éditeur vectoriel comme Illustrator.

Il compte dans votre quota. Je n'ai pas mesuré ce que ces sessions ont consommé.

Former son équipe à Claude Design

Sur ces deux sessions, l'outil est allé vite, et ce qui a fait le résultat ne venait pas de lui : les interdits du brief, la lecture du nom, la décision de poser l'arc sur les « i » du mot, l'idée de commander une spécification plutôt qu'un export.

La formation Claude Design de Mill-Forma travaille ces gestes sur les projets de l'équipe : cadrer un brief exploitable, ancrer Claude sur une charte, produire maquettes et prototypes, contrôler ce qui sort, et poser les règles de confidentialité et de propriété intellectuelle avec les clients. Durée recommandée : 21 à 35 heures, en intra, dans vos locaux ou en classe virtuelle. Pour les équipes qui veulent aller jusqu'aux tokens et à la synchronisation avec le code, comme sur intaircom, la formation Design System avec Claude prend la suite, et la formation Claude Code couvre l'autre moitié de la chaîne.

Pour aller plus loin

• Claude (Anthropic) : modèles, usages, prix, pour savoir quel abonnement donne accès à quoi.
• Claude Code : tutoriel d'installation et premiers pas, l'outil qui a transformé la spécification du logo en fichiers.
• Connecteur Adobe for creativity, pour piloter Photoshop et Illustrator depuis une conversation avec Claude.
• Figma vs Sketch, Adobe XD, Penpot, Framer, pour choisir l'outil dans lequel le logo vivra ensuite.

FAQ : créer un logo avec Claude Design