Design IA générique : à quoi on reconnaît une app faite par une IA

Un design IA générique, c’est une interface où personne n’a rien décidé : un dégradé violet, un titre « Bienvenue sur… », des cartes toutes identiques, la police du gabarit de départ. Claude Code ne dessine pas mal. Quand ta demande ne lui impose aucune contrainte, il te rend la moyenne de tout ce qu’il a déjà vu. La parade ne passe pas par un meilleur adjectif, elle passe par une décision écrite avant la première page.

Le test à faire toi-même : demande « un joli design »

Fais l’essai sur ton projet, c’est le plus parlant. Ouvre Claude Code et demande « fais-moi la page d’accueil, qu’elle soit jolie et moderne », sans rien d’autre. Pas de couleurs, pas de public, pas d’exemple.

Regarde ce qui revient. La page fonctionne, les boutons sont alignés, rien ne déborde. Puis compare-la à la liste qui suit : il y a de bonnes chances que tu coches plusieurs signes en une seconde. Rien n’est faux, mais rien n’est à toi non plus.

Cinq signes qui trahissent une app faite par une IA

Tu n’as pas besoin de savoir dessiner pour les repérer. Ce sont des choses qui se voient avant même de lire un mot de la page.

• Le dégradé violet, bleu ou rose, en fond de page, de bouton ou de titre. C’est la signature par défaut des interfaces générées sans direction.
• Le titre « Bienvenue sur… » suivi de cartes identiques, avec une icône, un titre et deux lignes dans chacune. C’est la page d’accueil la plus répandue du web généré.
• Une seule police partout, souvent celle que le gabarit de départ installe, sans que personne l’ait choisie.
• Des ombres sur tout et des cartes à l’intérieur de cartes. Quand tout flotte au même niveau, rien ne ressort.
• Des textes qui conviendraient à n’importe quel produit : « Simplifiez votre quotidien », des emojis en guise de puces, un « Lorem ipsum » oublié.

Un seul de ces signes ne dit rien. C’est leur accumulation qui fait le look, et c’est aussi ce qui le rend si facile à reconnaître pour quelqu’un qui a vu passer des dizaines d’applications faites avec un assistant. Cette liste n’est pas exhaustive, je ne donne ici que ce qui saute aux yeux.

Pourquoi Claude Code te rend la moyenne

Claude Code répond à ce que tu écris. « Joli et moderne » ne contient aucune information sur ton produit, ton public ou ce que tu veux que le visiteur ressente. Pour remplir ce vide, il fait ce que fait un modèle : il choisit ce qui est le plus probable, c’est-à-dire ce qui revient le plus souvent dans les interfaces qu’il a croisées. Le plus probable, c’est la moyenne, et la moyenne se reconnaît justement parce qu’elle est partout.

Je ne compte donc pas sur une prochaine version pour régler ça : un assistant plus fort rendra une moyenne plus propre, pas une page qui a un avis. Chaque choix que tu ne fais pas, quelqu’un d’autre le fait pour toi, et ce quelqu’un a tendance à choisir comme tout le monde.

« Moderne », « simple », « épuré » ne contraignent rien : ce sont les mots que la moyenne revendique déjà. Les remplacer par d’autres adjectifs vagues ne change pas le résultat. Ce qui change le résultat, ce sont des décisions précises, prises par quelqu’un qui connaît ses clients.

Ce que ça coûte à ton produit

Prends Créno. La cliente d’une indépendante reçoit un lien dans un message, l’ouvre sur son téléphone, et ne connaît ni la coiffeuse en ligne ni l’application. Elle doit décider en quelques secondes si elle laisse son prénom et son numéro de téléphone sur cette page. Elle ne se dit pas « ce design est généré ». Elle sent confusément que personne n’a pris soin de cette page, et elle ne sait pas si quelqu’un prendra soin de ses données.

C’est la vraie perte. Une interface sans décision ne choque pas, elle ne rassure pas non plus : elle ne distingue pas ton produit de la page qui vient juste avant dans la conversation. Pour un fondateur qui vend quelque chose, la première page sert à dire « ici, quelqu’un fait attention ». Un look générique dit l’inverse sans qu’un mot soit écrit.

Il y a aussi un coût de travail. Une page sans direction se refait : on change une couleur, la page ne tient plus, on redemande un autre style, et la moyenne revient. Tu repars de zéro à chaque fois, avec en prime le doute sur ce qui a été changé.

La seule chose à faire aujourd’hui

Plutôt que de chercher des astuces à glisser dans tes demandes, installe un skill qui impose les questions avant la page. Je l’ai écrit pour la formation et je le publie en libre accès sur GitHub, sous licence MIT. Il s’appelle direction-artistique : dès que tu demandes un design, il pose ses questions de marque avant d’écrire la moindre ligne d’interface, et il enregistre tes réponses dans un fichier de ton projet. Si les skills sont nouveaux pour toi, Skills Claude Code : c’est quoi, et comment en installer un explique le principe.

Un skill est un texte que Claude Code suit sur ton ordinateur, donc on le lit avant de l’installer, les miens compris. Ouvre Claude Code dans le dossier de ton projet (même vide) et colle ce message :

Clone https://github.com/Sycatle/claude-code-skills-fr dans un dossier temporaire situé en dehors de ce projet. Lis uniquement le dossier direction-artistique (SKILL.md et liste-noire.md) et dis-moi en français ce qu'il te demande de faire sur mon ordinateur : fichiers lus ou écrits, commandes lancées, et si quoi que ce soit envoie des données hors de mon ordinateur. Ne copie rien et ne modifie aucun fichier : attends mon accord.

Quand le résumé te convient, réponds :

D'accord. Copie le dossier direction-artistique dans .claude/skills/ de ce projet, avec liste-noire.md à côté de SKILL.md. N'écrase rien si le dossier existe déjà : arrête-toi et demande-moi. Ensuite supprime le dossier temporaire.

Relance ensuite claude si le dossier .claude/skills/ n’existait pas avant. Puis écris, sans citer le skill : « fais-moi une jolie page d’accueil ». S’il s’est déclenché, Claude Code ne code rien et te pose des questions sur ton produit et sur ce que tu veux qu’on y ressente. Réponds avec ce que tu sais de tes clients, et laisse-le écrire le fichier docs/direction-artistique.md avant d’aller plus loin.

Ce que tu vas voir en premier, c’est que certaines questions sont difficiles. C’est le signe que tu n’avais pas encore décidé, et que la moyenne t’aurait tout décidé à ta place. S’il commence à coder sans rien demander, le skill n’est pas chargé : vérifie qu’il se trouve à un seul niveau sous .claude/skills/. Le skill est écrit pour un projet Next.js avec Tailwind. Sur une autre pile, les questions de marque marchent, les détails techniques de la fin sont à adapter.

Ce que cet article ne couvre pas

Je me suis arrêté exprès à l’installation. Écrire ton brief de marque pas à pas, établir la liste de ce que tu interdis à Claude Code chez toi, appliquer le résultat avec shadcn/ui, contrôler le contraste des couleurs et vérifier le rendu sur un vrai téléphone : tout cela est le travail de la leçon Un design qui ne fait pas « IA », sur le projet Créno, dans la formation Claude Code de A à Z. Le skill peut te servir seul. La leçon t’explique pourquoi il pose ses questions dans cet ordre, et ce que tu en fais ensuite.

Si tu pars de zéro, le chemin complet jusqu’à l’application en ligne est dans créer une application sans savoir coder, et ton premier projet avec Claude Code te met en route en une après-midi. Tous les articles débutants sont réunis dans Apprendre.

Mon avis

Je ne demande plus d’interface à Claude Code tant que la direction n’est pas écrite quelque part, même en dix lignes. Le résultat n’est pas forcément plus beau d’emblée, mais il est à toi, et c’est lui que tu peux corriger : il est plus facile de dire « ce n’est pas ce qu’on avait écrit » que « ça ne me plaît pas, sans que je sache pourquoi ».

Les cinq premières leçons de la formation sont gratuites. Elles t’amènent à une application qui tourne chez toi, avec un fichier CLAUDE.md en place, la bonne base avant de lui demander un design : crée ton compte, c’est gratuit.