Dernière mise à jour : juin 2026
La méthode complète pour orchestrer 7 agents spécialisés sur Claude Code et livrer un site web + backoffice client autonome en une journée de travail solo — avec 3 fois moins de temps que la production classique.
À la fin de ce guide, tu as : une trame de cadrage réutilisable, les 7 rôles d'agents avec leur prompt de démarrage prêt à coller, l'ordre d'orchestration exact, et un backoffice que le client gère seul sans aucun CMS ni dépendance à toi.
Important à lire avant de commencer : le site livré est 100 % déterministe — aucun LLM ne tourne dans le produit final. L'IA est dans la fabrication, pas dans le site. Ne vends pas un « site IA » : vends un site fait 3 fois plus vite, qui tient techniquement, et dont le client est pleinement propriétaire.
Le cadrage, c'est ce qui fait tenir le livrable. Sans lui, tu codes vite dans la mauvaise direction. La vitesse d'exécution est un moyen ; le cadrage est ce qui fait la différence entre un livrable qui rend le client autonome et un livrable qu'il appelle à chaque mise à jour.
Réponds à ces 5 questions avant d'ouvrir Claude Code :
Pas « présenter l'activité ». Définis l'action que le visiteur doit faire et la décision qu'il doit prendre. Exemple : « Le visiteur doit voir les 4 catégories de photos, ressentir l'univers et envoyer un message de demande de devis. »
Liste les contenus qu'il devra mettre à jour sans toi : photos, textes de section, tarifs, disponibilités, etc. Ce sont exactement les tables et les vues que le backoffice devra exposer.
Délai, budget, nom de domaine existant, charte graphique déjà figée, mentions légales obligatoires, RGPD, formulaire de contact avec copie email — tout ce qui contraint la solution avant qu'elle soit construite.
Définit les 2 ou 3 moments de validation client (maquette direction artistique, démo backoffice, recette finale) et le canal de retour (email, lien de staging). Évite les allers-retours infinis après livraison.
Dis explicitement ce que tu ne livres pas : SEO technique avancé, intégration CRM, version multilingue, maintenance mensuelle. Ce que tu ne nommes pas, le client l'attend.
Chaque agent est une conversation Claude Code dédiée avec un rôle et un contexte figés. Tu n'as pas un seul fil de conversation « généraliste » : tu as 7 contextes spécialisés que tu actives dans l'ordre ci-dessous. L'ordre compte : les décisions d'un agent alimentent le suivant.
Rôle : décomposer le brief en livrables précis, arbitrer les ambiguïtés, produire un document de référence que tous les autres agents consultent.
Ce qu'il produit : une liste de composants à construire (avec leurs états), un schéma de données Supabase draft, la liste des pages et leur contenu attendu, et la liste des accès backoffice nécessaires.
Tu es chef de projet et architecte produit. Je te soumets un brief client. Ton travail : 1. Identifie les pages du site (nom, URL, contenu principal, composants visuels). 2. Liste les données que le client devra gérer (quelles tables Supabase, quels champs, quelles relations). 3. Décompose les livrables en blocs de développement indépendants (front, backoffice, auth). 4. Signale les ambiguïtés du brief et propose une résolution par défaut. 5. Produis un document de référence structuré que je pourrai coller dans les conversations des agents suivants. Brief client : [COLLE LE BRIEF ICI]
Rôle : nommer les sections, écrire les textes d'interface, les appels à l'action, les microtextes de formulaire et les messages d'état du backoffice. Il travaille sur la sortie de l'Agent 1.
Ce qu'il produit : un document de wording complet (page par page, section par section) que l'Agent 5 intègre directement dans les composants.
Tu es copywriter UX. Voici l'architecture du site et les informations sur le client : [COLLE LA SORTIE DE L'AGENT 1 + LES ÉLÉMENTS DE MARQUE DU CLIENT] Ton travail : 1. Écris tous les textes du site : titres de section, sous-titres, labels de bouton, textes de navigation, messages de formulaire (succès, erreur, placeholder), microtextes du backoffice (titres de colonne, messages vides, confirmations d'action). 2. Adapte le ton à l'activité et au positionnement du client — ne génère pas de textes génériques. 3. Pour chaque texte, indique la page et le composant cible. 4. Pas de remplissage Lorem ipsum : chaque texte est final ou marqué [À COMPLÉTER PAR LE CLIENT].
Rôle : définir l'univers visuel (palette, typographie, logique de mise en page, traitement des images) à partir des références du client. Il ne code pas — il spécifie.
Ce qu'il produit : un document de design tokens (couleurs hex, typo, espacements, breakpoints) et les règles de mise en page par type de composant (hero, grille, card, formulaire).
Tu es directeur artistique web. Voici le brief client et ses références visuelles : [COLLE LE BRIEF + LES RÉFÉRENCES : URLs d'inspiration, couleurs existantes, logo, charte si disponible] Ton travail : 1. Propose une palette de 5 couleurs maximum (fond, texte principal, texte secondaire, accent, surface carte) avec les valeurs hex. 2. Définis la typographie : famille, graisses utilisées, tailles de titre (h1 à h4) et de corps en px/rem. 3. Décris la logique de mise en page : est-ce que c'est dense ou aéré ? Symétrique ou organique ? Quelle grille (colonnes, gouttières) ? 4. Spécifie le traitement des images : ratio, objet-fit, effets (aucun / léger overlay / noir et blanc / etc.). 5. Produis les tokens CSS en variables :root prêts à coller. 6. N'invente pas de contrainte : si le client n'a pas de référence sur un point, dis-le et donne le défaut raisonnable.
Rôle : structurer la navigation, le parcours visiteur, la hiérarchie d'information et les états d'interface (vide, chargement, erreur, succès). Il travaille sur les sorties des Agents 1, 2 et 3.
Ce qu'il produit : un wireflow texte (liste ordonnée des composants par page, avec leurs états et leurs interactions) que l'Agent 5 implémente directement.
Tu es UX designer. Voici l'architecture du site, le wording finalisé et les specs visuelles : [COLLE LES SORTIES DES AGENTS 1, 2 ET 3] Ton travail : 1. Pour chaque page, liste les composants dans l'ordre vertical d'affichage avec leur rôle exact. 2. Définis les états de chaque composant interactif : état vide (aucun contenu), état de chargement, état d'erreur, état de succès. 3. Décris le parcours visiteur principal en 5 étapes maximum (de l'arrivée sur le site à l'action finale). 4. Identifie les frictions possibles et propose une résolution simple (pas de redesign complet — un ajustement de hiérarchie ou de wording suffit souvent). 5. Produis un wireflow texte structuré que je peux coller directement dans la conversation du développeur front.
Rôle : construire les composants React/Next.js, intégrer les tokens CSS, connecter les données Supabase en lecture, implémenter les interactions. Il travaille sur les sorties des Agents 1 à 4.
Ce qu'il produit : le code source complet du site (composants, pages, layout, assets).
Tu es développeur Next.js senior. Stack : Next.js 14 App Router, React Server Components, Tailwind CSS, Supabase JS client (lecture seule côté front). Voici les specs complètes : [COLLE LES SORTIES DES AGENTS 1, 2, 3 ET 4] Règles non négociables : - App Router uniquement (pas de pages/). - Données Supabase récupérées en RSC (fetch serveur) sauf interactions client explicites. - Variables CSS des tokens DA en :root, Tailwind en complément. - Zéro dépendance non standard sans validation explicite. - Chaque composant dans son propre fichier, nommé en PascalCase. - Les images sont servies depuis Supabase Storage avec next/image. - Le formulaire de contact envoie via une Server Action (pas d'API tierce). Commence par le layout global et les tokens CSS, puis page par page dans l'ordre défini par l'Agent 1.
Rôle : construire le schéma Supabase, les règles RLS (Row Level Security), les routes d'administration, l'upload de fichiers et l'authentification. C'est lui qui rend le client autonome.
Ce qu'il produit : les migrations SQL Supabase, les pages /admin/* en Next.js avec auth Supabase, les formulaires CRUD et les composants d'upload.
Tu es développeur backend et architecte Supabase. Stack : Supabase (PostgreSQL, Auth, Storage, RLS), Next.js 14 App Router pour les pages admin. Voici le schéma de données défini par l'Agent 1 et les données que le client doit pouvoir gérer : [COLLE LA SORTIE DE L'AGENT 1 — section données — ET LA LISTE BACKOFFICE DE LA QUESTION 2 DU CADRAGE] Ton travail : 1. Écris les migrations SQL complètes (CREATE TABLE, index, contraintes). 2. Écris les politiques RLS : lecture publique sur les tables front, écriture réservée aux utilisateurs authentifiés avec le rôle admin. 3. Construis les pages /admin/* : liste, création, édition, suppression pour chaque entité gérable. 4. Implémente l'upload vers Supabase Storage avec validation de type et de taille côté serveur. 5. Configure l'auth Supabase (email + mot de passe) avec middleware Next.js pour protéger toutes les routes /admin/*. 6. Le backoffice doit être utilisable par un non-développeur : libellés clairs, messages de confirmation avant suppression, feedback visuel sur chaque action. Commence par les migrations SQL, puis le middleware auth, puis les pages admin dans l'ordre de priorité métier.
Rôle : relire l'ensemble du code produit, identifier les incohérences cross-composants, vérifier les états manquants, tester les cas limites et produire une checklist de recette à soumettre au client.
Ce qu'il produit : un rapport de QA avec les corrections prioritaires et une checklist de recette client (ce que le client doit valider avant la livraison finale).
Tu es QA engineer. Voici le code source complet du projet : [COLLE LES FICHIERS CLÉS OU LE DÉPÔT COMPLET] Ton travail : 1. Vérifie la cohérence des noms de variables, de composants et de tables entre le front et le backoffice. 2. Identifie les états non gérés : formulaire vide soumis, upload d'un fichier trop lourd, session expirée sur une page admin, table vide sans message d'état. 3. Vérifie que les politiques RLS correspondent aux routes exposées (aucune donnée accessible sans auth là où c'est requis). 4. Liste les corrections par ordre de priorité : bloquant / mineur / cosmétique. 5. Produis une checklist de recette client en langage non technique : ce que le client doit tester et valider avant de signer la livraison.
Le backoffice ne suffit pas à rendre un client autonome. Le transfert technique est la dernière étape — et elle se prépare dès le début, pas après la livraison.
Le client crée lui-même ses comptes Vercel, Supabase et GitHub — ou tu les crées avec ses coordonnées et tu lui transfères immédiatement. Ne travaille jamais sur tes propres comptes pour un projet client : le transfert devient un problème.
Dans Vercel, ajoute le domaine du client dans Settings > Domains. Le client gère son DNS chez son registrar (OVH, Gandi, Namecheap…) en pointant vers les nameservers Vercel ou en ajoutant les enregistrements CNAME/A fournis. Déploiement automatique à chaque push sur main.
Dans Supabase, via Authentication > Users, crée le compte email du client avec le rôle admin. Envoie-lui un lien de réinitialisation de mot de passe — il définit lui-même son mot de passe sans que tu le connaisses jamais.
Montre en partage d'écran : connexion au backoffice, ajout d'une photo, modification d'un texte, suppression d'un élément. Enregistre la session (avec accord) : le client l'a en référence s'il bloque. Fournis l'URL du backoffice (/admin) et ses identifiants par écrit.
Dans une note simple (Notion, Google Doc ou même un email) : comment ajouter une photo, comment modifier un texte de section, comment changer un prix ou une date. Trois actions, pas un manuel complet. Le client utilisera les 3 premières semaines ; ensuite c'est acquis.
Voici comment les 7 agents ont été orchestrés pour livrer le site de Noa Nøxen, photographe parisienne : portfolio masonry 4 catégories, 44 photos, services, contact, backoffice complet.
Brief de départ : portfolio photographe parisienne, 4 catégories (Portrait, Mode, Corporate, Événementiel), galerie masonry, page services avec tarifs, formulaire de contact, backoffice pour gérer les photos et les textes sans appeler le prestataire.
Agent 1 — Cadrage : a identifié 5 pages (Accueil, Galerie par catégorie, Services, Contact, Admin), 3 tables Supabase (photos, categories, sections_wording), et a signalé une ambiguïté sur les tarifs (affichés publiquement ou sur demande) — décision prise : sur demande, formulaire uniquement.
Agent 2 — Wording : a produit tous les textes en 40 minutes, dont les labels du backoffice (« Ajouter une photo », « Catégorie », « Visible sur le site », messages de confirmation de suppression en langage naturel).
Agent 3 — DA : palette noir profond / blanc cassé / un seul accent minimaliste, typographie serif pour les titres, sans-serif pour le corps, grille masonry 3 colonnes desktop / 2 colonnes mobile, images en noir et blanc au survol.
Agent 4 — UX : parcours visiteur en 4 étapes (arrivée hero → sélection catégorie → galerie → formulaire contact), composants listés dans l'ordre vertical par page, états vides définis (galerie sans photo : message « Prochainement »).
Agent 5 — Front : Next.js 14 App Router, composants MasonryGrid, PhotoCard, ContactForm (Server Action), layout global avec nav sticky et footer. Données photos récupérées en RSC depuis Supabase.
Agent 6 — Backoffice : 3 migrations SQL, RLS lecture publique / écriture admin uniquement, pages /admin/photos (liste + upload), /admin/categories, /admin/wording, middleware Next.js sur /admin/*, upload vers Supabase Storage avec validation type image et 10 Mo max.
Agent 7 — QA : a identifié 2 points bloquants (état vide de la galerie non géré si une catégorie n'a pas de photos, et session admin non rafraîchie après expiration) et 1 mineur (libellé de bouton incohérent entre deux pages). Corrections appliquées en 20 minutes. Checklist de recette client produite en 5 points.
Résultat : livraison en une journée de travail solo. La cliente a changé son mot de passe et ajouté 3 photos sans contacter le prestataire la première semaine.
Piège 1 — Sauter le cadrage parce qu'on a hâte de coder. C'est la cause principale des allers-retours en fin de projet. L'Agent 1 prend 30 à 60 minutes ; il en fait économiser 5 à 10. Ne le saute jamais.
Piège 2 — Confondre vitesse et qualité réduite. La méthode est rapide parce que chaque agent est focalisé, pas parce qu'on bâcle. Un bug non détecté par l'Agent 7 coûte plus cher à corriger après livraison qu'avant.
Piège 3 — Travailler sur ses propres comptes. Le client doit être propriétaire de son infrastructure dès le premier jour. Un transfert Vercel ou Supabase en urgence après livraison est une mauvaise expérience pour tout le monde.
Piège 4 — Promettre un « site IA ». Le produit livré est un site web statique/dynamique classique. Aucun LLM ne tourne en production. Ne vends pas une technologie qui n'est pas dans le produit : vends la vitesse de production et l'autonomie client — c'est ce qui a de la valeur.
Piège 5 — Sous-estimer la phase de passation. Un client qui ne sait pas utiliser son backoffice va appeler. Prévois les 30 minutes de passation et les 3 procédures documentées dès que tu scopes le projet — c'est inclus dans le tarif, pas un bonus.
Limite — projets complexes. Cette méthode est optimale pour des sites de 3 à 8 pages avec un backoffice standard (CRUD d'entités simples). Pour des tunnels de conversion multi-étapes, des intégrations SI, ou des logiques métier avancées, la décomposition en 7 agents reste valide mais le cadrage et l'Agent 6 demandent plusieurs jours, pas quelques heures.
Limite — clients sans e-mail business. L'auth Supabase par email est simple et robuste, mais le client doit avoir une adresse email active et savoir l'utiliser pour se connecter. Ça semble évident ; ça ne l'est pas toujours.
Ce guide couvre la méthode de production. Si tu veux aller plus loin sur le cadrage commercial (devis, proposition, justification de prix), le guide sur la génération de devis avec un projet Claude est complémentaire.
Des questions sur l'orchestration ou sur une étape spécifique ? Écris à theo@vecto.me.
Des guides pratiques Claude & automatisation, droit dans ta boîte mail quand ils sortent. Rien d'autre — désabonnement en un clic.
Tu veux passer à l'action maintenant ? Réserve 20 min →