Dashboard Claude Code : le détail qui trahit l’IA

Un dashboard Claude Code se repère au premier coup d’œil quand Claude invente chaque carte, et il cesse de trahir l’IA dès qu’il assemble des composants déjà dessinés. Votre client juge tout le projet sur ce premier écran. Le moyen le plus rentable de le soigner : une bibliothèque comme Arc, branchée à Claude Code par un serveur MCP et un skill.

Ce qui trahit un dashboard fait par IA

Sans consigne, Claude Code dessine ce qu’il a le plus vu. Anthropic le sait : son plugin officiel frontend-design a pour but affiché d’éviter « l’esthétique générique de l’IA ».

Les signes se ressemblent d’un projet à l’autre :

• la police Inter partout, un fond blanc et un dégradé violet ;
• une petite étiquette en capitales au-dessus de chaque titre ;
• des icônes posées dans des tuiles arrondies, des halos et des ombres colorées ;
• des cartes rangées dans d’autres cartes ;
• des libellés en anglais (« Revenue », « Signups ») sur l’écran d’une agence immobilière.

Le plus grave ne se voit pas sur une capture : les états oubliés. Le tableau vide le premier jour, le chargement qui fige la page, l’erreur qui laisse un écran blanc, les chiffres qui débordent sur un téléphone. C’est là que le client comprend que personne n’a regardé l’écran avant lui.

Le skill /design, présenté avec les 6 skills pour cadrer avant de coder, fixe une direction visuelle avant la première ligne d’interface. Il règle le style, mais il ne dessine pas chaque état d’un tableau.

Claude Design, frontend-design ou composants : qui fait quoi

Les trois reviennent dès qu’on parle de design avec Claude, et ils ne règlent pas le même problème.

Claude Design : à quoi l’écran doit ressembler

Lancé par Anthropic en avril 2026, Claude Design produit des maquettes, des prototypes et des diapositives à partir d’une conversation, puis transmet le projet à Claude Code. C’est utile pour faire valider une direction au client avant de coder. Mais la maquette n’est pas l’écran : c’est Claude Code qui écrit celui que le client utilisera.

frontend-design et /design : quel style

Le plugin et le skill donnent une direction (typographie, couleurs, animations) et poussent Claude à faire des choix au lieu de prendre la moyenne. Ils agissent sur le goût ; les pièces, Claude continue de les dessiner lui-même.

Une bibliothèque de composants : avec quelles pièces

Les boutons, les cartes de chiffres, les graphiques et les tableaux sont déjà dessinés, animés et prévus pour le thème clair et le thème sombre. Claude ne les invente plus : il les choisit et les assemble.

Pour un dashboard client, c’est la troisième qui change le plus le rendu pour le moins d’effort. Les trois se combinent : une direction, puis des pièces qui la respectent.

Brancher Arc à Claude Code : un serveur MCP et un skill

Arc est une bibliothèque de composants React. Au moment du Reel, elle comptait 165 composants animés ; uiarc.dev en annonçait 188 le 27 octobre 2026. S’y ajoutent des blocs d’écran déjà montés : formulaire, prise de rendez-vous, paiement, graphiques. Un bloc est un morceau de page complet, plusieurs composants assemblés avec leurs états.

Le branchement tient en deux commandes :

1. Le serveur MCP d’Arc donne à Claude Code l’accès au catalogue. Il cherche un composant par intention (« une action destructive à confirmer »), lit son usage et ses props, et obtient la commande d’installation.
2. Le skill Arc, installé dans le projet, dit à Claude quand se servir d’Arc, comment composer une page et quoi relire avant de rendre la main.

0:36

Côté projet, Arc attend du React 19 en TypeScript, avec shadcn déjà initialisé. Ses composants passent par des modules CSS : votre projet peut se passer de Tailwind. À la première connexion du serveur, la page de connexion d’Arc s’ouvre, et un compte gratuit suffit. Les deux commandes, prêtes à coller, sont dans le kit lié à cet article.

Décrire l’écran par son objectif, pas par son code

Une fois Arc branché, ne demandez pas « une grille de 4 cartes avec un graphique en dessous ». Dites ce que la personne vient faire sur l’écran, et nommez Arc : Claude fouille alors le catalogue avant d’écrire une ligne.

Avec Arc, construis le tableau de bord des demandes de devis de l’agence.
L’équipe l’ouvre le lundi matin pour voir où en est la semaine.
4 chiffres clés : demandes reçues, devis envoyés, devis signés, délai moyen de réponse.
La courbe des demandes sur 7, 30 ou 90 jours, et la liste des sources, triable.
Cherche d’abord les composants dans Arc. Prévois les états vide, chargement et erreur.
Vérifie en thème clair, en thème sombre et à 390 px de large.

Claude interroge le catalogue, compare deux ou trois candidats (chaque fiche dit quand utiliser le composant, et quand ne pas l’utiliser), puis installe le tout par la CLI shadcn. Pour ce tableau, cela donne une rangée de cartes de chiffres, un sélecteur de période, une courbe et un tableau triable. Les fichiers sont copiés dans le projet, dans un dossier arc/ : vous pouvez les relire et les modifier comme votre propre code.

L’objectif de l’écran ne s’invente pas au moment du prompt. Il sort du cadrage : si vous avez écrit le PRD du projet, la user story de l’écran vous donne déjà la phrase.

Ce que la version gratuite couvre vraiment

Dans le Reel, je dis que le compte gratuit suffit largement pour commencer. Pour un premier dashboard, c’est vrai, à condition de savoir où il s’arrête.

Le 27 octobre 2026, uiarc.dev annonçait 120 composants et 22 blocs gratuits, sous licence MIT, et 68 composants et 91 blocs dans la version Pro, payante. Les pièces d’un dashboard sont presque toutes gratuites : la carte de chiffre, la courbe, les barres, l’anneau, la jauge, la mini-courbe, le tableau triable, la barre de filtres, l’état vide.

Ce qui est Pro, ce sont surtout les blocs complets : le tableau de bord de métriques tout monté, le formulaire en plusieurs étapes, le choix d’un créneau, le récapitulatif de paiement. Le dashboard et le formulaire montrés dans le Reel en font partie.

Ne demandez pas à Claude de reproduire un bloc Pro à la main : le skill d’Arc le lui interdit, et la licence aussi. Assemblez la même page avec les composants gratuits, ou passez en Pro le jour où un client paie un écran qui le justifie.

Vérifier l’écran avant de le montrer au client

Le skill d’Arc fait passer à Claude une liste de contrôle avant de rendre la main. Relisez quand même vous-même, sur l’écran réel, avec les données du client :

• les états : videz la table, coupez le réseau, ralentissez le chargement, et chaque zone doit afficher quelque chose de propre ;
• le téléphone : à 390 px de large, les chiffres tiennent, et le tableau défile dans sa carte, pas la page entière ;
• le thème sombre : aucun texte gris sur fond gris, aucun graphique illisible ;
• les mots : les libellés dans le vocabulaire du client (dossiers, mandats, chantiers), les dates et les montants au format français ;
• une seule action principale par écran, et aucun bouton qui ne mène nulle part.

Si un composant casse à l’installation ou qu’un graphique refuse ses données, ne laissez pas Claude empiler les correctifs : la méthode de debug en 4 phases s’applique telle quelle.