Les 4 connecteurs à utiliser avec Claude pour créer un site

00 Le workflow

Un outil pour chaque étape du site 🔌

Ensemble, ils donnent à Claude le contexte, les visuels et un vrai navigateur pour vérifier son travail.

Connecteur

Son rôle dans le projet

Firecrawl

Chercher des informations à jour, lire plusieurs pages et analyser les sites concurrents.

Wispr Flow

Retrouver les notes, résumés et transcriptions de tes réunions client.

Higgsfield

Créer des images et des vidéos depuis la conversation, avec les crédits de ton compte.

Playwright

Ouvrir le site dans un vrai navigateur, cliquer, naviguer et repérer ce qui ne fonctionne pas.

01 La recherche

Connecte Firecrawl pour préparer le terrain 🔎

Firecrawl sert avant de construire. Claude peut chercher les concurrents, récupérer le contenu de leurs pages et comparer leurs offres, leur structure et leurs messages. Le but est de comprendre le marché, pas de copier leur design ou leur texte.

1. 1

   Ouvre les connecteurs de Claude

   Va dans Personnaliser, Connecteurs, puis Ajouter un connecteur personnalisé.

2. 2

   Nomme-le Firecrawl

   Colle l’adresse affichée dans le bloc suivant. Ne place jamais une clé secrète dans une conversation.

3. 3

   Autorise ton compte

   Claude ouvre Firecrawl dans ton navigateur. Connecte-toi et accepte l’accès.

4. 4

   Active-le dans le chat

   Dans une conversation, clique sur +, Connecteurs, puis active Firecrawl.

https://mcp.firecrawl.dev/v2/mcp-oauth

Avec Firecrawl, trouve cinq concurrents directs de [mon activité] dans [ma zone ou mon marché]. Pour chacun, relève la promesse principale, les services, les preuves de confiance, les appels à l’action et la structure de la page d’accueil. Termine par les éléments utiles à reprendre comme bonnes pratiques, sans copier leurs textes ni leur identité visuelle.

Firecrawl MCP

Voir les modes de connexion et les fonctions disponibles.

Documentation officielle

02 Le brief client

Connecte Wispr Flow pour retrouver les réunions 🎙️

Wispr Flow peut donner à Claude un accès en lecture aux réunions enregistrées avec Notetaker : résumés, notes, transcriptions, participants et tâches. Claude ne peut pas modifier ou supprimer ces réunions.

1. 1

   Vérifie que Notetaker est disponible

   Sur Mac ou Windows, ouvre Wispr Flow avec le compte qui contient les réunions.

2. 2

   Ouvre Réglages, puis MCP

   Choisis Ajouter à Claude. Wispr Flow ouvre automatiquement la page de connexion.

3. 3

   Autorise l’accès

   Connecte-toi avec Google, Apple, Microsoft ou le SSO de ton entreprise, puis confirme.

4. 4

   Active Wispr Flow dans le chat

   Clique sur +, Connecteurs, puis active Wispr Flow pour la conversation.

https://api.wisprflow.ai/connect/mcp

Avec Wispr Flow, retrouve ma réunion la plus récente avec [nom du client]. Fais-moi un brief du site avec : l’objectif, le public, l’offre, les pages demandées, les références citées, les contraintes, les décisions prises et les questions encore ouvertes. N’invente rien si une information n’a pas été dite.

03 Les visuels

Connecte Higgsfield pour créer sans quitter Claude ✦

Higgsfield permet à Claude de lancer des générations d’images et de vidéos depuis la conversation. Tu décris le visuel, Claude appelle le modèle adapté et le résultat revient dans le chat. Les générations utilisent les crédits de ton compte Higgsfield.

1. 1

   Ouvre les connecteurs de Claude

   Va dans Personnaliser, Connecteurs, puis Ajouter un connecteur personnalisé.

2. 2

   Nomme-le Higgsfield

   Colle l’adresse officielle affichée dans le bloc suivant.

3. 3

   Connecte ton compte

   Clique sur Connecter, puis autorise Higgsfield dans la fenêtre qui s’ouvre.

4. 4

   Active-le pour le projet

   Dans le chat du site, active Higgsfield depuis le menu +, Connecteurs.

https://mcp.higgsfield.ai/mcp

Avec Higgsfield, crée une image horizontale pour la section principale d’un site de [activité]. Direction artistique : [style], palette [couleurs], lumière [ambiance]. Le sujet doit rester sur la droite et laisser une grande zone calme à gauche pour le titre et le bouton. Aucun texte ni logo dans l’image.

04 Les tests

Installe Playwright pour vérifier le site ✓

Playwright ne lit pas seulement la page : il peut cliquer, remplir un formulaire, changer de page et constater le résultat.

Ce connecteur fonctionne en local. Il faut Claude Desktop ou Claude Code et Node.js 20 ou une version plus récente. Il ne s’ajoute pas comme les trois adresses web précédentes.

1. 1

   Installe Node.js 20 ou plus récent

   Si tu ne sais pas si tu l’as, demande à Claude de vérifier la version installée avant de continuer.

2. 2

   Ouvre la configuration MCP locale

   Dans Claude Desktop, ouvre Réglages puis Développeur. Dans Claude Code, utilise le menu /mcp.

3. 3

   Ajoute la configuration ci-dessous

   Enregistre-la, puis relance Claude si le connecteur n’apparaît pas.

4. 4

   Lance un premier test

   Le navigateur se télécharge automatiquement lors de la première utilisation.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Avec Playwright, ouvre [adresse du site]. Teste le menu, tous les boutons, les liens, le formulaire et la navigation sur mobile et ordinateur. Signale chaque problème avec la page, l’action effectuée, le résultat obtenu et le résultat attendu. Ne modifie encore aucun fichier.

Playwright MCP

Consulter l’installation officielle et les exemples de test.

Microsoft · open source

05 Le projet complet

Fais-les intervenir dans le bon ordre →

1. 1

   Comprendre le marché

   Firecrawl analyse les concurrents et les attentes visibles dans les résultats.

2. 2

   Reconstituer la demande

   Wispr Flow transforme les réunions en brief vérifiable.

3. 3

   Construire le site

   Claude crée les pages à partir de ces deux sources, sans inventer les informations manquantes.

4. 4

   Créer les images

   Higgsfield produit uniquement les visuels réellement nécessaires au design.

5. 5

   Tester avant de livrer

   Playwright parcourt le site et documente les problèmes à corriger.

Je veux créer le site de [client]. Commence par lire mes réunions pertinentes avec Wispr Flow et transforme-les en brief, sans inventer les informations absentes. Utilise ensuite Firecrawl pour analyser cinq concurrents et relever les bonnes pratiques de structure, de preuve et de conversion, sans copier leur design ni leur texte. Propose le plan du site et attends ma validation avant de coder. Quand le design est validé, utilise Higgsfield uniquement pour les visuels manquants. Termine par un test complet avec Playwright sur ordinateur et mobile, puis corrige les problèmes confirmés.