Studio de design agentique pour Claude Code (7 rôles, de l'audit à la recette)

Ce kit s’adresse aux designers et aux studios qui travaillent dans Claude Code et veulent mener la refonte d’un site avec une méthode suivie, plutôt qu’avec des prompts épars. Il ajoute un skill, /design-studio, qui tient le rôle de directeur, et 7 agents qui travaillent sous sa direction : benchmark, architecture UX, direction artistique, design system, prototypage HTML, intégration et recette. Le directeur lit votre brief, convoque les rôles utiles, tient un journal de design dans votre dépôt et s’arrête aux décisions qui vous reviennent : le choix d’une piste de direction, puis la validation de chaque maquette. C’est la version générique du studio que l’auteur utilise sur ses propres sites : les chemins, les comptes et les noms de projets privés en sont retirés, les étapes de la méthode sont conservées.

• 1 skill directeur, design-studio (commande /design-studio), avec 7 modes :
  • audit : état des lieux design, UX, accessibilité et performance du site, avec un benchmark, rendu dans design/audit-<AAAA-MM>.md ;
  • direction : des pistes de direction, de la plus sage à la plus franche, dans design/direction.md et une planche HTML à ouvrir ; le directeur s’arrête pour que vous choisissiez ;
  • systeme : tokens, contrastes calculés et composants de la piste retenue, avec une page « design system » à ouvrir ;
  • maquette <gabarit> : prototype haute fidélité avec le vrai contenu, en mobile et en desktop ; le directeur s’arrête pour que vous validiez, repreniez ou écartiez ;
  • integration <gabarit> : passage en code dans la stack du projet, en un commit sur une branche, non poussé ;
  • recette <gabarit> : contrôles visuels, d’accessibilité, de performance et de SEO contre la branche de base, avec un verdict « passe » ou « à reprendre » ;
  • une demande à un seul rôle, par exemple /design-studio benchmark portfolios de photographes.
• 7 agents, un par rôle, chacun avec son modèle et ses outils déclarés dans son en-tête :
  • design-studio-benchmark : sites de référence, tendances et faits datés, rendus en fiche de références sourcées ;
  • design-studio-ux-architect : audit UX, arborescence, parcours et zoning d’un gabarit ;
  • design-studio-art-director : positionnement, pistes de direction et arbitrages de marque ;
  • design-studio-design-system : audit visuel, tokens, contrastes calculés, typographie fluide, mode sombre et composants ;
  • design-studio-prototyper : planche des pistes, page design system et maquette d’un gabarit, chacune en fichier HTML autonome ;
  • design-studio-integrator : passage d’une maquette validée dans la stack du projet ;
  • design-studio-qa : mesures de référence et recette d’un gabarit intégré, avec un rapport daté.
• 4 gabarits installés avec le skill : brief de projet, journal de design, rapport de recette et réglages par défaut (design-studio.json).
• 2 langues à la structure identique, fr/ et en/ : vous installez une seule langue par projet.
• Un guide d’installation par langue (INSTALL.fr.md, INSTALL.en.md) : prérequis, installation dans un projet ou pour tous vos projets, réglages, premier projet pas à pas, mise à jour et désinstallation. Le fichier CHANGELOG.md suit les versions.
• Un exemple réel en 8 fichiers (example/) : un site de démonstration fictif (« Sample Studio »), son brief, les sorties non retouchées des agents de direction artistique et de prototypage, et les captures de la planche obtenue, à 375 et 1 440 px de large.
• 35 fichiers au total.

Organisation des fichiers :

fr/claude/skills/design-studio/   SKILL.md, templates/
fr/claude/agents/                 design-studio-*.md
en/claude/                        même arborescence, en anglais
example/                          README.md, demo-site/, design/, captures/
INSTALL.fr.md, INSTALL.en.md, CHANGELOG.md

Le dossier claude/ de chaque langue reproduit le dossier .claude/ de Claude Code : on le copie dans un projet ou dans le dossier personnel. Il porte un nom sans point pour rester visible après la décompression du zip. Le brief, le journal et les rendus de vos projets s’écrivent dans le dossier design/ de votre dépôt, créé à l’usage.

Fabrication et IA

Le kit (skill, agents, gabarits, guides d’installation et traduction anglaise) a été produit avec un assistant d’IA, Claude Code, à partir du studio que l’auteur utilise, puis relu et contrôlé avant la mise en vente : installation testée sur un dépôt vierge dans les 2 langues, dans un projet comme pour tous les projets ; chargement des 7 agents et du skill par Claude Code ; aucun chemin absolu, aucun secret ni aucun élément privé relevé ; mêmes fichiers, mêmes titres et mêmes réglages en français et en anglais ; relecture par un second agent, dont les remarques ont été corrigées.

L’exemple est une sortie brute des agents du kit : design/direction.md et la planche design/maquettes/direction-pistes.html sont copiés tels que les agents de direction artistique et de prototypage les ont écrits, sans retouche à la main. Le site de démonstration et le brief ont été écrits pour l’exemple. Sur cette planche, tous les espacements mesurés tombent sur la grille de 4 px, et rien ne défile horizontalement à 375 ni à 1 440 px.

• Markdown : le skill, les agents, les gabarits et les guides. Chaque fiche d’agent porte un en-tête (name, description, tools, model) lu par Claude Code.
• JSON : les réglages, facultatifs ; sans fichier, les valeurs par défaut s’appliquent. Ils fixent le dossier du projet de design, le dossier de cache, la langue des rendus, le mode d’aperçu des prototypes, les origines externes permises, des conseillers facultatifs (un agent de votre dépôt pour la conversion ou le SEO) et un fichier d’expériences.
• HTML : les prototypes rendus par les agents, comme ceux de l’exemple, sont des fichiers HTML autonomes, à ouvrir dans un navigateur. Par défaut, ils ne chargent rien d’autre que quelques CDN et Google Fonts ; la liste se règle.
• PNG : les captures de l’exemple.

Prérequis :

• Claude Code, dans une version qui gère les skills et les sous-agents ;
• l’accès aux modèles que fixent les agents (Opus, Sonnet ou Haiku) ; sans accès à Opus, le guide décrit le repli inherit ;
• git, dont dépendent le journal, les branches de design et le commit de l’intégration ;
• Node.js et un accès réseau pour la recette, l’intégration, les captures et le calcul des contrastes ; les versions demandées sont indiquées dans le guide d’installation ;
• un navigateur, pour ouvrir les prototypes.

Les commandes d’installation s’écrivent dans un terminal : macOS, Linux, ou Windows avec WSL ou Git Bash.

Ce qui a été testé, et ce qui ne l’a pas été

Testé avant la mise en vente : l’installation dans un projet et pour tous les projets, dans les 2 langues, sur un dépôt vierge ; le chargement des 7 agents et du skill par Claude Code ; un exemple réel produit par les agents de direction artistique et de prototypage.

Non testé, et dépendant de votre environnement : le déclenchement du skill par une phrase libre (au lieu de /design-studio), la délégation réelle du directeur à chaque agent, la disponibilité des modèles sur votre abonnement, les demandes de permission des outils, et un projet complet de bout en bout. L’exemple montre ce que rendent ces agents à partir d’un brief ; il ne montre pas l’orchestration du directeur.

Ce que le kit ne fait pas :

• il ne produit pas de fichier pour un logiciel de design : les prototypes sont des pages HTML ;
• il n’est pas un service hébergé : tout tourne dans votre session Claude Code, sur votre machine, avec votre abonnement ;
• il ne pousse, ne fusionne et ne met rien en ligne : l’intégration s’arrête à un commit sur une branche ;
• il ne change ni vos URLs ni votre contenu : la refonte passe derrière les mêmes adresses, avec les mêmes textes.

Le kit est vendu sous licence commerciale : vous pouvez l’utiliser dans vos projets personnels et professionnels, y compris pour vos clients, et livrer les sites conçus avec lui. Vous ne pouvez pas revendre ni redistribuer le kit ou ses fichiers. Si votre dépôt est public, installez le kit pour tous vos projets, ou ajoutez ses dossiers au .gitignore du dépôt comme l’indique le guide d’installation. Le dossier design/ que produit le studio vous appartient.

• Sur le passage du prompt au site fonctionnel : Claude Design et la révolution du prototypage.
• Sur le partage des rôles entre un agent et un humain : un agent IA pour produire les visuels d’un jeu.

1.0.0 (10 novembre 2026) : première version.

Claude Code est une marque de son éditeur ; ce kit n’est ni affilié ni approuvé.