L'écosystème Claude — Guide complet Ledupplex

🌐

01 · Vue d'ensemble

L'écosystème Claude

Un modèle IA développé par Anthropic, accessible via six produits distincts selon le profil et l'usage.

💡 Claude est avant tout un modèle de langage (LLM). Les produits sont des interfaces différentes qui donnent accès à ce même modèle — chacune pensée pour un profil ou un contexte précis.

Six façons d'accéder à Claude

🌍

Claude.ai

Interface web et mobile. Le point d'entrée universel — conversation, projets, artefacts, connecteurs.

🖥️

Cowork

Application desktop. Accès aux fichiers locaux, mémoire persistante, tâches planifiées, plugins.

💻

Claude Code

Outil CLI pour développeurs. Claude lit, comprend et modifie la codebase directement depuis le terminal.

🎨

Claude Design

Canvas visuel sur claude.ai/design. Génère des interfaces, maquettes et prototypes sans Figma.

🌐

Claude in Chrome

Extension navigateur. Claude voit et agit sur les pages web en temps réel.

⚙️

API Anthropic

Accès programmatique direct. Pour intégrer Claude dans des applications et workflows custom.

🧠

02 · Modèles

Quatre modèles, quatre niveaux

Haiku, Sonnet, Opus et Fable 5 — de la vitesse à la puissance maximale, selon le besoin.

Claude Haiku

claude-haiku-4-5-20251001

Le plus rapide et économique. Idéal pour les tâches répétitives, les résumés rapides et les intégrations à volume élevé.

Rapide Économique

Claude Sonnet

claude-sonnet-4-6

Le meilleur équilibre performance/coût. Recommandé pour la majorité des usages agence — rédaction, analyse, code, design.

Équilibré Recommandé

Claude Opus

claude-opus-4-8

La puissance maximale. Pour les tâches complexes, le raisonnement approfondi, les projets stratégiques et créatifs exigeants.

Puissant Premium

Claude Fable 5

Nouveau · Juil. 2026

claude-fable-5

Le modèle de classe Mythos rendu accessible au grand public. Dépasse tous les modèles précédemment disponibles — performances exceptionnelles en ingénierie logicielle, recherche scientifique, vision et travail de connaissance complexe. Fenêtre de contexte 1M tokens.

Classe Mythos 1M contexte Enterprise

⚙️

02b · Configuration

Claude.ai — Setup & personnalisation

Paramétrer son compte, personnaliser les réponses et configurer les préférences — pour que Claude fonctionne exactement comme on le souhaite dès la première session.

Personnalisation — Settings → Profile

Champ unique — Personal preferences

Dire à Claude qui vous êtes et comment il doit vous parler

Ce champ est lu à chaque conversation. Il contextualise toutes les réponses sans avoir à se réintroduire, et calibre en même temps le ton, la langue et le format des réponses. C'est l'endroit le plus efficace pour gagner du temps sur toutes les sessions.

Je m'appelle Quentin, je dirige Ledupplex, une agence web à Clermont-Ferrand
Clients : PME de la région Auvergne — retail, immobilier, professions libérales
Outils principaux : WordPress, Divi, WooCommerce
Équipe de 3 personnes, objectif : automatiser les tâches récurrentes
Réponds toujours en français, même si je t'écris en anglais
Sois direct et concis — pas de résumé en fin de réponse
Pour les documents, utilise des titres clairs et une structure logique
Propose des alternatives quand la demande est trop vague

Plans disponibles

Fonctionnalité	Free	Pro	Team
Conversations Claude Sonnet	Limité	Étendu	Prioritaire
Accès à Claude Opus & Fable 5	—	✓	✓
Projets persistants	—	✓	✓
Cowork (app desktop)	—	✓	✓
Skills & connecteurs MCP	—	✓	✓
Artefacts persistants	—	✓	✓
Gestion d'équipe & admin	—	—	✓

Paramètres clés

🔀

Choisir le modèle

Un menu en haut de chaque conversation permet de passer entre Haiku, Sonnet, Opus et Fable 5 à tout moment — selon la complexité de la tâche.

🔌

Connecteurs (Integrations)

Settings → Integrations. Connecter Notion, Slack, GitHub, Jira, Drive… Claude peut lire et agir sur ces outils directement depuis le chat web.

🧠

Mémoire entre sessions

Settings → Privacy. Activer la mémoire pour que Claude retienne les faits importants d'une conversation à l'autre. Disponible sur Pro et Team.

🔒

Confidentialité des données

Settings → Privacy. Sur Pro et Team, les conversations ne servent pas à entraîner les modèles par défaut. Configurable par l'admin sur Team.

👥

Gestion d'équipe

Settings → Team. Inviter des membres, définir des rôles Admin / Member, gérer les accès aux connecteurs et skills partagés à l'échelle de l'organisation.

🌐

Langue

L'interface suit la langue du navigateur. Claude répond dans la langue de la conversation — ou dans celle précisée dans le champ "How you'd like Claude to respond".

💡

Conseil : Ce champ "Personal preferences" est la configuration la plus impactante — elle évite de tout réexpliquer à chaque session. Mettre le nom de l'agence, les outils principaux, les types de clients et le ton souhaité suffit pour que Claude soit immédiatement opérationnel dans le bon contexte.

🖥️

03 · Produit desktop

Cowork

Le mode desktop de Claude — accès aux fichiers locaux, mémoire persistante, tâches planifiées, plugins. Pour les profils non-techniques.

Ce que Cowork change

Claude intégré à l'environnement de travail

Contrairement à claude.ai dans un navigateur, Cowork peut lire et écrire des fichiers dans les dossiers locaux, mémoriser des informations d'une session à l'autre, planifier des tâches automatiques et installer des plugins qui connectent des outils externes.

Lecture et écriture dans les dossiers sélectionnés sur le PC
Mémoire persistante via CLAUDE.md et MEMORY.md
Tâches planifiées automatiques sans code
Marketplace de plugins avec MCPs et skills intégrés
Mode Dispatch pour orchestrer des tâches complexes

Capacité	Claude.ai	Cowork
Conversation IA	✓	✓
Fichiers locaux	—	✓
Mémoire persistante	—	✓
Tâches planifiées	—	✓
Plugins / MCPs	—	✓
Mode Dispatch	—	✓

⚡ Skills oui, agents non. Cowork sait utiliser les skills installés en local — les mêmes que Claude Code, ceux du dossier ~/.claude/skills/ — donc divi-builder, seo et les autres fonctionnent aussi dans Cowork. En revanche, il ne reconnaît pas les agents personnalisés du dossier ~/.claude/agents/ (directeur-projet, testeur-qa…) : l'équipe d'agents reste une exclusivité de Claude Code. Dans Cowork, pour déléguer et paralléliser des tâches, on passe par le mode Dispatch.

Computer Use — contrôle de l'écran

Quand il n'y a pas de connecteur dédié

Claude qui utilise l'ordinateur comme un humain

Quand aucun MCP ou connecteur n'existe pour un outil, Claude peut prendre le contrôle de l'écran — cliquer, taper, naviguer, ouvrir des applications. C'est la solution de dernier recours, mais elle fonctionne sur n'importe quel outil, même ceux qui n'ont pas d'API.

Ouvrir un navigateur et récupérer des informations publiques
Naviguer dans un outil client sans connecteur disponible
Lancer une commande locale ou ouvrir un fichier
Vérifier un rendu visuel ou faire une QA rapide
Manipuler des fichiers via l'interface graphique

⚠️

À utiliser avec supervision. Le computer use n'est pas un mode autonome sans contrôle. Ne pas lui laisser effectuer des actions sensibles — transactions, envoi d'emails, suppressions — sans validation manuelle à chaque étape critique.

Situation	Utiliser
Outil avec connecteur MCP	MCP en priorité
Site web	Claude in Chrome
App desktop sans API	Computer Use
Actions sensibles	Supervision requise

Le mode Dispatch

🎯

Orchestrateur central

Dispatch analyse la demande et la route vers des sessions de tâches dédiées. Chaque tâche tourne dans son propre contexte isolé.

⚡

Tâches en parallèle

Plusieurs tâches peuvent tourner simultanément. On continue à donner des instructions pendant qu'elles s'exécutent.

📱

Contrôle mobile

Dispatch est accessible depuis l'appli Claude mobile (onglet Dispatch). Déléguer une tâche longue et revenir voir le résultat.

Première session Cowork — pas à pas

1

Installer et se connecter

Télécharger l'application depuis claude.ai/download, l'installer sur le PC, puis se connecter avec son compte claude.ai (plan payant requis).

2

Attacher un dossier de travail

Choisir le dossier sur lequel Claude peut travailler (ex. Clients/). Point important : Claude ne voit que ce qu'on lui attache — le reste du PC lui est invisible.

3

Lancer une première tâche concrète

Avec un des deux prompts ci-dessous — une tâche réelle sur de vrais fichiers, c'est la meilleure façon de comprendre ce que Cowork change.

4

Vérifier le résultat

Ouvrir l'explorateur de fichiers : les fichiers créés ou déplacés sont directement sur le PC, dans le dossier attaché — pas dans un espace virtuel.

✓ Trier les fichiers d'un client

"Dans le dossier attaché, trie les fichiers du client [nom] : crée des sous-dossiers (brief, maquettes, contenus, factures), range chaque fichier au bon endroit et fais-moi un récap de ce que tu as déplacé avant de valider."

✓ Générer un compte-rendu dans le bon dossier

"Voici mes notes de la réunion de ce matin : [coller ou joindre le fichier]. Rédige le compte-rendu structuré (décisions, actions, échéances) et enregistre-le dans Clients/[nom]/comptes-rendus au format Word."

📱

03b · Produit mobile

Claude sur téléphone

L'appli iOS et Android — les mêmes conversations et projets que sur PC, avec trois usages que le téléphone rend uniques.

🎤

Dicter

Un brief vocal en voiture ou entre deux rendez-vous : Claude transcrit et remet au propre en notes structurées — prêtes à coller dans le Projet client en arrivant.

📸

Photographier

Un document papier, un tableau blanc de réunion, une carte de visite : Claude lit l'image et en extrait le contenu exploitable (texte, tâches, coordonnées).

🚀

Dispatch mobile

Lancer une tâche longue depuis le téléphone (onglet Dispatch) et récupérer le résultat plus tard — sans être devant le PC.

✓ Après une réunion — photo du tableau blanc

"Voici la photo du tableau blanc de notre réunion. Transcris tout, remets au propre les idées griffonnées, et organise le résultat en liste de tâches par personne, avec les échéances mentionnées."

🔄 Tout est synchronisé : une conversation commencée sur téléphone se poursuit sur PC (et inversement) — les Projets, les connecteurs et la mémoire sont les mêmes partout.

💻

04 · Outil CLI

Claude Code

L'outil en ligne de commande qui permet à un développeur de déléguer des tâches de code à Claude directement depuis le terminal.

Ce que c'est

Claude dans le vrai projet, pas dans un chat

Claude Code n'est pas Claude.ai dans un terminal. C'est un outil spécialisé qui donne à Claude la capacité de lire l'intégralité d'une codebase, de comprendre son architecture, de modifier des fichiers, d'exécuter des tests, de faire des commits Git — en autonomie et en boucle, jusqu'à ce que la tâche soit terminée.

Lecture complète de la codebase et de l'architecture
Modification de fichiers en autonomie
Exécution de tests et correction des erreurs
Commits Git intégrés
Support de skills et plugins via le terminal

Terminal — exemple de session

$ claude
Claude Code v1.x — Projet: ledupplex-site

> Ajoute un filtre par catégorie sur /blog.
  Les posts ont un champ "categorie" en base.
  Utilise le pattern existant des filtres.

📂 Lecture de la codebase...
🔍 Analyse: blog.php, filter.js, posts.php
⚙️  Modification: blog.php → filtre catégorie
⚙️  Modification: filter.js → composant FilterBar
⚙️  Modification: posts.php → param ?category=
✅ Tests: 4 existants passés
✅ Nouveau test: filtre vide = tous les posts
        

Ce que Claude Code peut faire

🔍

Analyser

Lire et comprendre n'importe quelle architecture de code.

✏️

Modifier

Éditer des fichiers directement dans le projet, multi-fichiers.

🧪

Tester

Lancer les tests, corriger les erreurs en boucle autonome.

🔧

Débugger

Identifier et corriger des bugs complexes avec contexte complet.

Le prompt de mission complète — l'exemple à imiter

🎯 Voilà à quoi ressemble un vrai prompt de mission dans Claude Code : on ne demande pas juste « fais-moi une landing page », on donne le contexte, on fait auditer l'existant d'abord, on enchaîne les agents et les skills dans le bon ordre, et on place des points de validation aux étapes clés. Un seul prompt peut piloter tout le pipeline de l'agence.

✓ Prompt complet à copier — refonte d'une landing page, de l'audit à la livraison

"Mission : créer la nouvelle landing page du client Garage Martin (mécanique auto à Clermont-Ferrand). Son site actuel est dans le dossier site-actuel/ — il est vieillissant et convertit mal. Cible : particuliers 30-60 ans du coin, objectif : les faire appeler ou demander un devis. Étape 1 — Audit de l'existant. Demande au testeur-qa de tester le site actuel (responsive, liens, formulaires, vitesse) et au seo-specialist d'en faire l'audit SEO avec le skill seo. Compile tout dans un rapport : ce qui est cassé, ce qui est daté, ce qui fait fuir les visiteurs. Montre-le-moi avant de continuer — chaque erreur de ce rapport devra être corrigée dans la nouvelle page. Étape 2 — Cadrage. Demande au directeur-projet de définir la structure de la nouvelle landing (sections, messages, parcours vers le devis) en s'appuyant sur le rapport d'audit. Attends ma validation sur ce plan. Étape 3 — Design. Le directeur-artistique définit la direction visuelle (sérieuse, rassurante, locale — pas de bleu générique de garage), puis le web-designer construit la maquette HTML/CSS avec le skill ui-ux-design-pro, le developpeur-front ajoute les interactions, et le motion-designer des animations au scroll sobres avec motion-patterns. Montre-moi la maquette dans le navigateur avant la suite. Étape 4 — Intégration Divi. Convertis la maquette validée en JSON importable avec le skill divi-builder, et demande à l'integrateur-cms de me donner la procédure d'import dans WordPress (y compris où placer le CSS pour éviter le flash au chargement). Étape 5 — Boucle qualité. Fais tourner testeur-qa puis correcteur-bugs en boucle jusqu'à zéro problème, puis termine par le relecteur-seo-accessibilite avec le skill accessibility pour la checklist finale. Contraintes : tout en français, une validation de ma part aux étapes 1, 2 et 3 avant de continuer, et à la fin fais-moi le tableau comparatif « erreur de l'ancien site → comment la nouvelle page la corrige »."

🧩 L'anatomie de ce prompt — les 5 ingrédients à réutiliser partout : ① le contexte (qui est le client, où est le site, quel objectif) · ② l'audit d'abord, pour construire sur des faits plutôt que des suppositions · ③ les agents et skills nommés à chaque étape, dans l'ordre du pipeline · ④ des points de validation ("montre-moi avant de continuer") aux moments où un mauvais choix coûterait cher · ⑤ une preuve finale exigée (le tableau erreurs → corrections) pour vérifier que la demande de départ a vraiment été respectée.

Installer Claude Code sur Windows — pas-à-pas

💡 Claude Code fonctionne nativement sur Windows 10 et 11 — pas besoin de WSL ni de Linux. Toute l'installation se fait dans PowerShell, le terminal intégré à Windows (touche Windows → taper "PowerShell" → Entrée).

1

Ouvrir PowerShell

Touche Windows → taper "PowerShell" → Entrée. Pas besoin de le lancer en administrateur, l'installation se fait dans le dossier utilisateur.

2

Lancer l'installateur officiel

Une seule commande à copier-coller dans PowerShell — elle télécharge et installe la dernière version, et gère les mises à jour automatiques ensuite.

irm https://claude.ai/install.ps1 | iex   # installe Claude Code (méthode recommandée)

3

Installer Node.js

Node.js n'est pas obligatoire pour Claude Code lui-même, mais il est nécessaire pour beaucoup de serveurs MCP (connecteurs), certains skills, et la méthode d'installation alternative via npm. Autant l'installer tout de suite — prendre la version LTS (la version stable recommandée) :

winget install OpenJS.NodeJS.LTS   # installe Node.js LTS (+ npm inclus)
node --version                      # après avoir rouvert PowerShell : vérifie l'installation

4

Installer Git pour Windows (recommandé)

Claude Code s'appuie sur Git pour les commandes de versionning. S'il n'est pas déjà installé (voir la section GitHub ci-dessous) :

winget install Git.Git # installe Git pour Windows

5

Se connecter à son compte

Fermer puis rouvrir PowerShell (pour que la commande soit reconnue), aller dans son dossier de projet, puis lancer Claude Code. Au premier lancement, il ouvre le navigateur pour se connecter au compte Claude (abonnement Pro/Max ou compte Console).

cd C:\Users\moi\Sites\mon-projet   # se placer dans le projet
claude                              # lance Claude Code + connexion au 1er démarrage

6

Vérifier que tout fonctionne

Dans la session Claude Code, taper /doctor : la commande vérifie l'installation et signale ce qui manque. Si tout est vert, c'est terminé — pour toujours.

⚠️ Dépannage : si PowerShell répond "claude n'est pas reconnu", fermer et rouvrir le terminal (le chemin d'installation n'est pris en compte qu'au démarrage) · si un antivirus bloque le script, autoriser claude.ai le temps de l'installation · alternative si l'installateur officiel échoue : comme Node.js est déjà installé (étape 3), lancer npm install -g @anthropic-ai/claude-code.

🐙

04c · Pas-à-pas

GitHub pour l'équipe

Versionner les projets, travailler à plusieurs sans s'écraser, garder l'historique complet — et laisser Claude Code taper les commandes Git à notre place, en langage naturel.

💡 Git = l'historique des versions d'un projet, sur l'ordinateur. GitHub = la copie partagée en ligne, accessible à toute l'équipe. La bonne nouvelle : avec Claude Code, il n'y a aucune commande à retenir — on décrit ce qu'on veut en français, il exécute les bonnes commandes Git pour nous.

Setup — à faire une seule fois

1

Créer un compte GitHub

Sur github.com → "Sign up", avec l'email agence. L'admin (Quentin) crée l'organisation Ledupplex et invite chaque membre — les projets clients vivent dans cette organisation, pas sur les comptes perso.

2

Installer les outils

Il faut Git et gh (l'outil GitHub en ligne de commande) sur le PC — le plus simple est de demander à Claude Code de s'en occuper : "Installe Git et l'outil gh de GitHub sur mon PC et vérifie que ça marche."

winget install Git.Git GitHub.cli   # installe Git + l'outil GitHub
gh auth login     # connecte le compte (choisir GitHub.com → HTTPS → navigateur)

3

Vérifier que tout est branché

Dans Claude Code, demander : "Vérifie que je suis bien connecté à GitHub et dis-moi sous quel compte." Si la réponse affiche le bon compte, le setup est terminé — pour toujours.

Au quotidien — tout en langage naturel dans Claude Code

1

Récupérer un projet (clone)

Une seule fois par projet — la copie locale reste ensuite sur le PC.

✓ Prompt à copier

"Clone le repo github.com/ledupplex/site-proimmo dans mon dossier Sites et ouvre-le."

2

Créer une branche avant de travailler

Une branche = un espace de travail isolé. On ne travaille jamais directement sur main — la branche protège le site des modifications non validées.

✓ Prompt à copier

"Crée une branche feature/hero-animation à partir de main et bascule dessus."

3

Enregistrer son travail (commit)

À faire souvent — chaque commit est un point de sauvegarde vers lequel on peut revenir. Avant de commiter, demander "montre-moi ce qui a changé" pour vérifier.

✓ Prompt à copier

"Fais un commit de mes modifications avec un message clair qui décrit ce qui a changé."

4

Envoyer sur GitHub (push)

Le commit reste local tant qu'on n'a pas poussé. Le push rend le travail visible et sauvegardé en ligne.

✓ Prompt à copier

"Pousse ma branche sur GitHub."

5

Proposer les changements (Pull Request)

La PR est la demande de relecture : "voilà ce que j'ai fait, quelqu'un valide avant que ça parte dans main". C'est là que l'équipe relit et commente.

✓ Prompt à copier

"Ouvre une pull request de ma branche vers main, avec un résumé clair des changements pour que Quentin puisse relire."

6

Récupérer le travail des autres

À faire en début de session pour repartir de la dernière version validée.

✓ Prompt à copier

"Récupère les dernières modifications de main et mets ma branche à jour."

⚠️ Règles d'équipe : jamais de modification directe sur main (toujours une branche + une PR) · une branche = une fonctionnalité · des petits commits fréquents plutôt qu'un gros en fin de journée · avant de commiter, toujours demander à Claude "montre-moi ce qui a changé".

Pour référence — les commandes que Claude exécute derrière

git clone <url-du-repo>                    # récupérer le projet
git checkout -b feature/ma-branche         # créer une branche
git add . && git commit -m "message"      # enregistrer
git push -u origin feature/ma-branche       # envoyer sur GitHub
gh pr create --fill                          # ouvrir la pull request
git pull origin main                          # récupérer le travail des autres

⌨️

04d · Cheat sheet

Claude Code — commandes & réflexes

Les quelques commandes et raccourcis qui changent le quotidien dans le terminal — à garder sous la main les premières semaines.

Commande	Ce que ça fait	Quand l'utiliser
`/init`	Analyse le projet et crée le CLAUDE.md	Au premier lancement dans un dossier
`/agents`	Voir, créer et modifier les sous-agents	Pour construire son équipe d'agents
`/clear`	Vide la conversation, repart de zéro	À chaque nouvelle tâche sans rapport avec la précédente
`/compact`	Condense l'historique en résumé	Quand la session devient longue et que les réponses ralentissent
`/resume`	Reprend une session précédente	Pour retrouver le contexte d'hier
`@fichier`	Pointe un fichier précis dans le prompt	"Corrige le bug dans @js/slider.js"
`! commande`	Exécute une commande shell directement	"! git status" pour vérifier soi-même
`Échap`	Interrompt Claude en cours d'action	Dès qu'il part dans la mauvaise direction — ne pas le laisser finir
`Shift+Tab`	Change de mode, dont le mode plan	Pour les tâches importantes : il propose un plan avant de toucher au code

🗺️ Le réflexe le plus rentable : pour toute tâche non triviale, passer en mode plan (Shift+Tab). Claude présente son plan, on le valide ou on le corrige, puis il exécute — ça évite 90 % des "ce n'est pas ce que je voulais".

🔍

Petites étapes

Demander une modification à la fois et vérifier le rendu avant de passer à la suivante — plus fiable que "refais tout le site".

👀

"Montre-moi ce qui a changé"

Avant chaque commit, faire lister les modifications — on garde le contrôle sur ce qui entre dans le projet.

💾

Commit souvent

Chaque étape validée = un commit. On peut toujours revenir en arrière, rien n'est jamais perdu.

🌐

04b · Extension navigateur

Claude in Chrome

Un agent de navigation web. Claude voit ce que tu vois dans Chrome, lit les pages, clique, remplit des formulaires et navigue de façon autonome — sans copier-coller, sans quitter le navigateur.

✅

Disponible en bêta sur tous les plans payants (Pro, Max, Team, Enterprise). À installer depuis le Chrome Web Store en cherchant "Claude for Chrome" puis à connecter à son compte claude.ai.

Ce que ça change pour l'agence

Comment ça fonctionne

Claude voit la page, agit sur la page

Claude in Chrome lit le DOM de la page active — pas une capture d'écran, les vraies données structurées. Il peut extraire des informations précises, interagir avec les éléments, naviguer entre les onglets et enchaîner plusieurs actions sur des sites différents sans que tu aies à copier-coller quoi que ce soit.

Lecture du contenu réel de la page (texte, liens, formulaires, tableaux)
Clics, saisie de texte, navigation autonome
Enchaînement de plusieurs onglets et étapes
Extraction de données structurées depuis n'importe quel site

Capacité	Chat web	Claude in Chrome
Voir le contenu d'une page	—	✓
Cliquer et naviguer	—	✓
Remplir des formulaires	—	✓
Extraire des données	—	✓
Enchaîner plusieurs sites	—	✓
Travail hors navigateur	✓	—

Cas d'usage agence

🔍

Analyse concurrentielle

Parcourir les sites concurrents, extraire les offres, les prix, les argumentaires. Claude structure tout en tableau pendant la navigation — sans copier-coller manuel.

🖥️

Back-office client

Naviguer dans un CRM, un outil de facturation ou un back-office WordPress avec Claude. Il voit les données, suggère des actions et peut remplir des champs directement.

✅

QA visuelle de pages

Parcourir un site livré, vérifier les textes, les liens cassés, les erreurs d'affichage. Claude fait la liste des problèmes trouvés page par page sans intervention manuelle.

📋

Formulaires & vérifications

Remplir des formulaires répétitifs, vérifier des données dans des interfaces web, valider des soumissions. Utile pour les tests ou les audits de process client.

💰

Comparaison de pricing

Ouvrir plusieurs pages de pricing concurrentes, extraire les tarifs, les fonctionnalités incluses et générer un tableau comparatif structuré en quelques minutes.

🛠️

WordPress, Shopify, Wix, no-code

Naviguer dans n'importe quel CMS ou outil no-code avec Claude. Il voit les menus, les paramètres, les contenus — et peut guider ou agir directement dans l'interface.

💡

Pourquoi c'est important pour l'équipe : Claude in Chrome est le cas d'usage le plus immédiatement compréhensible. Pas besoin d'expliquer les APIs ou les MCPs — tout le monde comprend "Claude voit ce que tu vois et peut agir à ta place". C'est le point d'entrée idéal pour introduire l'IA agentique à une équipe non-technique.

Installation — 3 minutes, une seule fois

1

Installer l'extension

Ouvrir le Chrome Web Store → chercher "Claude for Chrome" → "Ajouter à Chrome". L'icône Claude apparaît dans la barre d'outils du navigateur.

2

Se connecter au compte

Cliquer sur l'icône Claude → se connecter avec son compte claude.ai (plan payant requis). Le panneau Claude s'ouvre sur le côté du navigateur.

3

Autoriser les sites, un par un

À la première utilisation sur un site, Claude demande la permission — on choisit site par site ce qu'il a le droit de voir et de faire. Un site jamais autorisé reste invisible pour lui.

Première session guidée — 10 minutes

1

Ouvrir un site et le panneau Claude

Par exemple le site d'un concurrent — puis cliquer l'icône Claude pour ouvrir le panneau à côté de la page.

2

Première demande — lecture de page

✓ Prompt à copier

"Analyse cette page : que vend cette entreprise, à qui, avec quels arguments ? Ressors les 3 points forts et les 3 points faibles de la page."

3

Deuxième demande — navigation autonome

✓ Prompt à copier

"Ouvre leur page tarifs et compare avec nos offres : [coller nos offres]. Fais-moi un tableau comparatif avec ce qu'on a en plus et en moins."

4

La règle d'or

Pour toute action qui envoie quelque chose (formulaire, email, commande) : Claude propose, l'humain relit et valide. La lecture et l'extraction peuvent être autonomes, l'envoi jamais.

🎨

05 · Canvas visuel

Claude Design

Canvas visuel interactif sur claude.ai/design — transforme un prompt en prototype ou maquette directement dans le navigateur, sans Figma.

⚡ Les outputs ne sont pas des images statiques — c'est du code rendu en live sur un canvas interactif. On décrit ce qu'on veut, Claude génère, et on affine en conversation ou directement sur le canvas.

Ce qu'il peut produire

🖥️

Interfaces

Maquettes desktop et mobile, wireframes, design system complet.

⚡

Prototypes

Cliquables, avec navigation, transitions, mode sombre, responsive, 3D.

🌐

Pages web

Landing pages, pages pricing, one-pagers, pages de contenu complètes.

📊

Présentations

Pitch decks, slides, rapports visuels structurés.

📄

Documents

One-pagers, case studies, fiches produit, propositions commerciales, factures, devis, contrats.

✉️

Emails

Templates email responsives, newsletters, séquences d'onboarding.

Pour aller plus loin

📐

design.md

Un fichier de direction artistique qu'on donne à Claude en amont — couleurs, typographies, ton, références visuelles. Utile pour garder une cohérence de style sur tous les rendus d'un même projet, sans devoir la répéter à chaque prompt.

📤

Exports possibles

Depuis le bouton "Export" : téléchargement en .zip, PDF, PPTX ou HTML autonome. Envoi direct vers d'autres outils (Adobe, Canva, Gamma, Miro, Vercel, Wix…), vers Claude Code pour passer en développement, ou partage via un lien interne (lecture, commentaire ou édition).

Première maquette — pas à pas

1

Ouvrir le canvas

Aller sur claude.ai/design — un nouveau canvas vide s'ouvre, prêt à recevoir la description.

2

Décrire la page

Avec le prompt ci-dessous comme base : être précis sur le client, la cible, l'ambiance et les sections attendues — c'est ce qui fait la différence entre une maquette générique et une v0 exploitable.

3

Itérer

En conversation ("agrandis le héro", "teste une version sombre", "remplace la section équipe par des avis clients") ou en cliquant directement sur les éléments du canvas pour les modifier.

4

Exporter

Bouton Export : PDF ou PPTX pour présenter au client, HTML pour continuer dans Claude Code, ou envoi vers Figma pour que Julie retravaille dessus.

✓ Prompt de départ à copier

"Crée la maquette desktop d'une page d'accueil pour [client], [activité] à [ville]. Cible : [cible]. Ambiance : [ex. moderne et rassurant], couleurs [#hex et #hex], typo [nom ou style]. Sections : héro avec accroche forte, 3 services, preuve sociale (avis clients), présentation de l'équipe, CTA contact. Textes réalistes adaptés au client — pas de lorem ipsum."

📁

06 · Espaces de travail

Les Projets Claude

Un espace structuré avec instructions permanentes, base de connaissances et historique partagé. Le point de départ pour une utilisation professionnelle sérieuse.

Sans Projet

Conversation standard

Claude ne sait pas pour qui tu travailles
Contexte à re-donner à chaque session
Pas de mémoire entre les conversations
Résultats inconsistants selon le prompt
Impossible de partager avec l'équipe

Avec Projet

Espace structuré

Claude connaît l'agence et le client dès le départ
Instructions permanentes chargées automatiquement
Base de connaissances accessible à tout moment
Format de sortie toujours cohérent
Partageable avec toute l'équipe (plan Team)

Anatomie d'un projet

📋

Instructions du projet

Le prompt système permanent — définit le comportement de Claude pour tous les collaborateurs du projet.

📚

Base de connaissances

Fichiers uploadés — brief client, guidelines, historique, exemples de livrables. Claude les consulte à chaque session.

💬

Conversations

Toutes les sessions du projet, accessibles à l'équipe. Historique des décisions et livrables produits.

🧠 Chaque projet a en plus sa propre mémoire, isolée des autres projets — un résumé que Claude génère automatiquement à partir des conversations (mis à jour environ toutes les 24h), pour garder le contexte sans avoir à tout redire à chaque session. Elle reste consultable et modifiable : Settings → Capabilities → "View and edit memory". On peut corriger un résumé ou dire directement à Claude en conversation ce qu'il doit retenir.

🚀

06b · Pas-à-pas

Bien démarrer un projet

Deux setups selon le profil : un Projet sur Claude.ai pour tout ce qui est stratégie, contenu et suivi client — un projet Claude Code pour tout ce qui touche au code et à l'intégration.

A — Créer un Projet sur Claude.ai (Quentin, Julie, Thibaud)

1

Créer le projet

Sur claude.ai → sidebar "Projects" → "New project". Nom clair et systématique, ex. "Client — Pro Immo". Un projet par client (ou par gros chantier interne).

2

Écrire les instructions permanentes

Bouton "Set project instructions" — c'est le comportement de Claude pour toutes les conversations du projet, pour tout le monde. Exemple copiable ci-dessous, à adapter.

3

Ajouter la base de connaissances

Bouton "Add content" → uploader le brief client (PDF), la charte graphique, l'arborescence, un ou deux exemples de livrables déjà validés. Claude les consulte à chaque session — plus rien à réexpliquer.

4

Tester avec une vraie demande

Première conversation : une tâche réelle (ex. "rédige la page À propos"). Si le ton ou le format ne convient pas, corriger les instructions du projet — pas le prompt — pour que ce soit réglé une fois pour toutes.

5

Partager à l'équipe (plan Team)

Rendre le projet partagé : il devient l'espace commun du client — même contexte, mêmes règles, historique visible par tous.

✓ Exemple d'instructions de projet — à copier et adapter

"Tu travailles pour Ledupplex, agence web à Clermont-Ferrand, sur le client Pro Immo (agence immobilière, cible : primo-accédants 30-40 ans). Réponds toujours en français. Ton : professionnel, rassurant, sans jargon ni superlatifs. Format des livrables : titres clairs + listes courtes, prêt à copier. Avant de produire un livrable, pose les questions manquantes (3 max). Ne jamais inventer de chiffres ou de faits sur le client — demander."

B — Créer un projet Claude Code (Maxence, Thibaud pour le dev)

1

Créer le dossier du projet — dans un dossier principal

D'abord, créer une fois pour toutes un dossier principal (ex. Sites/) avec son propre CLAUDE.md contenant les règles générales de l'agence. Ensuite, chaque projet client est un sous-dossier dedans, avec son propre CLAUDE.md. Claude Code additionne automatiquement les deux — les règles générales + celles du projet, rien à recopier.

Sites/
├── CLAUDE.md            # règles générales de l'agence (écrit une fois)
├── proimmo/CLAUDE.md    # règles propres au projet Pro Immo
└── autre-client/CLAUDE.md

2

Lancer Claude Code dedans

Dans le terminal : cd Sites/proimmo puis claude. Claude Code travaille toujours dans le dossier où il est lancé.

3

Générer le CLAUDE.md

Taper /init : Claude analyse le dossier et crée le fichier tout seul. Sur un dossier vide, l'écrire soi-même à partir de l'exemple ci-dessous — c'est la mémoire du projet, lue automatiquement à chaque session.

4

Compléter le CLAUDE.md au fil du projet

Contexte client, stack, règles de code, décisions prises, choses à ne pas toucher. En fin de session, demander : "Mets à jour le CLAUDE.md avec les décisions importantes d'aujourd'hui."

5

Versionner avec GitHub

Voir la section GitHub pour l'équipe : le CLAUDE.md se commit avec le projet — toute l'équipe hérite du même contexte en clonant le repo.

Exemple de CLAUDE.md de départ — à copier et adapter

# Projet Pro Immo — site vitrine

## Contexte
- Client : agence immobilière, Clermont-Ferrand
- Cible : primo-accédants 30-40 ans
- Stack : WordPress + Divi, thème enfant

## Règles
- Commentaires de code en français
- Indentation : 2 espaces
- Préfixes de classes uniques (pim-) pour éviter les conflits Divi
- Toujours me demander avant de modifier plusieurs fichiers

## À ne pas toucher
- Le dossier /exports-divi (JSON validés client)

🎨 Bonus : ajouter un design.md à côté du CLAUDE.md (couleurs hex, typos, ton visuel, références) — chaque génération de page respectera la direction artistique sans qu'on ait à la répéter dans les prompts.

🔌

07 · MCPs & Connecteurs

Les Connecteurs

La couche qui branche Claude sur les outils réels de l'agence — Notion, Slack, Figma, Shopify, GitHub, Gmail et bien d'autres.

🔗 Un connecteur est un pont entre Claude et un outil externe. Techniquement c'est un serveur MCP (Model Context Protocol) — le standard ouvert d'Anthropic. Claude ne se contente plus de parler de tes outils — il agit directement dedans.

⚡ Sans connecteur

Claude répond à partir de ce que tu lui décris. Il ne voit pas tes vraies données, ne peut pas créer une tâche dans Asana, ne sait pas ce qui est dans ta Notion — il devine et génère.

🔗 Avec connecteur

Claude accède à tes données réelles. Il lit les tâches en retard dans Asana, crée une page dans Notion, poste dans Slack, enrichit un contact dans Lusha — en direct, sans copier-coller.

Connecteurs disponibles

Slack

Notion

Figma

GitHub

Gmail

Google Drive

Asana

Linear

Shopify

Wix

Lusha

Canva

Jira

Intercom

Datadog

PagerDuty

Brancher un connecteur — pas à pas

1

Ouvrir les paramètres

Sur claude.ai (ou Cowork) : Settings → Connectors → "Browse connectors" → choisir l'outil (Notion, Gmail, Drive…).

2

Autoriser l'accès

Une fenêtre de connexion de l'outil s'ouvre (compte Notion, compte Google…) : on se connecte et on choisit ce que Claude a le droit de voir et de faire. À faire une seule fois par outil.

3

Utiliser en langage naturel

Rien à activer ensuite : dans n'importe quelle conversation, Claude voit le connecteur et l'utilise dès que la demande le concerne.

Exemples d'utilisation

✓ Avec Notion

"Cherche dans notre Notion la page du client [nom] et fais-moi un résumé de où en est le projet, avec la liste des tâches encore ouvertes."

✓ Avec Gmail

"Retrouve les 3 derniers échanges avec [client] dans Gmail et prépare une réponse à son dernier message, en tenant compte de ce qu'on lui a déjà promis."

✓ Avec Google Drive

"Récupère le brief [nom de fichier] dans le Drive, extrais les demandes concrètes du client et transforme-les en liste de tâches réparties par personne de l'équipe."

🎨

07b · Connecteur officiel

Figma MCP

Le connecteur officiel Figma permet à Claude de lire, créer et modifier des designs directement dans Figma — dans les deux sens, du code vers le design et du design vers le code.

Ce que ça permet, en deux mots

➡️

Design → Code

On donne une URL Figma à Claude, il lit la maquette (layout, couleurs, composants) et génère le code correspondant — HTML/CSS, React…

⬅️

Code → Design

À l'inverse, Claude peut créer des frames et des écrans directement dans un fichier Figma à partir du code existant ou d'une simple description.

Concrètement, il peut…

Créer des wireframes ou des maquettes de pages directement dans Figma
Générer un design system complet (couleurs, typographies, composants) depuis zéro ou depuis une codebase existante
Transformer une maquette Figma en code prêt à intégrer (HTML/CSS, React…)
Dupliquer et adapter des composants existants de la librairie du fichier
Faire le lien entre les composants Figma et leurs équivalents dans le code (Code Connect)

💡

Pour l'agence : ça élimine l'aller-retour manuel entre le design et le développement — plus besoin de recopier les couleurs, espacements ou composants à la main. Pour l'utiliser : connecter son compte Figma une fois dans Settings → Capabilities, puis coller l'URL du fichier dans la conversation.

Mise en route et premiers prompts

1

Connecter le compte Figma — une seule fois

Settings → Capabilities (ou Connectors) → Figma → autoriser l'accès avec son compte Figma.

2

Coller l'URL du fichier dans la conversation

Astuce : dans Figma, clic droit sur un écran précis → "Copy link to selection" — Claude vise exactement cette frame au lieu de tout le fichier.

3

Demander l'action

Design vers code, code vers design, création de composants — en langage naturel, avec les prompts ci-dessous comme point de départ.

✓ Design → Code

"Voici la maquette Figma de la page d'accueil : [URL]. Génère le HTML/CSS correspondant, fidèle à la maquette : couleurs, typos et espacements repris du fichier, responsive mobile/desktop, classes préfixées [prefixe]-."

✓ Code → Design

"Voici la page HTML de notre v0 : [fichier ou URL]. Recrée-la dans mon fichier Figma [URL] en frames propres (une frame desktop, une frame mobile), avec les textes réels — pour que Julie puisse retravailler directement dessus."

⚡

08 · Fonctionnalité clé

Les Skills

Un fichier SKILL.md contenant un prompt système étendu, des instructions de format, des règles métier et des étapes d'exécution. Quand Claude charge un skill, il adopte un comportement précis et spécialisé.

Pour bien démarrer — c'est quoi, concrètement ?

🍳

L'image la plus simple : Claude est un stagiaire ultra-doué mais qui débarque — il sait tout faire "en général", mais il ne connaît ni nos méthodes, ni nos formats, ni nos exigences. Un skill, c'est la fiche recette qu'on lui tend : "quand tu fais ce type de tâche, voilà exactement comment on la fait chez nous, étape par étape, avec ce format de rendu". Ce n'est pas un logiciel à installer — c'est juste un fichier texte de consignes, qu'on peut ouvrir et lire comme un document Word.

🎯

Pourquoi les utiliser

Sans skill, il faut réexpliquer nos exigences dans chaque conversation — et le résultat varie à chaque fois. Avec un skill, les consignes sont écrites une fois pour toutes : même qualité, même format, à chaque utilisation, quel que soit le membre de l'équipe qui demande.

⏰

Quand les utiliser

Dès qu'une tâche est répétitive (brief client, page Divi, audit SEO…) ou demande une vraie expertise (design premium, accessibilité). Règle simple : si on se surprend à copier-coller les mêmes instructions une 3^e fois, c'est qu'il faut un skill.

🗣️

Comment les utiliser

Rien à apprendre : on tape /nom-du-skill dans la conversation, ou on décrit simplement son besoin en français — Claude reconnaît tout seul que la demande correspond à un skill installé et le charge automatiquement.

🧭

Skill, agent, ou simple prompt ? Le repère en une phrase. Une demande ponctuelle et simple ("corrige cette faute") → un simple prompt suffit. Une tâche récurrente qui doit toujours être faite de la même façon → un skill (la méthode). Une mission entière à déléguer qui tourne toute seule du début à la fin ("audite ces 5 sites") → un agent (le spécialiste — voir la section Agents). Et les deux se combinent : un agent utilise des skills pendant sa mission, comme un employé suit les fiches méthode de l'agence.

🧠

Ce que ça change

Sans skill, Claude répond de manière généraliste. Avec un skill, il adopte un rôle précis, respecte un format imposé, suit des étapes définies et produit des livrables cohérents — systématiquement.

🔁

Rechargement auto

Le SKILL.md est relu à chaque déclenchement. Pas besoin de reconfigurer — le skill est toujours à jour avec sa dernière version.

🏗️

Composables

Les skills peuvent s'enchaîner et se composer. Un skill peut en appeler un autre — créant des pipelines de traitement sophistiqués.

🗣️

Comment les appeler : deux façons. Soit on le déclenche explicitement avec la commande /nom-du-skill (ex. /ui-ux-design-pro) — on garde la main sur le moment exact où il s'active. Soit on décrit juste le besoin en langage naturel ("fais-moi un design premium pour ce dashboard") et Claude repère tout seul, dans la description du skill, qu'il correspond à la demande, et le charge automatiquement — sans avoir à connaître son nom.

Sources d'installation

Natifs Anthropic

Skills inclus par défaut

Inclus selon le plan. Disponibles immédiatement, optimisés par Anthropic.

📄 docx 📊 pptx 📋 pdf 📈 xlsx ⏰ schedule

Marketplace

Skills communautaires

Publiés par la communauté, vérifiés, maintenus sur GitHub. Installables en deux commandes.

🎨 ui-ux-design-pro ✦ gpt-taste 🎯 minimalist-ui 🎨 color-expert

Custom

Skills maison

Créés pour l'agence. Un fichier SKILL.md placé dans le bon dossier — immédiatement disponible.

🏢 brief-ledupplex ✍️ tone-agence 📦 livrable-wp

Skills Design pour Claude Code — UI UX Pro Max

★ Skill design le plus utilisé pour Claude Code

UI UX Pro Max

Au lieu de générer des interfaces génériques, ce skill analyse le contexte du projet et produit automatiquement un système de design complet — palette, typographie, composants, guidelines UX — adapté à la cible.

Design system auto-généré à partir du contexte projet
16 stacks supportés (React, Next.js, Vue, Svelte, SwiftUI…)
161 palettes de couleurs, 57 combos typographiques
67 styles UI, 99 guidelines UX

Top skills design — les plus connus

frontend-design

Anthropic

Skill design officiel Anthropic — design tokens, screenshots, raisonnement de layout.

ui-ux-pro-max

Communauté

Design system auto-généré — 161 palettes, 57 combos typo, 67 styles UI, 99 guidelines UX.

ui-ux-design-pro

Communauté

Expert design senior pour interfaces data-driven — dashboards, SaaS, audit de qualité UI, recherche de patterns réels.

web-design-guidelines

Vercel

Standards de design web de l'équipe Vercel — layout, typo, couleur, motion, accessibilité.

taste-skill

Communauté

Donne du "goût" à Claude — anti-slop, direction créative, cohérence visuelle intentionnelle.

impeccable-design-polish

Communauté

Passe de "fonctionnel" à "premium" — audit, critique, polish sur un artefact existant.

design-review

Communauté

Audite un design existant ou une PR qui touche au style — cohérence visuelle et qualité.

shadcn-ui

Communauté

Bibliothèque de composants prête à l'emploi pour React/Tailwind — base solide et accessible.

La bibliothèque de l'agence — skills & agents sur GitHub

📚 Tous les skills et agents de l'agence sont rangés dans le repo GitHub LeDupplex/claude_code — c'est la source de référence commune : tout le monde pioche dedans, et quand un skill est amélioré, toute l'équipe en profite. Chaque dossier contient un fichier texte lisible (SKILL.md pour un skill, un .md par agent) : on peut les ouvrir sur GitHub pour voir exactement ce qu'ils font avant de les installer.

⚡

Liste des skills de l'agence

Les fiches méthode : brief, Divi, design, SEO… Un dossier = un skill.

🔗 github.com/LeDupplex/claude_code → .claude/skills

🤖

Liste des agents de l'agence

Les spécialistes : planificateur, web-designer, testeur-qa… Un fichier .md = un agent.

🔗 github.com/LeDupplex/claude_code → .claude/agents

Comment utiliser ces skills — en 4 étapes

1

Choisir son skill sur GitHub

Ouvrir le lien ci-dessus, parcourir les dossiers, et cliquer sur le SKILL.md du skill qui intéresse pour lire ce qu'il fait. Le champ description en haut du fichier résume son rôle et quand il se déclenche.

2

Demander à Claude Code de l'installer

Pas besoin de télécharger quoi que ce soit à la main — on donne l'URL et Claude s'occupe de tout.

✓ Prompt à copier

"Installe le skill divi-builder depuis le repo github.com/LeDupplex/claude_code (dossier .claude/skills) dans mes skills globaux ~/.claude/skills/."

3

Redémarrer Claude Code

Fermer la session et relancer claude — la liste des skills et des agents n'est chargée qu'au démarrage. Pour vérifier : taper /, le skill doit apparaître dans la liste.

4

L'utiliser — au choix

Explicitement : taper /divi-builder puis décrire la demande. Ou naturellement : décrire simplement le besoin ("convertis cette maquette HTML en layout Divi") — Claude reconnaît que la demande correspond au skill et le charge tout seul.

💡 Même logique pour les agents : demander à Claude d'installer le fichier de l'agent dans ~/.claude/agents/, redémarrer, puis l'appeler en le nommant ("demande au testeur-qa de vérifier cette page") — ou laisser Claude choisir tout seul le bon spécialiste. Le pas-à-pas complet est dans la section Sous-agents custom.

Cas concrets — quels skills, quels agents, quel prompt

🎬 Trois situations types de l'agence, pour voir comment tout s'assemble en vrai. À retenir : on n'est pas obligé de nommer les skills et les agents dans le prompt — décrire le besoin suffit, Claude choisit tout seul. Mais les nommer garantit qu'ils sont bien utilisés, donc les exemples ci-dessous le font.

🎨

Cas 1 — "Je débute et je veux une belle page pour un client"

On a un brief (coiffeur, resto, artisan…) et on veut une page d'accueil au design premium, pas un rendu générique. Le skill apporte l'expertise design, les agents se répartissent le travail.

⚡ Skill : ui-ux-pro-max ⚡ Skill : frontend-design 🤖 Agent : directeur-artistique 🤖 Agent : web-designer

✓ Prompt à copier

"Je veux créer la page d'accueil d'un salon de coiffure haut de gamme à Clermont-Ferrand. Demande d'abord au directeur-artistique de définir la direction visuelle (couleurs, typos, ambiance), puis au web-designer de construire la page en HTML/CSS en utilisant le skill ui-ux-pro-max. Cible : femmes 25-45 ans, positionnement premium. Montre-moi la direction artistique avant de coder la page."

🧱

Cas 2 — "J'ai une maquette HTML, je veux la mettre dans Divi"

La page est validée en HTML/CSS, il faut maintenant la transformer en layout importable dans le Divi Builder de WordPress. C'est exactement le rôle du skill maison divi-builder, et l'agent integrateur-cms sait où mettre chaque morceau.

⚡ Skill : divi-builder 🤖 Agent : integrateur-cms

✓ Prompt à copier

"Voilà ma maquette validée : accueil-salon.html. Utilise le skill divi-builder pour la convertir en JSON importable dans Divi Builder, puis demande à l'integrateur-cms de m'expliquer pas à pas où l'importer dans WordPress et où placer le CSS custom pour éviter le flash de contenu non stylé."

✅

Cas 3 — "Le site est prêt, je veux vérifier avant la mise en ligne"

Dernière ligne droite : on enchaîne les agents de contrôle — le testeur trouve les problèmes, le correcteur répare, le relecteur valide le SEO et l'accessibilité. C'est le pipeline vérifier → corriger → valider vu dans la section Agents.

🤖 Agent : testeur-qa 🤖 Agent : correcteur-bugs 🤖 Agent : relecteur-seo-accessibilite

✓ Prompt à copier

"Le site du salon est terminé. Lance le testeur-qa pour vérifier les pages (responsive, liens, formulaire de contact), fais corriger chaque problème trouvé par le correcteur-bugs, puis termine par le relecteur-seo-accessibilite pour une checklist SEO et accessibilité avant mise en ligne. Résume-moi ce qui a été trouvé et corrigé à la fin."

🪄 Le réflexe à prendre : décrire la situation (le client, la cible, l'objectif) + nommer le résultat attendu + demander à voir une étape intermédiaire avant la suite ("montre-moi la direction artistique avant de coder"). Les skills et les agents font le reste — plus le contexte est précis, meilleur est le résultat.

🛠️

08c · Pas-à-pas

Skills : installer, créer, modifier, appeler

Le mode d'emploi concret des skills — où ils vivent sur la machine, comment en installer un existant, en créer un pour l'agence, le faire évoluer et le déclencher.

Où vivent les skills

# Claude Code — deux emplacements possibles :
~/.claude/skills/              # skills GLOBAUX — disponibles dans tous les projets
└── mon-skill/
    └── SKILL.md               # le skill lui-même (un dossier = un skill)

mon-projet/.claude/skills/     # skills propres à UN projet (partagés via GitHub)

# Claude.ai / Cowork :
Settings → Capabilities        # activer les skills natifs, uploader un skill custom

Installer un skill existant

1

Trouver le skill

Sur GitHub : le repo officiel anthropics/skills, ou les skills communautaires (chercher "claude skill" + le sujet). Lire le SKILL.md avant d'installer — c'est juste du texte, on voit exactement ce qu'il fait.

2

L'installer via Claude Code

Le plus simple : le demander en langage naturel.

✓ Prompt à copier

"Installe le skill ui-ux-pro-max depuis ce repo GitHub : [coller l'URL] dans mes skills globaux (~/.claude/skills/)."

3

Redémarrer la session

La liste des skills est chargée au démarrage — fermer Claude Code et relancer claude pour que le nouveau skill soit reconnu.

4

Vérifier

Taper / dans la conversation : le skill doit apparaître dans la liste. Sinon, vérifier que le dossier contient bien un fichier nommé exactement SKILL.md.

Créer un skill maison

💡 Le plus efficace : demander à Claude de créer le skill lui-même. On décrit ce qu'on veut, il écrit le SKILL.md au bon endroit avec la bonne structure.

✓ Prompt à copier — création d'un skill par Claude

"Crée-moi un skill nommé brief-ledupplex dans mes skills globaux : quand je lui donne des notes de rendez-vous client en vrac, il ressort un brief structuré (contexte, objectifs, cibles, pages pressenties, contraintes, budget). S'il manque des infos importantes, il pose ses questions avant de produire le brief. Tout en français."

Structure d'un SKILL.md — l'anatomie complète

---
name: brief-ledupplex
description: Transforme des notes de rendez-vous client en brief structuré
  Ledupplex. Utiliser dès qu'on colle des notes de RDV ou qu'on demande
  un brief client.
---

# Brief Ledupplex

## Rôle
Tu es chef de projet chez Ledupplex, agence web à Clermont-Ferrand.

## Étapes
1. Lire les notes fournies
2. Poser les questions manquantes (5 max)
3. Produire le brief au format ci-dessous

## Format de sortie
- **Contexte** : activité, situation actuelle
- **Objectifs** : ce que le site doit accomplir
- **Cibles** : qui visite, avec quelle intention
- **Pages pressenties** : liste + rôle de chacune
- **Contraintes** : techniques, délais, budget

🎯 Le champ description est le plus important : c'est lui que Claude lit pour décider de déclencher le skill tout seul. Il doit dire ce que fait le skill et quand l'utiliser ("Utiliser dès que…"). Une description vague = un skill qui ne se déclenche jamais.

Appeler et modifier

🗣️

Appeler un skill

Deux façons : explicite avec /brief-ledupplex (on contrôle le moment exact), ou implicite en décrivant le besoin ("voilà mes notes du RDV Pro Immo, fais-moi le brief") — Claude reconnaît la description du skill et le charge tout seul.

✏️

Modifier un skill

Ouvrir le SKILL.md et l'éditer comme n'importe quel texte — ou demander à Claude : "Modifie le skill brief-ledupplex pour qu'il ajoute une section Concurrents identifiés." Redémarrer la session pour recharger la version à jour.

🤖

08b · Agents & orchestration

Les agents Claude

Un agent Claude reçoit une mission, utilise des outils, prend des décisions en autonomie et livre un résultat — sans supervision à chaque étape. Chaque produit Claude a sa propre implémentation du mode agent.

Qu'est-ce qu'un agent ?

🤖 En mode chat classique, il n'y a qu'un seul Claude, et c'est l'humain qui enchaîne les messages un par un. Un agent, c'est concrètement une copie indépendante de Claude qu'on lance sur une mission précise — elle a sa propre mémoire de travail, ses propres outils, et elle tourne toute seule du début à la fin sans qu'on ait à lui parler à chaque étape.

Plusieurs agents à la fois

Comme une équipe de stagiaires, pas un seul assistant

Le vrai changement de niveau : on ne se limite pas à un agent. On peut en lancer plusieurs en même temps, chacun sur une partie différente du travail — ils tournent tous en parallèle, chacun dans son propre espace, sans se marcher dessus. Il y a un "chef" (Claude lui-même, ou nous) qui distribue les tâches et qui récupère les résultats à la fin.

Exemple concret

Auditer 5 sites en même temps

On demande : "audite ces 5 sites concurrents". Au lieu de le faire un par un, Claude lance 5 agents en parallèle — un par site. Chacun ouvre son site, l'analyse, écrit son rapport, indépendamment des 4 autres. Quand tous ont fini, les 5 rapports remontent et sont assemblés en un seul document. Ce qui aurait pris 20 minutes en séquentiel prend 4 minutes en parallèle.

Deuxième exemple concret

Créer une landing page — agents en parallèle, puis en boucle

On demande : "crée une landing page pour ce client". Claude découpe la mission en agents spécialisés — certains tournent en parallèle parce qu'ils ne dépendent pas les uns des autres, d'autres tournent en boucle à la fin pour fiabiliser le résultat.

🎨

Agent Graphisme

Crée le logo, les patterns SVG et les icônes du projet.

🖼️

Agent Page

Construit la structure et la mise en page HTML/CSS.

✍️

Agent Textes

Rédige les titres, accroches et contenus de chaque section.

⏱️ Ces trois agents tournent en même temps — le graphisme ne dépend pas des textes, ni la page du logo. Une fois que tout est assemblé, une deuxième vague d'agents prend le relais pour fiabiliser le résultat :

1

Agent Vérification

Relit la page assemblée et liste tout ce qui ne va pas — mise en page cassée, texte qui déborde, contraste insuffisant, incohérences.

2

Agent Correction

Corrige chaque problème remonté par l'agent Vérification.

3

Re-vérification — en boucle jusqu'à ce que ce soit bon

L'agent Vérification repasse derrière l'agent Correction. Si tout est propre, c'est terminé. Sinon, on relance une correction — le cycle vérifier → corriger se répète jusqu'à ce qu'il n'y ait plus rien à signaler.

⚙️ Ça existe notamment dans Claude Code (les "subagents" — des sessions déléguées à l'intérieur d'une conversation) et dans Cowork (Dispatch, qui fait la même chose mais pour des tâches agence non-techniques). Dans les deux cas, le principe est identique : un objectif est découpé, distribué à plusieurs Claude qui travaillent en même temps, coordonnés par un chef qui recolle les morceaux à la fin.

Agents et skills — comment ça s'articule

🔗 Un agent, c'est le "qui travaille" — un skill, c'est le "comment il travaille". Pendant qu'il exécute sa mission, un agent peut charger un ou plusieurs skills comme on prend un outil dans une boîte à outils : besoin de design → il charge ui-ux-pro-max ; besoin de générer un PDF → il charge le skill pdf. L'agent décide tout seul quel skill est pertinent pour la tâche en cours.

Exemple — lancer des agents en parallèle

✓ Prompt à copier — dans Claude Code ou Dispatch

"Lance un agent par site sur ces 5 concurrents : [URLs]. Chaque agent analyse son site (positionnement, offre, prix affichés, points forts et faibles du design) et produit une fiche d'une page. Travaillez en parallèle, puis assemble les 5 fiches en un comparatif final avec 3 opportunités à exploiter pour notre client."

🧩

08d · Pas-à-pas

Créer ses sous-agents personnalisés

Au-delà des agents génériques, Claude Code permet de se construire une équipe de spécialistes sur mesure — chacun avec son rôle, ses instructions et ses outils autorisés.

🧩 Un sous-agent, c'est un simple fichier .md dans ~/.claude/agents/ (global) ou .claude/agents/ dans un projet. La différence avec un skill : le skill décrit comment faire une tâche, l'agent décrit qui est ce spécialiste — et Claude lui délègue des missions entières, qu'il exécute dans son propre espace de travail.

1

Ouvrir l'assistant intégré

Taper /agents dans Claude Code : un assistant guide la création (nom, rôle, outils autorisés). C'est la méthode recommandée pour débuter.

2

Ou créer le fichier soi-même

Un fichier relecteur-seo.md dans ~/.claude/agents/, avec la structure ci-dessous — ou demander à Claude de le créer (prompt plus bas).

3

Redémarrer la session

Comme pour les skills, la liste des agents est chargée au démarrage — fermer et relancer claude.

4

L'appeler

En le nommant ("demande au relecteur-seo de vérifier cette page"), ou en laissant Claude choisir tout seul le bon agent selon la tâche — c'est le champ description qui le lui permet.

Exemple complet — ~/.claude/agents/relecteur-seo.md

---
name: relecteur-seo
description: Relit une page avant publication sous l'angle SEO et
  accessibilité. Utiliser avant chaque mise en ligne d'une page.
tools: Read, Grep, Glob
---

Tu es relecteur SEO chez Ledupplex.
Pour chaque page qu'on te donne :
1. Vérifie le title et la meta description
2. Vérifie la hiérarchie des titres (un seul H1, pas de saut de niveau)
3. Vérifie les attributs alt des images
4. Produis une checklist priorisée : critique / important / bonus

✓ Le faire créer par Claude — prompt à copier

"Crée-moi un sous-agent relecteur-seo dans ~/.claude/agents/ : il relit une page avant publication (title, meta description, hiérarchie des Hn, attributs alt, contrastes) et produit une checklist priorisée critique/important/bonus. Outils : lecture seule, il ne modifie rien."

👥 L'idée d'équipe : on peut se construire un pipeline complet — un planificateur qui prépare, un designer qui structure, un développeur qui code, un testeur qui vérifie, un correcteur qui répare. Chaque agent fait une chose, bien, et l'agent principal les enchaîne dans l'ordre.

✨

09 · Outputs vivants

Les Artefacts

Un contenu structuré que Claude génère et affiche dans un panneau dédié — rendu en temps réel, pas du texte brut.

👁️ C'est le panneau qui s'ouvre automatiquement à côté du chat quand Claude génère quelque chose de "montrable" — vous le connaissez déjà. Le HTML s'affiche comme une vraie page web, le React comme un vrai composant interactif : la différence avec un chat classique, c'est qu'on voit et modifie le résultat directement, sans copier-coller du code dans un autre outil pour le tester.

📌 Par défaut, l'artefact reste attaché à sa conversation — si on perd le fil, on le perd. Pour le garder de façon permanente (accessible depuis la sidebar "Artifacts", partageable), il faut cliquer sur "Publish" dans le panneau. Sans ce clic, ce n'est pas dans la bibliothèque, juste dans la discussion du moment.

Ce que ça peut produire — et à quoi ça sert vraiment

🌐

HTML / CSS

Une v0 de site ou de landing page visible et cliquable tout de suite — pour montrer un rendu au client sans attendre le développeur.

⚛️

React

Un vrai composant qui réagit aux clics (formulaire, calculateur, filtre) — testable avant de l'intégrer dans le vrai site.

📐

SVG

Logo, icône ou illustration générée directement en vectoriel — modifiable et réutilisable sans passer par un logiciel de design.

📝

Markdown

Un rapport, un devis ou une proposition commerciale bien mis en forme — prêt à copier ou exporter, pas juste un bloc de texte brut.

💻

Code

Un script réutilisable (audit SEO, export de données…) qu'on garde et qu'on relance à volonté, sans repartir de zéro.

📊

Mermaid

Un schéma d'architecture ou de process généré à partir d'une simple description — utile pour expliquer un workflow en réunion.

💡

Exemple : "Crée-moi un dashboard de suivi de prospection avec nos 20 leads en cours" → Claude génère un outil HTML interactif, sauvegardé dans Cowork pour être rouvert et amélioré plus tard — zéro développement, zéro hébergement.

Deux exemples à tester tout de suite

✓ Dashboard de suivi de prospection

"Crée un dashboard HTML interactif de suivi de prospection : tableau des prospects (entreprise, contact, statut, dernière action, prochaine relance), filtres par statut, et compteurs en haut (en cours / à relancer / gagnés). Données de départ : [coller la liste]. Je dois pouvoir modifier les statuts directement dedans."

✓ Calculateur de devis interactif

"Crée un calculateur de devis interactif pour nos prestations web : nombre de pages, design sur mesure ou template, options (formulaire, e-commerce, multilingue), maintenance. Il affiche une fourchette de prix en direct selon notre grille : [coller la grille]. Style sobre, aux couleurs Ledupplex."

📌 Une fois l'artefact au point, cliquer "Publish" — sinon il reste attaché à la conversation et l'équipe ne pourra ni le retrouver ni le réutiliser.

🧠

10 · Contexte persistant

Mémoire & Fichiers

CLAUDE.md, MEMORY.md, fichiers uploadés — tout ce qui fait que Claude connaît l'agence, ses projets et ses collaborateurs entre les sessions.

🧠 Deux fichiers, deux rôles. CLAUDE.md : les règles qu'on écrit une fois pour toutes (contexte agence, ton, format des livrables) — chargé automatiquement à chaque session. MEMORY.md : ce que Claude retient tout seul au fil des échanges (projets en cours, préférences des collaborateurs) — sans qu'on ait à tout réexpliquer à la session suivante.

📋 CLAUDE.md — écrit par nous

# Ledupplex — Instructions Claude

## Règles
- Toujours répondre en français
- Format livrable : Word + PDF
- Ton : professionnel mais accessible
        

🧠 MEMORY.md — écrit par Claude

# Mémoire — mis à jour par Claude

## Projets actifs
- [2026-07] Site Pro Immo → livraison août

## Préférences
- Julie préfère les wireframes avant maquette
        

Comment le mettre en place

🖥️ Cowork

Soit via un Projet (champ "Instructions" = CLAUDE.md, mémoire auto), soit en attachant un dossier existant — Claude y écrit alors un memory.md consultable sur le disque.

💻 Claude Code

Un fichier CLAUDE.md à la racine du dossier, lu automatiquement. S'il est dans un repo Git, on le commit sur GitHub pour le partager avec l'équipe. La mémoire auto, elle, reste locale à chaque machine.

🗂️

Bonne pratique (Claude Code) : un dossier principal avec un CLAUDE.md général, et un sous-dossier par projet avec son propre CLAUDE.md (+ un design.md si besoin). Claude Code empile les deux automatiquement — les règles générales et celles du projet s'additionnent, rien à recopier.

dossier-principal/
├── CLAUDE.md          # règles générales
├── projet-1/CLAUDE.md + design.md
└── projet-2/CLAUDE.md + design.md

Piloter la mémoire — prompts utiles

✓ Faire mémoriser une info importante

"Souviens-toi que pour le client [nom], les livrables sont toujours validés par [personne] avant envoi, et que le ton doit rester [ton]. Note-le dans ta mémoire pour les prochaines sessions."

✓ Vérifier ce que Claude a retenu

"Qu'est-ce que tu sais déjà sur le projet [nom] ? Liste ce que tu as en mémoire pour que je corrige si quelque chose est faux ou dépassé."

✓ En fin de session — mettre à jour le CLAUDE.md

"Avant qu'on termine : mets à jour le CLAUDE.md du projet avec les décisions prises aujourd'hui, et liste les prochaines étapes pour la prochaine session."

⏰

11 · Automatisation

Tâches planifiées

Configurer une fois, exécuter automatiquement — sans cron jobs, sans scripts, en langage naturel.

⏰ Disponible dans Cowork via le plugin schedule. On décrit la tâche en langage naturel, on choisit le rythme, et Claude s'en charge — accède aux connecteurs, génère les fichiers, envoie les notifications.

Fréquences disponibles

🌅

Quotidien

"chaque matin à 8h" — rapport d'activité, briefing du jour.

📅

Hebdomadaire

"chaque lundi à 9h" — résumé de semaine, récap des tickets.

📆

Mensuel

"le 1er du mois" — rapport client, facturation, bilan.

⏱️

Unique différé

"dans 2h", "vendredi à 14h" — rappels, envois programmés.

Exemples d'automatisations agence

📊

Rapport hebdo client

Chaque lundi — récupère les analytics (GA4), génère un rapport PDF formaté et l'envoie par email au client.

🔍

Veille concurrentielle

Chaque semaine — scrape les sites des concurrents, identifie les changements et génère un résumé dans Notion.

📋

Briefing quotidien

Chaque matin — lit les tâches Asana du jour, les emails non répondus, génère un briefing prioritaire.

Créer une tâche planifiée — pas à pas

1

Décrire la tâche dans Cowork

Pas de menu spécial : on décrit la tâche en langage naturel dans la conversation, comme n'importe quelle demande — avec le mot "chaque" ou une heure précise, Claude comprend qu'il s'agit d'une tâche récurrente.

2

Préciser le rythme et l'heure

"chaque lundi à 8h30", "le 1er du mois", "tous les jours à 18h" — plus c'est précis, mieux c'est.

3

Valider le récapitulatif

Claude reformule ce qu'il fera (quoi, quand, avec quels connecteurs et dossiers). Vérifier ce récap — c'est le moment de corriger, pas après.

4

Tester une première exécution

Demander "lance-la une fois maintenant pour vérifier le résultat" — on voit le rapport produit, on ajuste le format si besoin, et les exécutions suivantes tournent toutes seules.

✓ Exemple complet à copier — rapport hebdo client

"Chaque lundi à 8h30, prépare le rapport hebdo du client [nom] : récupère les statistiques GA4 de la semaine passée via le connecteur, compare-les à la semaine précédente, rédige un rapport PDF d'une page (visites, pages vues, top 3 des pages, 1 recommandation) et dépose-le dans le dossier Clients/[nom]/rapports. Préviens-moi quand c'est prêt."

🚀

12 · Capacités

Ce que Claude peut faire

Traitement de fichiers, analyse multimodale, génération de code — les capacités qui changent vraiment le quotidien d'une agence.

Traitement de fichiers

📄

PDF

Jusqu'à des centaines de pages. Extrait, résume, compare, structure. Analyse un contrat et liste les points de vigilance.

📊

Excel / CSV

Analyse 10 000 lignes, détecte les anomalies, calcule, génère des insights, nettoie les doublons.

🖼️

Images

Lit visuellement les images, extrait les textes, analyse les compositions, identifie les éléments UI.

💻

Code

Comprend, explique, débogue et améliore du code dans n'importe quel langage.

Capacités multimodales

🔊

Audio → Texte

Transcrit des réunions, réunions clients, briefs audio. Génère le compte-rendu structuré directement depuis l'enregistrement.

🧮

Calcul & Analyse

Effectue des calculs complexes, analyse des séries de données, identifie des tendances et génère des visualisations.

🌍

Multilingue

Traduit, rédige et analyse dans toutes les langues — avec adaptation du ton et du contexte culturel.

🔍

Recherche web

Avec les connecteurs appropriés, accède à des informations en temps réel pour enrichir ses réponses.

🧭

12b · Aide à la décision

Quel outil pour quelle tâche ?

Chat, Cowork, Claude Code, Chrome, Design — le bon réflexe selon la tâche, pour ne jamais se tromper de porte d'entrée.

🧭 La question à se poser : où est la matière sur laquelle Claude doit travailler ? Dans ma tête ou un document → Claude.ai. Dans les dossiers de mon PC → Cowork. Dans du code → Claude Code. Sur une page web → Claude in Chrome. C'est visuel et il faut le montrer → Claude Design.

Tâche	Outil recommandé	Pourquoi
Rédiger (email, devis, texte de page, post)	💬 Claude.ai (chat)	Aucune installation — un Projet client + les connecteurs suffisent
Brief, stratégie, brainstorming client	💬 Claude.ai dans un Projet	Les instructions et la base de connaissances du client sont déjà chargées
Travailler sur des fichiers du PC (trier, renommer, générer des docs)	🖥️ Cowork	Seul produit avec accès aux dossiers locaux + mémoire persistante
Automatiser une tâche récurrente (rapport hebdo, veille…)	🖥️ Cowork (tâches planifiées)	Se configure en langage naturel, tourne tout seul au rythme choisi
Créer ou modifier du code, un site, un script	💻 Claude Code	Il lit et modifie la vraie codebase, teste, corrige en boucle
Générer un JSON Divi importable	💻 Claude Code + skill divi-builder	Le skill connaît les bonnes pratiques et les modules Divi qui fonctionnent
Extraire des infos d'un site, remplir un back-office, auditer des pages	🌐 Claude in Chrome	Il voit la page réelle et peut cliquer, saisir, naviguer
Maquette ou prototype rapide à montrer au client	🎨 Claude Design	Rendu visuel interactif immédiat, exportable vers Figma ou Claude Code

Le réflexe par personne

👔 Quentin — stratégie & relation client

Brief, positionnement, arborescence → Claude.ai dans le Projet client
Comptes-rendus, suivi, docs internes → Cowork
Maquette à montrer en visio → Claude Design

🎨 Julie — design

Moodboard, références, analyse de sites → Claude in Chrome
Wireframes et v0 de maquette → Claude Code ou Claude Design
Cadrage, specs pour les devs → Claude.ai dans le Projet client

📞 Thibaud — commercial & dev

Prospection, audit de sites cibles → Claude in Chrome
Emails, prépa d'appels, relances → Claude.ai (chat)
Calculateurs PHP, dev spécifique → Claude Code

🔧 Maxence — intégration

Intégration, JSON Divi, animations → Claude Code
QA du site livré, vérif back-office → Claude in Chrome
SEO images et pages → Claude Code + skill seo

🔎

12c · Recherche & veille

Recherche web & Research

Claude peut chercher sur le web en temps réel — et le mode Research va plus loin : une vraie enquête multi-sources avec citations, parfaite pour préparer un projet ou un rendez-vous.

🌐

Recherche web simple

Pour une info fraîche (prix actuel, actualité, doc récente) : Claude cherche pendant la conversation et cite ses sources. Le meilleur antidote aux hallucinations sur les faits.

🔬

Research (claude.ai)

Le bouton Research lance une enquête approfondie : Claude explore des dizaines de sources, croise les informations et livre un rapport structuré et sourcé en quelques minutes.

📡

Veille automatique

Combiner recherche + tâche planifiée dans Cowork : une veille concurrentielle qui tourne chaque semaine toute seule (voir la section Tâches planifiées).

✓ Étude de marché locale — avec Research

"Fais une recherche approfondie sur le marché des [activité] à [ville/région] : principaux acteurs et leurs sites web, positionnement et fourchettes de prix pratiquées, ce que les clients reprochent le plus dans les avis, et les opportunités pour un nouvel entrant. Rapport structuré avec sources."

✓ Fiche entreprise avant un RDV prospect

"Recherche tout ce qui est public sur l'entreprise [nom] à [ville] : activité exacte, taille, actualités récentes, avis clients, présence en ligne (site, réseaux). Résumé en 10 points max pour préparer mon rendez-vous, en terminant par 3 accroches possibles pour la conversation."

✍️

13 · Prompt engineering

Rédiger de bons prompts

La qualité de la réponse dépend de la qualité de la demande. Même modèle — résultats radicalement différents selon le prompt.

💡 Avec un moteur de recherche, on tape des mots-clés. Avec Claude, on parle à quelqu'un. Plus on donne de contexte, de contraintes, d'exemples et d'objectifs, plus le résultat est précis et utilisable directement.

❌ Prompt pauvre

"Rédige un texte pour un site immobilier"

→ Résultat générique, ton inconnu, cible inconnue, format non précisé.

✓ Prompt riche — développé

Rôle : "Tu es un copywriter spécialisé en immobilier de luxe avec 10 ans d'expérience, reconnu pour des textes qui rassurent sans être ronflants."

Contexte : "Rédige la page d'accueil pour Pro Immo, une agence immobilière basée à Clermont-Ferrand, spécialisée dans l'achat de première résidence."

Cible : "Primo-accédants de 30 à 40 ans, en recherche active, qui ont peur de se faire avoir sur les prix ou les diagnostics."

Tâche : "Rédige l'accroche principale, une introduction courte, et 3 services clés présentés en bullets."

Ton : "Rassurant et direct, sans jargon, comme un conseiller de confiance — pas un vendeur."

Format : "1 accroche (max 10 mots), 1 intro (60 mots max), 3 services en bullets courts (15 mots max chacun)."

Contraintes : "Pas de superlatifs ('exceptionnel', 'unique'), pas de prix chiffrés, pas de tirets longs."

Exemple de ton attendu : "On analyse votre budget avant de vous montrer un bien, pas après."

→ Chaque élément (rôle, contexte, cible, tâche, ton, format, contraintes, exemple) réduit les allers-retours et rapproche du rendu final utilisable tel quel.

Les 6 principes d'un bon prompt

🎭

Le rôle — donner un rôle à Claude : "Tu es un copywriter spécialisé immobilier de luxe avec 10 ans d'expérience."

🎯

Le contexte — qui, quoi, pour qui : l'agence, le client, la cible, la situation. Plus de contexte = plus de précision.

📋

La tâche — l'action précise à accomplir. Pas "aide-moi avec" — "rédige", "analyse", "compare", "synthétise".

📐

Le format — structure attendue, longueur, style, langue. "Format : 3 bullets de max 20 mots chacun."

⚠️

Les contraintes — ce qu'il ne faut pas faire. "Évite le jargon technique", "pas de superlatifs", "ne pas mentionner les prix".

💡

Les exemples — un exemple du résultat attendu. Le meilleur calibrage possible, Claude saisit exactement le niveau et le ton.

🧱

14 · Workflow

Site JSON IA

Le process complet pour créer un site client de A à Z avec l'IA — du brief initial jusqu'au JSON Divi prêt à importer dans WordPress.

💡 Ce process combine trois outils dans l'ordre : le projet "WordPress assisté par IA" sur Claude.ai pour cadrer et rédiger, Claude Code pour prototyper rapidement en HTML/CSS/JS, puis le skill divi-builder pour livrer un JSON Divi importable directement dans WordPress.

1

Lancer le projet — "Run client (nom)"

Aller dans Claude.ai, ouvrir le projet "WordPress assisté par IA", puis démarrer un nouveau chat. Taper la commande Run client (nom du client). Claude pose alors une série de questions pour cadrer le besoin (activité, cibles, pages souhaitées, ton, références…).

2

Arborescence du site

À partir des réponses, Claude propose une arborescence complète (pages, sous-pages, structure de navigation). On la valide telle quelle, ou on demande des ajustements avant de passer à l'étape suivante.

3

Rédaction des textes

Une fois l'arborescence validée, Claude rédige les textes définitifs de chaque page du site (titres, accroches, contenus) — prêts à être intégrés, pas de simple texte de remplissage.

4

Prompt pour Claude Code

Le projet génère ensuite un prompt optimisé pour Claude Code, reprenant l'arborescence et les textes validés, pour créer une première version du site en HTML / CSS / JS. Le prompt précise d'utiliser les skills de design disponibles sur le repo (ui-ux-design-pro, ui-ux-pro-max, etc.) pour garantir un résultat soigné. Deux options pour la direction artistique : laisser Claude Code la générer lui-même à partir du brief, ou lui fournir en amont les éléments imposés (couleurs, polices, logo…) à respecter.

5

Itérations sur la version HTML/CSS/JS

On fait des allers-retours avec Claude Code (ajustements de design, de contenu, de comportement) jusqu'à obtenir une version du site qui convient pleinement, visuellement et fonctionnellement.

6

Réalisation Divi avec le skill divi-builder

Une fois la v0 validée, on passe à la réalisation sur Divi avec le skill divi-builder : il connaît les bonnes pratiques Divi, dispose d'une bibliothèque de modules et d'exemples de JSON qui fonctionnent déjà, pour reproduire fidèlement la version HTML/CSS/JS validée.

7

Import JSON et finitions

Le skill produit un JSON Divi à importer dans WordPress. On fait ensuite les derniers allers-retours directement sur le site importé jusqu'à la version finale, prête à être livrée au client.

🔀

14b · Workflow

Figma → HTML → Divi

Tuto pas-à-pas, pour quelqu'un qui n'a jamais fait ça : comment partir d'une maquette Figma existante et obtenir un site Divi fidèle, en discutant avec Claude Code. Illustré avec Védrine (chauffage/plomberie, Puy-de-Dôme), un site construit de bout en bout avec ce workflow.

🧩 À chaque étape ci-dessous, on précise qui fait quoi : Toi = tu envoies un message à Claude Code (des exemples à copier-coller sont fournis) ; Claude = il travaille seul, tu n'as rien à taper, juste à attendre et relire le résultat. Pas besoin de connaître les noms des skills par cœur : décrire simplement ce qu'on veut suffit, Claude reconnaît quand utiliser html-to-divi ou divi-builder tout seul — mais les nommer explicitement (comme dans les exemples) garantit qu'il utilise bien le bon.

Les étapes

1

Donner le lien Figma et demander le HTML Toi

Ouvrir Claude Code dans le dossier du projet, copier le lien de la maquette Figma (bouton "Share" en haut à droite dans Figma), et envoyer un message qui donne le lien et demande explicitement le skill.

✓ Prompt à copier

"Voici le lien de la maquette Figma du projet [nom du client] : [coller le lien]. Crée-moi le HTML et le CSS de cette page avec le skill html-to-divi, en vue d'une conversion Divi ensuite."

2

Claude analyse la maquette et écrit le HTML Claude

Il se connecte à Figma (outils MCP déjà configurés), relève lui-même les dimensions exactes, les couleurs, les polices et le comportement responsive, puis écrit le HTML/CSS section par section selon les normes de l'agence (grille rem, largeurs plafonnées, hiérarchie de titres…). Ça peut prendre plusieurs minutes sur une page longue — pas besoin d'intervenir, seulement de relire le résultat une fois annoncé terminé.

3

Comparer avec Figma et signaler ce qui cloche Toi

Ouvrir le rendu HTML (Claude propose un aperçu navigateur) à côté du Figma, section par section, et décrire simplement en français ce qui ne correspond pas — pas besoin de vocabulaire technique, une description visuelle suffit.

✓ Exemples de correction à copier-coller

"Le titre de la section 1 est caché derrière le menu, corrige ça."
"Sur Figma la section 2 est plus étroite que ce que tu as fait, elle ne touche pas les bords."
"L'image et le texte de la section Solutions sont dans le mauvais ordre par rapport au Figma."

4

Claude corrige et on refait un tour Claude Toi

Claude corrige et remontre le résultat ; on recompare et on redonne du feedback. Normal de répéter cette boucle plusieurs fois (souvent 5 à 10 allers-retours sur une page complète) jusqu'à ce que le HTML soit visuellement identique au Figma sur desktop, tablette et mobile.

5

Demander le fichier prêt pour Divi Toi

Une fois le HTML validé visuellement, demander une version spéciale du fichier, préparée pour la conversion (CSS regroupé dans le même fichier).

✓ Prompt à copier

"Le HTML me convient. Crée-moi maintenant un deuxième fichier HTML autonome, avec le CSS inclus dans le même fichier, pour préparer la conversion Divi."

6

Demander le JSON Divi Toi

Demander la conversion en JSON. Claude écrit un script (pas le JSON à la main), le fait tourner, vérifie automatiquement qu'il n'y a pas d'erreur, et livre un fichier .json prêt à importer.

✓ Prompt à copier

"Utilise le skill divi-builder pour convertir ce fichier HTML en JSON importable dans Divi."

7

Importer dans WordPress et ajuster Toi

Dans WordPress, ouvrir la page avec Divi Builder, puis icône Portabilité (en haut) ▸ Importer et sélectionner le fichier .json reçu. Certains réglages n'existent que dans WordPress et ne sont jamais dans le JSON : la clé API Google Maps (si une carte est présente), le menu réel du site pour la navigation, les liens des pages mentions légales/confidentialité. Si un détail visuel cloche après import, décrire le problème (ou joindre une capture d'écran) dans Claude Code — il ajuste le script et régénère un JSON corrigé à réimporter.

⏱️ Pourquoi passer par le HTML d'abord plutôt que Divi direct : comparer et corriger dans un navigateur (rechargement instantané) est bien plus rapide qu'itérer directement dans le Visual Builder Divi, section par module. Une fois le HTML validé, il sert de référence exacte pour générer le JSON — sans repasse ni surprise à l'import.

📋

14c · Workflow

Cahier des charges (CDCP)

Un prompt stable pour rédiger le cahier des charges signé par le client — Claude reprend ce qu'il sait déjà du projet, ne pose que les questions qui manquent, et reproduit à l'identique les engagements standards du Dupplex.

📍 À lancer depuis le Projet Claude.ai dédié au client — celui qui contient déjà le compte rendu du premier RDV, l'arborescence, etc. Ouvrir le Google Doc ci-dessous, copier le prompt qu'il contient, et le coller dans une nouvelle conversation, sans rien ajouter.

Comment s'en servir

1

Ouvrir le bon projet client

Le projet Claude dédié au client, celui qui contient déjà le compte rendu du premier RDV, l'arborescence, etc.

2

Coller le prompt tel quel

Dans une nouvelle conversation du projet, sans rien ajouter autour.

3

Répondre bloc par bloc

Claude reprend ce qu'il sait déjà du client depuis le reste du projet, puis pose les questions qui manquent, par petits blocs. Répondre au fil de l'échange — ou dire "je ne sais pas" / "à voir avec le client" pour passer une question sans bloquer l'échange.

4

Récupérer le cahier des charges

Une fois l'échange terminé, Claude renvoie le cahier des charges complet, structuré comme le modèle Dupplex, prêt à copier dans le Word.

5

Relire avant envoi

Vérifier les champs marqués [À COMPLÉTER] avant validation interne et envoi au client : ce sont des informations qui manquaient encore — jamais inventées par Claude.

🔒 Le prompt est écrit pour être stable dans le temps : le texte d'engagement du Dupplex (étapes, planning, RGPD, hébergement, maintenance) est fixé dans le prompt lui-même et reproduit à l'identique à chaque génération, pour que le formalisme ne dérive pas d'un projet à l'autre. Il s'adapte aussi bien à un site vitrine simple qu'à un e-commerce complexe (comptes pro/particulier, paiements multiples, connecteurs marketplace) : le bloc fonctionnalités ne s'approfondit que si le projet le justifie.

Le prompt à copier-coller

📄 Prompt CDCP — Google Doc

Le prompt complet (déroulé des questions + plan de référence du cahier des charges) est tenu à jour dans ce document — c'est la version de référence à copier.

🔗 Ouvrir le prompt CDCP

⏱️ Gain : un cahier des charges complet, formalisé dans le style institutionnel du Dupplex, généré en un échange au lieu d'une rédaction manuelle depuis zéro — avec la garantie que le texte d'engagement (étapes, planning, RGPD, hébergement, maintenance) ne varie jamais d'un projet à l'autre.

🗺️

14d · Workflow

Stratégie & arborescence

Un seul prompt qui enchaîne stratégie, liste des pages puis détail bloc par bloc de chaque page — avec un verrou : jamais de structure tant que la stratégie n'est pas validée.

📍 À lancer depuis le Projet Claude.ai dédié au client — celui qui contient déjà le compte rendu du premier RDV, le cahier des charges s'il existe. Ouvrir le Google Doc ci-dessous, copier le prompt qu'il contient, et le coller dans une nouvelle conversation, sans rien ajouter.

Comment s'en servir

1

Ouvrir le bon projet client

Le projet Claude dédié au client, celui qui contient déjà le compte rendu du premier RDV, le cahier des charges s'il existe.

2

Coller le prompt tel quel

Dans une nouvelle conversation du projet, sans rien ajouter autour.

3

Répondre aux questions de stratégie, bloc par bloc

Claude reprend d'abord ce qu'il sait déjà du client, puis pose ses questions de stratégie par blocs. Répondre au fil de l'échange.

4

Valider la note de stratégie

Claude résume la stratégie en une note courte et demande une validation explicite avant de continuer. Prendre le temps de la relire : c'est elle qui va orienter chaque page.

5

Valider la liste des pages

Une fois la stratégie validée, Claude propose la liste des pages (l'arborescence globale) et demande à nouveau une validation explicite avant d'aller plus loin.

6

Détail page par page, jamais toutes d'un coup

Claude détaille ensuite chaque page bloc par bloc (Hero, offres, réassurance, contact qualifiant, etc.) — une seule page à la fois. Il laisse réagir ou valider avant de proposer la page suivante.

7

Copier dans Figma pour la présentation client

Délai : 15 jours max après le lancement du projet.

🔒 Un seul prompt gère les trois étapes à la suite (stratégie, liste des pages, détail bloc par bloc), avec une validation explicite demandée après chaque étape : après la stratégie, après la liste des pages, puis après chaque page détaillée. Claude ne rédige jamais de structure sur une stratégie qui n'a pas été confirmée, et ne détaille jamais plusieurs pages d'un coup — toujours une page à la fois, en attendant la réaction avant de passer à la suivante. Le détail bloc par bloc n'est pas un wireframe et personne ne maquette dessus : c'est un document de présentation pour le client, qui sert ensuite de brief de contenu (quel texte pour quelle section) et de liste des visuels à prévoir. Julie garde une liberté totale sur la mise en page.

Le prompt à copier-coller

📄 Prompt Stratégie & arborescence — Google Doc

Le prompt complet (stratégie, liste des pages, détail bloc par bloc avec les tags (CTA) / (ACF)) est tenu à jour dans ce document — c'est la version de référence à copier.

🔗 Ouvrir le prompt Stratégie & arborescence

⏱️ Gain : une stratégie posée avant toute structure, une arborescence justifiée page par page (chaque page répond à un objectif, pas à une convention), et un détail bloc par bloc directement réutilisable comme brief de contenu et de visuels pour Julie — avec les tags (CTA) et (ACF) qui orientent déjà le maquettage à venir.

🎯

15 · Workflow

Process Design Julie × IA

Comment intégrer Claude à chaque étape du process design — du brief au Figma final — pour aller plus vite sans sacrifier la qualité.

1

Cadrage — Brief + Arborescence → Résumé opérationnel

Coller l'arborescence + le brief dans Claude. En retour : résumé opérationnel par page (objectif, public cible, émotions à transmettre) et mots-clés visuels. Elle ne part pas d'une page blanche — elle part d'un cadre structuré.

2

V0 maquette — Génération IA assistée par Claude

À ce stade la DA est déjà définie et validée. Demander à Claude (dans le Projet client, qui a tout le dossier) de rédiger un prompt de génération optimisé, puis utiliser ce prompt dans Claude Code ou Claude Design pour créer une v0 de la maquette. Si générée avec Claude Code (HTML/CSS), l'importer dans Figma via le plugin HTML to Design.

3

Figma — Idées et travail assisté en continu

Utiliser Claude pendant tout le travail Figma pour générer des idées d'animations, de transitions et de layouts, proposer des variantes de micro-interactions, suggérer des hiérarchies visuelles et des espacements. Claude génère aussi des textes de remplissage réalistes et aide à rédiger les specs de livraison pour les développeurs.

Outils complémentaires recommandés

📱

Mobbin

Screenshots d'apps réels filtrables par écran et secteur.

🔄

Pageflows

User flows complets de vraies apps pour comprendre les parcours.

🖼️

Scrnshts

Landing pages et interfaces premium, filtrables par style.

🎨

Claude Design

Générer des variantes visuelles rapides avant de passer sur Figma.

🏆

Awwwards

Sites primés pour les layouts créatifs, animations et tendances web. Gratuit.

🎯

Dribbble

Références UI/UX de designers du monde entier. Idéal pour les détails visuels. Gratuit.

🌐

Godly

Curation de sites web remarquables axée sur le design et les animations. Gratuit.

✏️

Land-book

Galerie de landing pages pour s'inspirer sur la structure et la mise en page. Gratuit.

Prompts prêts à copier — un par étape du process

✓ Étape 1 · Cadrage — dans le Projet client sur Claude.ai

📍 À lancer depuis le Projet Claude.ai du client : le brief, l'arborescence et les comptes-rendus sont déjà dans les fichiers du projet, Claude les lit tout seul.

"À partir du brief, de l'arborescence et des comptes-rendus du projet, donne-moi pour chaque page un résumé opérationnel : objectif de la page, public cible, émotion à transmettre, messages clés, et 5 mots-clés visuels pour guider le design. Format : un bloc par page, court et actionnable."

✓ Étape 2 · V0 maquette — d'abord dans le Projet Claude.ai, puis dans Claude Design

📍 À lancer depuis le Projet Claude.ai du client : le brief, le cadrage validé et la DA sont déjà dans les fichiers du projet.

"À partir du brief, du cadrage validé et de la DA définie dans les fichiers du projet, rédige-moi un prompt complet et optimisé pour Claude Design qui générera la v0 de la page [accueil] : le prompt doit reprendre les codes couleur exacts, les typos, l'ambiance, la structure des sections dans l'ordre, le ton des textes, et préciser ce qu'il ne faut PAS faire (les codes visuels qu'on a écartés). Donne-moi uniquement le prompt final, prêt à coller dans Claude Design."

→ Pourquoi en deux temps : le Projet Claude.ai connaît tout le dossier client, Claude Design non. On fait donc rédiger le prompt par celui qui a le contexte, puis on le colle dans Claude Design (ou Claude Code) qui exécute. Si la v0 est en HTML, l'importer ensuite dans Figma via HTML to Design.

✓ Étape 3 · Figma — micro-interactions et specs

"Voici une capture de ma maquette Figma : [image]. Propose 5 micro-interactions et animations pertinentes (hover, apparition au scroll, transitions) avec pour chacune : l'élément concerné, le comportement précis, la durée et l'easing recommandés — en restant réaliste à intégrer en CSS/GSAP. Puis rédige les specs de livraison pour le développeur."

S'inspirer sans déléguer — l'IA assistante, Julie designer

🎨 Les prompts ci-dessus produisent des livrables. Ceux-ci font autre chose : nourrir la réflexion sans jamais dessiner à la place de Julie. L'astuce commune : dire explicitement à Claude ce qu'on attend de lui — "ne me génère pas de maquette, je veux des pistes". Il propose des directions, des structures, des critiques ; le trait, les choix et le goût restent à la designer.

✓ Explorer des layouts — avant d'ouvrir Figma

"Je conçois la page d'accueil d'un [ex. cabinet d'architectes]. Propose-moi 6 structures de layout vraiment différentes pour la section héro : pour chacune, décris en texte le placement du titre, du visuel et du CTA (ou schématise-la en ASCII), explique pourquoi elle fonctionne pour cette cible, et cite un site connu qui l'utilise bien. Ne me génère pas de maquette — je veux des pistes à dessiner moi-même."

✓ Débloquer une section — quand ça ne "prend" pas

"Voici une capture de ma section [services] en cours : [image]. Sans la redessiner, donne-moi 5 pistes pour la rendre plus [vivante / premium / lisible] en jouant sur la composition, l'échelle, la respiration et le contraste. Classe-les de la plus sage à la plus osée, et pour chaque piste dis-moi ce que je devrais bouger concrètement dans Figma."

✓ Critique de DA — un regard extérieur sur MA maquette

"Voici ma maquette : [image]. Joue le rôle d'un directeur artistique exigeant mais bienveillant : évalue la hiérarchie visuelle, les alignements, les espacements et la cohérence typographique. Commence par ce qui fonctionne déjà, puis donne-moi 5 améliorations maximum, priorisées par impact. Ne propose pas de refaire la page — je veux progresser sur ma version."

✓ Références ciblées — remplacer le scroll sans fin

"Trouve-moi 8 sites récents dans le secteur [restauration] qui ont un vrai parti pris de mise en page (pas des templates génériques). Pour chacun : ce qui est intéressant à observer (grille, typo, rythme, navigation) et en quoi ça pourrait inspirer mon projet [contexte]. Ajoute les mots-clés exacts à taper dans Mobbin, Awwwards et Land-book pour prolonger la recherche."

✓ Comprendre un style — pour se l'approprier, pas le copier

"Explique-moi le style [bento grid / brutalisme web / éditorial] comme à une designer qui veut se l'approprier : ses règles de construction (grille, typo, couleur, espacement), dans quels cas il est pertinent, ses pièges classiques, et 3 sites qui l'exécutent très bien. Termine par : comment je pourrais l'adapter à un client [type de client] sans que ça fasse copie."

✓ Grille et rythme — poser les fondations d'une page

"Pour une page [de vente / vitrine] destinée à [cible], propose-moi 3 systèmes de grille différents (colonnes, gouttières, marges pour desktop et mobile) avec pour chacun le rythme vertical conseillé entre sections et la logique d'alternance des blocs (pleine largeur, 2 colonnes, asymétrique…). Explique les choix — c'est moi qui construirai la maquette dans Figma."

✂️ La phrase magique à recycler dans tous ces prompts : "Ne me génère pas de maquette — décris, schématise, critique ou référence, mais le design reste le mien." Sans elle, Claude a le réflexe de produire une page complète ; avec elle, il devient exactement ce qu'on veut : un sparring partner créatif.

HTML to Design — passer une v0 Claude Code dans Figma, pas à pas

1

Installer le plugin

Dans Figma : Menu → Plugins → rechercher "html.to.design" → installer. À faire une seule fois.

2

Générer ou récupérer la v0 HTML

La v0 produite par Claude Code est un fichier .html dans le dossier du projet. Vérifier qu'elle s'affiche bien dans Chrome avant de l'importer.

3

Importer dans Figma

Lancer le plugin → onglet "Upload" pour un fichier local, ou coller l'URL si la page est déjà en ligne. Le plugin recrée la page en calques Figma.

4

Nettoyer les calques

L'import est fidèle mais brut : renommer les calques, regrouper par section, vérifier les polices (remplacer celles qui manquent) et reconstruire l'auto-layout sur les blocs qu'on va retravailler.

5

Continuer le design normalement

À partir de là, c'est une maquette Figma classique — on itère dessus avec le client, avec l'énorme avantage d'être parti d'une v0 déjà structurée au lieu d'une page blanche.

👤

16 · Usage Thibaud

Claude pour Thibaud

Trois façons concrètes d'utiliser Claude au quotidien — comme assistant conversationnel, outil de prospection outbound, et environnement de développement.

💬

Chat quotidien

Claude s'utilise comme ChatGPT pour les tâches du quotidien — rédiger un email, résumer un document, répondre à une question, préparer un devis, brainstormer une idée. Pas besoin de setup particulier, juste ouvrir Claude.ai.

🎯

Prospection Divi

Cibler des entreprises avec un site Divi daté, auditer leur site, enrichir les contacts via Lusha et générer des emails personnalisés — le tout en une session. Voir le détail ci-dessous.

💻

Développement avec Claude Code

Pour des développements spécifiques comme les calculateurs PHP de Circea — Claude Code génère, teste et affine le code directement depuis le terminal, sans interface graphique.

Prospection avec Lusha — comment ça marche

🔗 Lusha est un connecteur MCP branché à Claude : il donne accès à une base de données B2B vérifiées (téléphones directs, emails pro, poste, taille d'entreprise). Concrètement, on donne un nom ou une entreprise à Claude, et il ressort les coordonnées du bon décideur — plus besoin de chercher à la main sur LinkedIn.

Exemple concret — les sites Divi : on repère des entreprises qui ont un site WordPress/Divi daté (template vieillissant, performances médiocres) — signal qu'elles sont mûres pour une refonte. Claude audite le site (score mobile, SSL, version Divi), puis interroge Lusha pour récupérer les coordonnées du gérant, et rédige un email qui cite les vrais problèmes trouvés. En sortie : un email personnalisé, prêt à envoyer, qui ouvre sur un appel de 15 min et une v0 du site refait.

Timeline — un agent Claude qui prospecte tout seul

1

Cibler — liste de PME à scanner

On donne à l'agent une liste ou une zone (ex. PME du Puy-de-Dôme). Il croise avec BuiltWith/Wappalyzer pour repérer celles qui tournent sous WordPress + Divi. Résultat : Boulangerie Martin, Garage Lefèvre, Cabinet Dupont Immobilier — 3 sites Divi confirmés sur 20 scannés.

2

Auditer chaque site automatiquement

Pour chacune des 3 entreprises, l'agent ouvre le site et sort un mini rapport : score mobile, certificat SSL, version de Divi, poids des images. Ex. Boulangerie Martin → score mobile 34/100, SSL expiré depuis 47 jours, Divi v3.2.

3

Enrichir le contact via Lusha

L'agent interroge Lusha avec le nom de l'entreprise et récupère le décideur : Jean-Pierre Martin, Gérant — 06 78 12 34 56 (vérifié) — jp.martin@boulangerie-m.fr. Même chose pour les deux autres entreprises, en parallèle.

4

Rédiger un email par entreprise

L'agent croise l'audit + le contact et rédige un email personnalisé pour chacune, citant les vrais problèmes trouvés (pas un template générique) : « J'ai analysé votre site ce matin, votre SSL est expiré depuis 47 jours… ».

5

Livrer une liste prête à envoyer

En sortie : un tableau avec les 3 entreprises, leur audit, leur contact vérifié et l'email prêt à envoyer. Tout ce process — cibler, auditer, enrichir, rédiger — tourne en une seule session, sans intervention manuelle entre les étapes.

Pricing des outils de prospection

Lusha

Payant

Fonctionne par crédits — chaque contact enrichi (téléphone + email) consomme un crédit. Plan gratuit limité, plans payants à partir de 29-50 €/mois selon le volume.

Apollo.io

Gratuit

Plan gratuit généreux — emails pro, données entreprises, filtres avancés. MCP disponible pour connecter Claude directement. Plans payants à partir de ~39 €/mois si besoin de plus de volume.

Hunter.io

Freemium

Trouve des emails professionnels depuis un nom de domaine. 25 recherches/mois gratuites, plans payants à partir de ~34 €/mois.

LinkedIn + Claude in Chrome

Gratuit

Claude lit directement la page LinkedIn et extrait les infos visibles (poste, entreprise, coordonnées publiques). Zéro coût, mais moins complet qu'une base de données vérifiée.

💡 Pour démarrer sans budget, Apollo.io ou LinkedIn + Claude in Chrome suffisent largement. Lusha devient intéressant quand le volume de prospection augmente et qu'on veut des numéros de téléphone vérifiés en plus des emails.

Session type — prospecter avec Claude in Chrome, pas à pas

1

Préparer

Ouvrir Chrome avec l'extension Claude connectée, et un onglet sur le site du prospect. C'est tout le setup nécessaire.

2

Lancer l'audit

Coller le prompt d'audit (ci-dessous) dans le panneau Claude. Il parcourt les pages, note les problèmes concrets (mobile, SSL, design daté, lenteur) et ressort un mini-rapport.

3

Identifier le décideur

Demander à Claude d'ouvrir les mentions légales et la page contact du site pour identifier l'entreprise exacte et le nom du gérant.

4

Enrichir le contact

Via le connecteur Lusha (email + téléphone vérifiés), ou gratuitement en ouvrant la page LinkedIn de l'entreprise dans un autre onglet — Claude en extrait les infos visibles.

5

Générer l'email

Avec le prompt email (ci-dessous) : Claude rédige un message qui cite les problèmes réellement constatés pendant l'audit. Relire, ajuster une phrase si besoin, copier dans Gmail.

6

Tracer

Demander un récap en tableau (entreprise, contact, problèmes trouvés, email envoyé le…) à coller dans le fichier de suivi — pour savoir qui relancer et quand.

Prompts prêts à copier

✓ Audit de site prospect — dans Claude in Chrome

"Analyse ce site comme un auditeur web : CMS et version si détectables (WordPress, Divi…), affichage mobile, certificat SSL, vitesse ressentie et poids des pages, design daté ou non, erreurs visibles (liens cassés, textes par défaut). Ressors un mini-rapport en 5 points max, chiffré quand c'est possible, en terminant par les 2 problèmes les plus vendeurs pour proposer une refonte."

✓ Email de prospection personnalisé

"Rédige un email de prospection pour [prénom nom], gérant de [entreprise]. Contexte : voici l'audit de son site : [coller le rapport]. Objectif : obtenir un appel de 15 minutes. Ton : direct et concret, sans flatterie ni jargon. Structure : accroche sur un problème précis constaté, 2 problèmes chiffrés, proposition d'appel, signature Ledupplex. Maximum 120 mots, pas de superlatifs."

✓ Préparation d'appel

"J'appelle [prénom nom] de [entreprise] dans 30 minutes, suite à cet email : [coller]. Prépare-moi : 3 questions de découverte, les 2 arguments clés basés sur son audit, les objections probables (le prix, 'on a déjà quelqu'un', 'ce n'est pas le moment') avec une réponse courte pour chacune, et une phrase de conclusion pour verrouiller la prochaine étape."

✓ Relance sans réponse

"Rédige une relance pour [prénom nom], sans réponse depuis [X jours] à cet email : [coller]. Angle nouveau obligatoire : ne pas répéter le premier message, apporter un élément en plus (nouvelle observation sur son site, exemple de résultat obtenu pour un client comparable). Maximum 80 mots, ton léger, une seule question en fin d'email."

👤

17 · Usage Quentin

Claude pour Quentin

Du suivi client à la stratégie, en passant par les contenus, les visios et les maquettes — comment Claude accompagne chaque étape de la relation client, jusqu'à l'intégration du site.

💡 Idée principale — un skill "arborescence UX & conversion" : un skill custom (comme divi-builder pour l'intégration) qui prend en entrée le brief et la stratégie d'un client, et ressort une arborescence de site pensée pour l'UX et la conversion — hiérarchie de l'information, parcours utilisateur logique, emplacement des CTA, pages qui servent vraiment l'objectif business. Plutôt que de partir d'une page blanche à chaque client, Quentin aurait une base réutilisable qui applique systématiquement les bonnes pratiques au lieu de les reconstruire de mémoire à chaque fois.

Skills sur mesure à créer

Arborescence UX & conversion

À créer

Prend le brief + la stratégie d'un client et génère une arborescence de site pensée pour le parcours utilisateur et la conversion, avec emplacement des CTA justifié à chaque étape.

Brief → stratégie client

À créer

Un skill qui structure automatiquement les notes de premier rendez-vous en positionnement, messages clés et priorités — pour ne plus repartir d'une feuille blanche après chaque brief.

Analyse concurrentielle → mots-clés SEO

À créer

À partir des sites concurrents d'un client, génère une étude de mots-clés complète dans la langue demandée (volume estimé, intention de recherche, difficulté) — pour poser la stratégie de contenu et l'arborescence sur des bases SEO solides dès le départ, pas en rattrapage à la fin.

Créer le skill "arborescence UX & conversion"

🧭 Le skill embarque directement des bonnes pratiques UX & conversion définies dans ce prompt, et il est construit pour interroger le projet à chaque utilisation — le brief client, le nombre de pages, les pages précises — plutôt que de deviner. Sa structure de sortie s'appuie sur les vraies arborescences déjà réalisées par Quentin, demandées dès la création. Le seul [crochet] restant est le brief de test à coller avant de lancer le prompt.

✓ Prompt complet à copier — créer le skill et le publier sur GitHub

"Mission : crée un skill custom nommé ledupplex-arborescence dans mes skills globaux (~/.claude/skills/). Il doit prendre en entrée le brief et la stratégie d'un client et ressortir une arborescence de site pensée pour l'UX et la conversion. Étape 1 — Avant d'écrire quoi que ce soit, regarde le SKILL.md du skill divi-builder déjà installé (celui qui convertit une maquette en JSON Divi) pour respecter ce même modèle de structure. Demande-moi ensuite de te donner des arborescences déjà réalisées sur d'anciens projets, ainsi que la structure de sortie que je souhaite — par exemple un document Word, ou l'arborescence construite directement dans Figma via le MCP Figma, ou [un autre format à préciser] — le skill doit s'appuyer sur ces exemples, pas inventer un format générique. Le skill doit appliquer systématiquement ces règles UX & conversion : hiérarchiser les pages selon l'objectif business du client, pas juste par thème · indiquer pour chaque page le rôle qu'elle joue dans le parcours de conversion, pas juste son titre. Le skill doit aussi, à chaque utilisation, commencer par poser ces questions avant de proposer quoi que ce soit : — Est-ce qu'un brief ou une stratégie client existe déjà ? Si oui, le coller. Si non, poser directement les questions minimales pour le reconstituer (secteur d'activité, cible, objectif principal du site). — Combien de pages sont visées ? Si la réponse n'est pas connue, proposer un nombre adapté au type de site et au secteur d'activité, avec une justification courte. — Y a-t-il déjà des pages précises en tête, ou le skill doit-il les proposer lui-même à partir du brief ? — Une seule arborescence à produire, ou plusieurs variantes à comparer ? Étape 2 — Écris le SKILL.md avec ces règles et ce format de sortie. Montre-moi le SKILL.md avant de l'enregistrer. Étape 3 — Teste le skill sur ce brief réel : [coller un brief client existant, ou le plus récent]. Montre-moi le résultat — vérifie en particulier qu'il a bien posé les questions ci-dessus avant de produire l'arborescence. Étape 4 — Une fois que je valide le résultat du test, push le skill sur GitHub, directement sur la branche main. Contraintes : tout en français, une validation de ma part à l'étape 2 avant d'enregistrer le SKILL.md et à l'étape 3 avant de publier — ne passe à l'étape suivante qu'après mon accord."

🔧 Ce skill n'est jamais figé : à tout moment, il suffit de redemander à Claude de l'ajuster (une règle en plus, un format de sortie différent, une question posée en trop) — pas besoin de repartir de zéro à chaque évolution. Le fichier SKILL.md reste juste du texte modifiable.

Skills déjà existants à télécharger

competitive-platform-analysis

Disponible

Analyse les concurrents d'un client (positionnement, ton, points forts/faibles) — parfait avant de poser une stratégie, pour partir d'exemples réels plutôt que de suppositions. Base idéale pour alimenter le futur skill d'étude de mots-clés.

seo

Disponible

Skill d'audit et de bonnes pratiques SEO (meta, structure des titres, données structurées) — déjà utilisé côté Maxence pour l'intégration, réutilisable ici en amont pour orienter la stratégie de contenu.

brand-discovery / brand-voice

Disponible

Fait ressortir le positionnement et la personnalité d'un client via des questions structurées, puis construit un profil de ton réutilisable pour tous les contenus à venir.

ui-ux-pro-max

Disponible

Génère des maquettes soignées (palettes, typos, composants) à partir d'un brief — la base pour produire une première version de site rapidement, sans repartir de zéro.

design-review

Disponible

Passe une maquette au crible avant de la montrer au client : cohérence visuelle, accessibilité, points faibles à corriger — pour arriver en visio avec une version déjà propre.

article-writing

Disponible

Rédige des contenus longs (pages de site, articles, posts) dans une voix cohérente avec la marque du client, à partir d'exemples ou d'un brief de ton.

Prompts prêts à copier

✓ Notes de RDV → brief structuré

"Voici mes notes brutes du rendez-vous avec [client] : [coller]. Structure-les en brief : contexte et activité, objectifs du site, cibles, pages pressenties, contraintes (délais, budget, technique), et les questions restées sans réponse à poser au prochain échange."

✓ Préparation de visio client

"Je présente [la maquette / l'arborescence] à [client] demain en visio. Contexte : [coller]. Prépare-moi : le déroulé en 5 points, les 3 arguments qui justifient nos choix, les objections probables avec une réponse courte pour chacune, et 2 questions à lui poser pour verrouiller la suite du projet."

✓ Compte-rendu de visio

"Voici la transcription (ou mes notes) de la visio avec [client] : [coller]. Rédige le compte-rendu : décisions prises, points en attente, prochaines étapes avec responsable et échéance pour chacune. Ton professionnel, prêt à envoyer par email au client."

✓ Proposition commerciale

"Rédige une proposition commerciale pour [client] à partir de ce brief : [coller]. Structure : rappel du besoin, solution proposée page par page, planning en phases, tarif [fourchette], conditions. Ton Ledupplex : professionnel, concret, sans jargon. Format prêt à mettre en page."

👤

18 · Usage Maxence

Claude pour Maxence

Intégration de sites, création de contenu et SEO des images et des pages — les fonctionnalités et skills qui peuvent accélérer ce travail au quotidien.

📄 Plutôt que de tout lire, l'IA génère un résumé structuré par thématique (ton du client, secteur, cible, contraintes techniques, etc.) à partir du document reçu — pour démarrer l'intégration avec une vue claire du projet, sans perdre de temps à tout relire à chaque étape.

Étapes d'intégration (responsive fait directement à chaque étape)

1

Paramétrage WordPress

Police, favicon, options générales du site.

2

Création des pages, du menu et des formulaires

Mise en place de la structure de base dans WordPress, formulaires si nécessaire.

3

Theme Builder — navigation et footer

Création de la navigation et du footer via le Theme Builder de Divi.

4

Intégration des pages

Avec Claude pour les bouts de code custom : boutons personnalisés type AirNAM, scripts de correction de bug.

5

Vérification et validation

Dernier passage avant livraison.

Possibilité IA — générer les pages en Divi Builder

🧩 Grâce aux skills créés dans Claude Code, l'IA est aujourd'hui capable de générer des pages complètes en Divi Builder, responsive et animées, ainsi que la navigation et le menu.

⚠️ Le fonctionnement reste encadré : les menus, formulaires et pages doivent d'abord être créés dans WordPress comme d'habitude (étapes 1 à 3). L'IA prend ensuite en charge la génération du JSON Divi pour l'intégration de la page (étape 4), via plusieurs allers-retours successifs pour affiner le résultat. Les modules nécessitant une sélection manuelle (menus, formulaires, autres modules à configurer) ainsi que les petites adaptations de design ne sont à faire soi-même qu'à la toute dernière itération, une fois le JSON stabilisé — le faire plus tôt serait une perte de temps.

🎬

Exemple concret testé

Utilisable sur tous les projets : créer les animations avec Claude Code pour gagner du temps, obtenir des animations plus personnalisées, et alléger le site des animations Divi natives. Le skill doit continuer d'être entraîné et implémenté au fil des projets.

⏱️ Gain : le temps d'intégration pure est fortement réduit.

Possibilité IA — SEO des images et des pages

🖼️ Avec Claude Code, on place les images dans un dossier et l'IA les analyse pour générer un document listant toutes les métadonnées par image (alt, titre, légende, description).

📝 Pour les pages, on donne l'ensemble du contenu à Claude, qui génère les mots-clés, le meta title et la meta description, le tout via un skill dédié aux bonnes pratiques SEO.

⏱️ Gain : un SEO de base (images et pages) couvert sans y passer la journée, avec des métadonnées cohérentes et prêtes à intégrer.

Prompts prêts à copier

✓ SEO des images — dans Claude Code

"Voici le dossier d'images du site [client] : [glisser le dossier]. Pour chaque image, génère : un nom de fichier optimisé (minuscules, tirets, mots-clés), un texte alt descriptif (125 caractères max), un titre et une légende. Contexte du site : [activité, ville, cible]. Sortie : un tableau à suivre pendant l'upload dans WordPress."

✓ Meta title & description d'une page

"Voici le contenu complet de la page [nom] : [coller]. Génère : les 3 mots-clés principaux visés, un meta title (60 caractères max, mot-clé au début) et une meta description (155 caractères max, avec un appel à l'action). Propose 2 variantes de chaque et dis laquelle tu recommandes et pourquoi."

✓ Génération du JSON Divi

"Utilise le skill divi-builder. Voici la page HTML/CSS validée : [fichier]. Génère le JSON Divi importable correspondant : structure fidèle, responsive, classes préfixées. Les menus et formulaires seront branchés à la main — laisse à leur emplacement des modules placeholder clairement nommés."

✓ Correction de bug

"Bug sur [page] : [comportement constaté] alors que j'attends [comportement attendu]. Navigateur : [X], mobile/desktop : [X]. Diagnostique la cause avant de corriger : reproduis, isole, explique-moi la cause en une phrase, puis propose la correction la plus simple possible. Ne touche qu'aux fichiers concernés."

🖼️

18b · Workflow réutilisable

SEO Images — traitement en lot

Le process pas-à-pas pour générer les métadonnées SEO (alt, titre, légende, description) de toutes les images d'un client en une seule session Claude Code ou Claude Cowork — à réutiliser tel quel sur chaque nouveau projet.

🔑 Ce qui fait toute la différence, c'est l'étude de mots-clés fournie en amont. Sans elle, les mots-clés générés restent génériques ; avec elle, chaque image se rattache à la bonne page du site et à son mot-clé principal — l'IA ne devine pas, elle applique.

Les 8 étapes

1

Préparer le dossier

Rassembler toutes les images du client dans un seul dossier. Peu importe le nommage d'origine, mais éviter les doublons et les fichiers hors-sujet (logos, factures, etc.).

2

Rassembler le contexte métier et SEO

Avant de toucher aux images, il faut deux choses : le pitch de l'entreprise (activité, zone géographique réelle, points forts, ancienneté) et l'étude de mots-clés si elle existe (requête principale et mots-clés secondaires par page du site).

3

Analyser chaque image une par une — directement, sans description du client

C'est l'IA qui ouvre et regarde chaque photo elle-même via ses outils de lecture de fichiers, le client n'a rien à décrire. Elle note factuellement ce que l'image montre : type de chantier/produit, équipement visible, étape du travail, lieu (urbain/rural/agricole/industriel). Ne jamais inventer un contexte qui n'est pas visible sur la photo.

4

Associer chaque image à une page/mot-clé

Croiser le contenu réel de l'image avec la page du site et son mot-clé principal correspondant dans l'étude SEO. Éviter de répéter le même mot-clé principal sur deux images si le contenu le permet.

5

Rédiger les 4 champs pour chaque image

Alt : description factuelle, mot-clé naturel, 125 caractères max · Titre : accrocheur, orienté métier, 60 caractères max · Légende : une phrase visible sous l'image · Description : 2-3 phrases avec contexte et mot-clé secondaire, sans sur-optimisation.

6

Consolider dans un tableau

Une ligne par image, colonnes : Nom du fichier, Alt, Titre, Légende, Description. Format Excel ou CSV pour être réimporté facilement dans le CMS du site.

7

Vérifier avant livraison

Relire les longueurs de caractères, s'assurer qu'aucun mot-clé principal n'est répété sur toutes les images, et que le ton reste factuel (pas promotionnel).

8

Intégrer sur le site

Copier-coller chaque champ dans les balises correspondantes (alt, title, caption, description) de la médiathèque du CMS.

Prompt réutilisable — à copier-coller à chaque nouveau projet

📍 À lancer dans Claude Code ou Claude Cowork, avec le dossier d'images du client glissé dans le répertoire de travail. Remplacer les champs entre crochets avant d'envoyer.

✓ Prompt complet à copier — SEO images en lot

"Fais le SEO des images du dossier [nom du dossier / client]. Contexte métier : - Nom de l'entreprise : [nom] - Activité : [ex : désamiantage, plomberie, paysagisme...] - Zone géographique réelle (sois précis, pas d'approximation) : [ville/département exacts] - Ancienneté / points forts : [ex : depuis X ans, certifications, spécificités] Étude de mots-clés (si disponible, colle-la ou upload le fichier) : [requête principale + mots-clés secondaires par page du site] Étapes à suivre : 1. Ouvre et regarde toi-même chaque image du dossier une par une avec tes outils de lecture de fichiers (ne me demande pas de te les décrire, tu dois les analyser visuellement). Identifie factuellement ce qu'elle montre (type de chantier/produit, équipement, étape du travail, lieu urbain/rural/agricole/industriel). Ne rien inventer qui n'est pas visible. 2. Associe chaque image à la page du site et au mot-clé principal correspondant dans l'étude SEO. Évite de répéter le même mot-clé principal sur plusieurs images si le contenu le permet. 3. Rédige pour chaque image : - Alt : description factuelle avec mot-clé naturel, 125 caractères max - Titre : accrocheur, orienté métier, 60 caractères max - Légende : une phrase visible sous l'image - Description : 2-3 phrases, contexte + mot-clé secondaire, sans sur-optimisation 4. Consolide dans un tableau : une ligne par image, colonnes Nom du fichier / Alt / Titre / Légende / Description. Livre en Excel ou CSV. 5. Avant de livrer : vérifie les longueurs de caractères, la variété des mots-clés principaux, et un ton factuel jamais promotionnel. Ton professionnel, français correct, pas de tournures robotiques."

⏱️ Gain : le SEO complet des images d'un site (souvent 50 à 150 photos) passe d'une demi-journée de rédaction manuelle à une seule session Claude Code ou Claude Cowork, avec un tableau prêt à réimporter dans le CMS.

💬

18c · Workflow réutilisable

SEO Images — en direct dans le chat

La version courte du même workflow, pour une ou quelques images jointes directement à un message — sans passer par un dossier ni Claude Code.

🧭 Quand l'utiliser : dans un Projet Claude.ai qui contient déjà l'étude de mots-clés du client, avec les images jointes directement au message. Pratique pour traiter quelques photos reçues au fil de l'eau, sans attendre d'avoir tout le lot du client. Pour un dossier complet de dizaines d'images, préférer la version SEO Images — lot dans Claude Code ou Cowork.

📍 À lancer depuis le Projet Claude.ai du client : l'étude de mots-clés est déjà dans les fichiers du projet, Claude la lit toute seule — inutile de la recoller. Remplacer les champs entre crochets avant d'envoyer, joindre les images au message, puis envoyer.

Prompt réutilisable — à copier-coller à chaque nouveau projet

✓ Prompt complet à copier — SEO images jointes au chat

"Fais le SEO de toutes les images que je t'envoie avec ce message (une seule ou plusieurs, traite-les toutes). Contexte métier : - Nom de l'entreprise : [nom] - Activité : [ex : désamiantage, plomberie, paysagisme...] - Zone géographique réelle (sois précis, pas d'approximation) : [ville/département exacts] - Ancienneté / points forts : [ex : depuis X ans, certifications, spécificités] - Page du site : [nom de la page] Utilise l'étude de mots-clés qui se trouve dans les fichiers de ce projet (requête principale et mots-clés secondaires par page du site) pour rattacher chaque image à la bonne page et au bon mot-clé. Ne me redemande pas cette étude, elle est déjà dans les fichiers du projet. Pour chaque image jointe à ce message, dans l'ordre où elles apparaissent : 1. Regarde-la directement et identifie factuellement ce qu'elle montre : type de chantier/produit, équipement visible, étape du travail, lieu (urbain/rural/agricole/industriel). 2. Associe-la à la page du site et au mot-clé principal le plus pertinent selon l'étude de mots-clés du projet, sans répéter le même mot-clé principal sur deux images si le contenu le permet. 3. Rédige : - Alt : description factuelle avec mot-clé naturel, 125 caractères max - Titre : accrocheur, orienté métier, 60 caractères max - Légende : une phrase visible sous l'image - Description : 2-3 phrases, contexte + mot-clé secondaire, sans sur-optimisation 4. Présente le résultat image par image, dans ce format : Nom du fichier : Alt : Titre : Légende : Description : Si plusieurs images sont jointes, traite-les toutes dans la même réponse, puis récapitule l'ensemble dans un tableau unique (mêmes colonnes) que je pourrai copier dans mon CMS. Ton professionnel, français correct, pas de tournures robotiques, ton factuel jamais promotionnel."

⏱️ Gain : traiter une poignée d'images reçues par email ou WhatsApp en quelques minutes, sans monter un dossier ni ouvrir Claude Code — le résultat s'intègre directement dans le CMS.

🆘

19 · FAQ

Dépannage — les problèmes courants

Les blocages les plus fréquents et leur solution — à consulter avant de conclure que "ça ne marche pas".

Problème	Cause probable	Solution
Mon skill n'apparaît pas	Session ouverte avant l'installation	Redémarrer Claude Code ; vérifier que le fichier s'appelle exactement `SKILL.md`
Claude a "oublié" ce qu'on avait dit	Autre conversation, sans Projet ni mémoire	Travailler dans un Projet, ou recoller le contexte ; lui demander de noter l'info en mémoire
Les réponses se dégradent, il tourne en rond	Conversation trop longue	`/compact` dans Claude Code, ou nouvelle conversation en collant un résumé
Limite de messages atteinte	Quota du plan consommé	Attendre la fenêtre suivante ; passer sur Haiku ou Sonnet pour les tâches simples
Mon artefact a disparu	Il n'a jamais été publié	Il est toujours dans sa conversation d'origine ; cliquer Publish la prochaine fois
Claude in Chrome ne voit pas la page	Site non autorisé dans l'extension	Autoriser le site dans les permissions de l'extension, puis recharger la page
Il invente des infos	Hallucination — normal sur les faits précis	Demander les sources, activer la recherche web, vérifier avant de réutiliser
Le JSON Divi ne s'importe pas	Structure invalide quelque part	Copier le message d'erreur et le redonner à Claude : "l'import échoue avec cette erreur, corrige le JSON"

🔧 Le réflexe universel : décrire le problème à Claude lui-même — "voilà ce que j'ai fait, voilà ce que j'obtiens, voilà l'erreur". Il est très bon pour déboguer… y compris ses propres ratés.

📖

20 · Glossaire

Les termes à connaître

Tout le vocabulaire du guide, expliqué simplement — pour parler le même langage dans l'équipe.

Terme	En clair
LLM (modèle de langage)	Le "cerveau" : un programme entraîné sur d'énormes volumes de texte, capable de comprendre et de produire du langage. Claude est un LLM.
Modèle (Haiku, Sonnet, Opus, Fable)	Les différentes versions du cerveau — du plus rapide et léger au plus puissant.
Token	L'unité de texte que lit le modèle (1 mot ≈ 1 à 2 tokens). Les limites d'usage se comptent en tokens.
Fenêtre de contexte	La "mémoire de travail" d'une conversation : tout ce que Claude garde en tête en même temps. Une fois pleine, les débuts s'estompent.
Prompt	La demande qu'on écrit à Claude. Sa qualité détermine la qualité de la réponse.
Instructions (prompt système)	Les règles permanentes d'un Projet ou d'un CLAUDE.md — lues automatiquement avant chaque conversation.
MCP / Connecteur	Le pont qui branche Claude sur un outil réel (Notion, Gmail, Figma…) pour qu'il lise et agisse directement dans cet outil.
Skill	Un fichier d'instructions (SKILL.md) qui donne à Claude une compétence précise et reproductible.
Agent / Sous-agent	Une copie de Claude lancée sur une mission, en autonomie — plusieurs peuvent tourner en parallèle.
Artefact	Le panneau de résultat "vivant" (page web, composant, document) que Claude génère à côté du chat.
CLAUDE.md	Le fichier de contexte d'un projet Claude Code — lu automatiquement à chaque session.
Repo (dépôt)	Le dossier d'un projet versionné sur GitHub, partagé avec l'équipe.
Commit / Branche / PR	Un point de sauvegarde / un espace de travail isolé / une demande de relecture avant de fusionner dans la version principale.
JSON	Un format de données structuré — c'est notamment le format des exports Divi qu'on importe dans WordPress.

📚

21 · Catalogue

Liste des skills & agents de l'agence

Le catalogue complet de la branche main du repo GitHub : 91 skills et 38 agents, avec pour chacun ce qu'il fait et quand s'en servir.

🗣️

Comment les appeler — c'est toujours pareil, pas besoin de le retenir par fiche.
Un skill : taper /nom-du-skill dans la conversation, ou décrire simplement le besoin en français — Claude le charge tout seul si la demande correspond.
Un agent : le nommer dans la phrase ("demande au seo-specialist d'auditer cette page"), ou laisser Claude choisir le bon spécialiste.
Les fiches ci-dessous répondent donc surtout à : qu'est-ce qu'il fait, et quand s'en servir ?

📦 Source : .claude/skills sur main · .claude/agents sur main — installation : voir le pas-à-pas de la section Skills.

⚡ Skills — Branding & stratégie

brand-discovery

Mène des interviews structurées (raison d'être, positionnement, audience, ton) et produit un brandbook complet. Quand : au démarrage d'une mission branding.

brand-voice

Construit le profil d'écriture d'une marque à partir de ses vrais textes, pour rédiger ensuite avec sa voix. Quand : avant toute rédaction récurrente pour un client.

competitive-platform-analysis

Identifie et hiérarchise les concurrents d'un client. Quand : première étape d'une analyse concurrentielle.

competitive-report-structure

Met le benchmark concurrentiel en rapport structuré, présentable au client. Quand : après l'analyse, pour livrer.

market-research

Étude de marché et veille sectorielle avec sources citées. Quand : cadrer un projet, préparer une proposition commerciale.

lead-intelligence

Pipeline de prospection : trouve et score des prospects, repère les chemins d'introduction chauds. Quand : développement commercial de l'agence.

product-capability

Transforme une idée ou un cahier des charges flou en plan réalisable (contraintes, interfaces, étapes). Quand : entre le brief et le développement.

taste

Couche de direction créative "goût" pour vidéos et contenus courts très stylisés. Quand : production visuelle qui doit avoir une vraie signature.

⚡ Skills — Marketing & contenu

marketing-campaign

Campagne complète : audience, positionnement, copy de landing, séquences email, calendrier. Quand : lancement d'un produit ou d'un site client.

content-engine

Système de contenu adapté à chaque plateforme (X, LinkedIn, TikTok, YouTube, newsletter). Quand : stratégie de contenu récurrente.

article-writing

Articles, guides et posts de blog longs, dans une voix définie. Quand : contenu SEO ou éditorial pour un client.

social-publisher

Programme et publie des posts sur 13 plateformes sociales. Quand : gestion des réseaux d'un client ou de l'agence.

crosspost

Adapte un même contenu aux codes de X, LinkedIn, Threads et Bluesky. Quand : diffuser un contenu partout sans le réécrire à la main.

social-graph-ranker

Analyse un réseau X/LinkedIn pour trouver les bonnes personnes et les intros chaudes. Quand : prospection par le réseau.

email-ops

Trie la boîte mail, rédige des brouillons, vérifie les envois et gère les relances. Quand : gestion quotidienne des emails.

⚡ Skills — SEO & accessibilité

seo ⭐

Audit et plan SEO complet : technique, on-page, données structurées, Core Web Vitals, contenu. Quand : tout audit ou optimisation de référencement.

accessibility

Conçoit et audite selon les normes WCAG 2.2 AA (contrastes, navigation clavier, lecteurs d'écran). Quand : avant toute mise en ligne.

frontend-a11y

Règles d'accessibilité appliquées directement dans le code front. Quand : pendant l'écriture du HTML/CSS/JS.

⚡ Skills — Design & UI

ui-ux-design-pro ⭐

Expert design senior : conçoit des interfaces complètes, génère des design systems, audite la qualité. Quand : toute création ou refonte d'interface.

design-system

Génère ou audite un design system, vérifie la cohérence visuelle d'un projet. Quand : poser les fondations graphiques ou relire du style.

frontend-design-direction

Fixe une direction design forte avant de coder (au lieu d'un rendu générique). Quand : au tout début d'une page ou d'un site.

make-interfaces-feel-better

Les micro-détails qui font le "premium" : espacements, ombres, typo, états de survol. Quand : une page fonctionne mais fait "brouillon".

inherit-legacy-style

Fait adopter à Claude le style d'un code existant avant d'y toucher. Quand : reprendre le site d'un client fait par quelqu'un d'autre.

click-path-audit

Trace chaque bouton et parcours utilisateur pour trouver les enchaînements qui se cassent entre eux. Quand : debug d'interface interactive.

ui-demo

Enregistre des vidéos de démo d'une interface web (parcours automatisé). Quand : présenter un site au client sans réunion.

frontend-slides

Présentations HTML animées (ou conversion d'un PowerPoint). Quand : une présentation client qui sorte du lot.

dashboard-builder

Tableaux de bord de monitoring (Grafana et similaires). Quand : besoin technique de suivi de métriques — usage rare à l'agence.

fal-ai-media

Génération d'images, de vidéos et d'audio par IA (fal.ai). Quand : visuels de marque, images d'illustration, vidéos courtes.

⚡ Skills — Divi & front-end

divi-builder ⭐ (skill maison)

Convertit une maquette HTML/CSS en JSON importable dans Divi Builder, gère les modules Divi Supreme et les animations GSAP. Quand : chaque intégration de maquette dans WordPress/Divi.

frontend-patterns

Bonnes pratiques front : structure, état, performance, UI. Quand : écrire du JavaScript propre sur n'importe quel site.

coding-standards

Conventions de code transverses : nommage, lisibilité, qualité. Quand : en toile de fond de tout développement.

error-handling

Gestion d'erreurs robuste (messages utilisateur, cas limites, reprises). Quand : formulaires, appels d'API, tout ce qui peut échouer.

api-design

Conception d'API REST propres (nommage, pagination, erreurs, versions). Quand : créer ou consommer une API.

backend-patterns

Patterns côté serveur (Node/Express, optimisation). Quand : un projet sort du cadre 100 % WordPress.

mysql-patterns

Schémas, requêtes et index MySQL/MariaDB — la base de données de WordPress. Quand : requêtes lentes ou manipulation directe de la base.

⚡ Skills — Motion & vidéo

motion-foundations

Les fondations du motion : durées, courbes, performance, accessibilité. Quand : poser le système d'animation d'un site.

motion-patterns

Animations prêtes à l'emploi : boutons, modales, transitions de page, apparitions au scroll. Quand : animer les composants courants.

motion-advanced

Motion avancé : drag & drop, gestes, animations de texte, tracés SVG. Quand : effets signature d'un site haut de gamme.

motion-ui

Système de motion UI complet pour React/Next. Quand : projet React avec beaucoup d'animations d'interface.

remotion-best-practices

Bonnes pratiques Remotion — créer de vraies vidéos MP4 en code React. Quand : avec l'agent videaste-remotion.

remotion-video-creation

29 règles Remotion par domaine : 3D, audio, sous-titres, transitions, graphiques. Quand : production vidéo Remotion poussée.

video-editing

Montage vidéo assisté : couper, structurer, enrichir des rushs réels (FFmpeg). Quand : retravailler une vraie captation.

videodb

Comprendre et chercher dans de la vidéo/audio (ingestion, analyse, extraits). Quand : retrouver des moments précis dans des heures de rush.

⚡ Skills — Frameworks JS (si projet hors Divi)

react-patterns

Les bons réflexes React modernes (hooks, composants serveur/client, formulaires). Quand : tout projet React.

react-performance

Optimisation des performances React/Next (règles Vercel). Quand : une app React qui rame.

react-testing

Tests de composants React (Testing Library, mocks réseau, accessibilité). Quand : fiabiliser une app React.

vue-patterns

Patterns Vue 3 (Composition API, Pinia, Router). Quand : tout projet Vue.

nuxt4-patterns

Patterns Nuxt 4 (rendu serveur, chargement des données). Quand : site Vue avec SSR.

nextjs-turbopack

Spécificités Next.js 16+ et son bundler Turbopack. Quand : projet Next.js récent.

vite-patterns

Configuration et optimisation de Vite (l'outil de build moderne). Quand : projet JS avec build.

ui-to-vue

Convertit des maquettes/captures d'écran en composants Vue 3. Quand : intégration en série sur un projet Vue.

⚡ Skills — Qualité, tests & sécurité

browser-qa

Tests visuels automatisés dans un vrai navigateur (clics, vérifications d'affichage). Quand : après chaque déploiement.

e2e-testing

Tests de bout en bout avec Playwright (simuler un vrai visiteur). Quand : vérifier les parcours critiques (formulaire, commande).

tdd-workflow

Développement piloté par les tests : écrire le test avant le code. Quand : fonctionnalité complexe qui doit être fiable.

verification-loop

Boucle de vérification systématique (build, tests, relecture) en fin de travail. Quand : avant de dire "c'est terminé".

production-audit

Audit "prêt pour la mise en ligne ?" : qu'est-ce qui peut casser en production. Quand : juste avant un lancement.

plankton-code-quality

Formatage et lint automatiques à chaque modification de fichier. Quand : installé une fois, il agit tout seul.

codehealth-mcp

Note la "santé" structurelle du code (via CodeScene) avant/après modification. Quand : surveiller la qualité sur la durée.

security-review

Relecture sécurité : mots de passe, entrées utilisateur, secrets, paiement. Quand : tout code qui touche à des données sensibles.

security-scan

Scanne la configuration Claude elle-même (.claude/) pour détecter les risques. Quand : après avoir installé des skills externes.

⚡ Skills — Git, déploiement & organisation

git-workflow

Stratégies de branches, conventions de commit, résolution de conflits. Quand : travail d'équipe sur un repo.

github-ops

Opérations GitHub : issues, pull requests, releases, automatisations. Quand : gérer le repo au-delà du simple commit.

deployment-patterns

Workflows de déploiement, CI/CD, retours en arrière. Quand : fiabiliser les mises en ligne.

google-workspace-ops

Travailler dans Drive, Docs, Sheets et Slides comme un seul espace. Quand : documents partagés de l'agence.

terminal-ops

Exécution disciplinée de commandes dans un repo (preuves avant conclusions). Quand : debug de CI, vérifications de repo.

⚡ Skills — Recherche & connaissance

deep-research

Recherche approfondie multi-sources avec rapport cité. Quand : étude sérieuse (marché, technologie, concurrent).

exa-search

Recherche "neuronale" puissante : web, entreprises, personnes, exemples de code. Quand : la recherche classique ne suffit pas.

search-first

Réflexe "chercher l'existant avant de coder" (librairies, outils déjà faits). Quand : avant de développer quoi que ce soit de custom.

iterative-retrieval

Technique d'affinage progressif de la recherche de contexte (pour les agents). Quand : usage avancé, en arrière-plan.

data-scraper-agent

Collecte automatisée de données publiques (prix, annonces, actus) en continu. Quand : veille récurrente pour un client.

codebase-onboarding

Analyse un code inconnu et produit un guide d'accueil (architecture, conventions). Quand : reprendre le projet d'un autre.

code-tour

Crée des visites guidées pas-à-pas dans un code. Quand : faire monter un collègue sur un projet.

repo-scan

Inventaire complet de ce que contient un repo, fichier par fichier. Quand : audit d'un projet récupéré.

⚡ Skills — Outillage Claude Code (pour aller plus loin)

skill-scout

Cherche si un skill existe déjà (local, marketplace, GitHub) avant d'en créer un. Quand : toujours, avant de créer un skill.

skill-comply

Vérifie que les skills et règles installés sont réellement suivis par Claude. Quand : un skill semble ignoré.

skill-stocktake

Audite la qualité des skills installés. Quand : grand ménage périodique de la bibliothèque.

blueprint

Transforme un objectif en plan de construction détaillé multi-sessions. Quand : gros projet qui s'étale sur plusieurs jours.

plan-orchestrate

Découpe un plan en étapes et prépare la chaîne d'agents pour chacune. Quand : exécuter un plan avec plusieurs agents.

orch-add-feature · orch-build-mvp · orch-change-feature · orch-fix-defect · orch-refine-code · orch-pipeline

Famille de pipelines orchestrés (recherche → plan → tests → code → revue → commit) pour : ajouter une fonctionnalité, démarrer un MVP, modifier un comportement, corriger un bug, refactorer — et le moteur commun. Quand : développement encadré de bout en bout.

team-builder

Assistant interactif pour composer une équipe d'agents et la lancer en parallèle. Quand : mission large à répartir.

team-agent-orchestration

Orchestration d'équipes d'agents façon kanban (qui possède quoi, portes de validation). Quand : gros chantier multi-agents.

dynamic-workflow-mode

Conception de workflows adaptatifs pour agents (avancé). Quand : automatisations sur mesure.

continuous-learning-v2 (+ v1 dépréciée)

Observe les sessions et en tire des "réflexes" réutilisables qui deviennent des skills. Quand : capitaliser automatiquement sur l'expérience. La v1 est conservée mais remplacée par la v2.

rules-distill

Extrait des skills les principes transverses et les condense en règles. Quand : entretien de la bibliothèque.

api-connector-builder

Ajoute un connecteur API en copiant le pattern d'intégration déjà en place. Quand : "encore une intégration" sans réinventer.

🤖 Agents — L'équipe agence web (le pipeline)

directeur-projet

Transforme une demande floue en plan d'action (objectifs, étapes, qui fait quoi). Quand : au démarrage de chaque projet.

directeur-artistique

Définit et valide la direction visuelle (palette, typos, ambiance, cohérence de marque). Quand : avant tout travail graphique.

graphiste

Produit les assets en code : SVG, icônes, variables CSS, états de boutons. Quand : après la direction artistique.

web-designer

Conçoit la structure et la mise en page (sections, hiérarchie, maquette HTML, responsive). Quand : en parallèle du graphiste.

developpeur-front

Code le front : interactions, sliders, menus, formulaires dynamiques. Quand : rendre la maquette vivante.

motion-designer

Anime le site : scroll, transitions, GSAP, Lottie, SVG animé. Quand : après le développement front.

videaste-remotion

Crée de vraies vidéos MP4 en code (intros, reels, bannières animées) avec Remotion. Quand : besoin d'un fichier vidéo, pas d'une animation web.

integrateur-cms

Met le code au bon endroit dans la plateforme cible (Divi/WordPress, Shopify, Webflow…). Quand : passage de la maquette au site réel.

testeur-qa

Teste tout avant mise en ligne (responsive, liens, formulaires, navigateurs) et produit un rapport — il ne corrige pas. Quand : avant chaque livraison.

correcteur-bugs

Diagnostique la cause d'un bug identifié et applique la correction la plus simple. Quand : après le rapport du testeur-qa.

relecteur-seo-accessibilite

Relecture finale SEO + accessibilité (title/meta, Hn, alt, contrastes) avec checklist priorisée. Quand : dernière étape avant publication.

🤖 Agents — Design, SEO & marketing

seo-specialist

Spécialiste SEO complet : audits techniques, balisage, données structurées, plan de remédiation. Quand : mission SEO approfondie (le relecteur, lui, fait la passe finale).

a11y-architect

Architecte accessibilité WCAG 2.2 : conçoit et audite des expériences inclusives. Quand : exigence d'accessibilité forte (marchés publics…).

marketing-agent

Stratège et copywriter : campagnes, positionnement, copies de landing, séquences email, calendriers. Quand : tout livrable marketing.

🤖 Agents — Développement & revue de code

php-reviewer ⭐

Relit le code PHP (sécurité, conventions, performance) — précieux pour WordPress. Quand : toute modification PHP (thème enfant, functions.php).

typescript-reviewer ⭐

Relit le JavaScript/TypeScript (sûreté, async, sécurité web). Quand : tout code JS, même hors framework.

code-reviewer

Relecteur généraliste : qualité, sécurité, maintenabilité. Quand : après chaque développement significatif.

react-reviewer / vue-reviewer

Relecteurs spécialisés React et Vue (hooks, réactivité, performance). Quand : projets React ou Vue uniquement.

react-build-resolver / build-error-resolver

Réparent les builds cassés (erreurs de compilation, config) avec le minimum de changements. Quand : "ça ne build plus".

code-simplifier

Simplifie le code sans changer son comportement (lisibilité, cohérence). Quand : après un développement qui a "gonflé".

code-architect / architect

Conçoivent l'architecture d'une fonctionnalité ou d'un système avant de coder. Quand : nouvelle fonctionnalité structurante.

code-explorer

Explore un code existant en profondeur (chemins d'exécution, dépendances). Quand : comprendre avant de modifier.

refactor-cleaner

Supprime le code mort et les doublons en sécurité. Quand : nettoyage d'un projet qui a vécu.

performance-optimizer

Traque les lenteurs : poids des pages, goulots d'étranglement, rendu. Quand : un site lent, un mauvais score Lighthouse.

security-reviewer

Détecte les failles (injections, secrets exposés, OWASP). Quand : code qui gère des entrées utilisateur ou des données sensibles.

silent-failure-hunter

Chasse les erreurs "avalées" silencieusement (le bug qui ne dit rien). Quand : comportement bizarre sans message d'erreur.

comment-analyzer / type-design-analyzer

Analysent respectivement la justesse des commentaires et la conception des types. Quand : revue de qualité poussée — usage occasionnel.

🤖 Agents — Tests, qualité & organisation

e2e-runner

Écrit et lance des tests de bout en bout dans un vrai navigateur (captures, vidéos). Quand : vérifier les parcours critiques automatiquement.

tdd-guide

Fait respecter la méthode "tests d'abord" pendant le développement. Quand : fonctionnalité qui doit être béton.

pr-test-analyzer

Évalue si les tests d'une pull request couvrent vraiment les risques. Quand : relecture de PR importante.

spec-miner

Extrait les règles de fonctionnement implicites d'un code existant. Quand : documenter un projet hérité sans specs.

planner

Planificateur expert pour fonctionnalités complexes (l'équivalent anglophone du planificateur local de Maxence). Quand : avant un chantier non trivial.

doc-updater

Met à jour la documentation et les README d'un projet. Quand : après de gros changements.

docs-lookup

Va chercher la documentation à jour d'une librairie et répond avec des exemples. Quand : "comment on utilise X ?"

🧭 Par où commencer quand on débute : les 11 agents de l'équipe agence + les skills divi-builder, seo, ui-ux-design-pro et accessibility couvrent 90 % du quotidien. Le reste se découvre au fil des besoins — et en cas de doute, décrire simplement la tâche : Claude choisira les bons outils tout seul.

L'écosystème Claude en entier