Faire des captures d'écran avec Claude Code
Claude Code écrit votre code, mais il ne voit pas le résultat dans un navigateur. Le serveur MCP Shotbot lui donne des yeux : une commande pour l'installer, puis vous demandez vos captures en langage naturel, et Claude voit le rendu réel de la page.
> Capture la home de permalink.fr et dis-moi si le hero s'affiche bien ● Je capture la page avec Shotbot. capture(url: "https://www.permalink.fr/", viewport_width: 1280) ✓ rendu en 2s · https://static.shotbot.net/8/8f/8f3cA1b2….jpg ● Le hero s'affiche correctement : le titre est lisible, le bouton d'appel à l'action est visible, aucune bannière cookie ne masque le contenu. > _
Le serveur MCP expose quatre outils à Claude Code :
capture (capturer une URL),
get_status (suivre une capture),
batch (jusqu'à 500 URLs d'un coup) et
account_status (plan, crédits, quota).
Claude les appelle tout seul quand votre demande l'exige.
Installation en une ligne
Une seule commande, sans Node.js, sans npm, sans fichier local. Remplacez
votre-cle par votre clé API Shotbot.
claude mcp add --scope user shotbot --transport http "https://api.shotbot.net/mcp?key=votre-cle"Vérifiez que le serveur est bien enregistré :
claude mcp list
shotbot doit apparaître dans la liste. C'est prêt : ouvrez Claude Code
et demandez une capture. Le scope user rend l'outil disponible dans tous vos
projets ; retirez --scope user pour le limiter au projet courant.
Questions à poser à Claude
Pas de syntaxe à apprendre. Demandez en langage naturel, Claude choisit l'outil et les bonnes options. Quelques exemples qui marchent directement :
Voir une page
Capture permalink.fr et montre-moi le résultat.
À quoi ressemble la page d'accueil de mon site en ce moment ?
Comparer mobile et desktop
Capture mon site en 390 px puis en 1280 px et dis-moi si le menu mobile fonctionne.
Vérifier le mode sombre
Capture cette page en mode sombre et vérifie que le texte reste lisible sur le fond.
Capturer en pleine page
Prends une capture pleine page de la doc et exporte-la en PDF.
Capturer plusieurs URLs
Capture ces 5 pages concurrentes en une seule fois et liste-moi les liens.
(outil batch)
Vérifier son compte
Combien de captures Shotbot me reste-t-il ce mois-ci ?
(outil account_status)
Comme Claude Code lit les images, il ne se contente pas de lancer la capture : il regarde réellement le rendu et vous répond dessus (lisibilité, mise en page, élément manquant, bannière qui gêne).
Exemple d'utilisation : détecter les bugs CSS
C'est là que Claude Code prend tout son sens : il ne se contente pas de capturer, il corrige. Demandez-lui de vérifier une page à plusieurs largeurs : il capture chaque viewport, repère le débordement ou le chevauchement, modifie votre CSS, puis recapture pour confirmer que c'est réglé. Une vraie boucle : voir, corriger, vérifier.
> Mon header déborde sur mobile. Capture la page à 390, 768 et 1280 px ● Je capture les trois largeurs. capture(url: "https://mon-site.fr/", viewport_width: 390) capture(url: "https://mon-site.fr/", viewport_width: 768) capture(url: "https://mon-site.fr/", viewport_width: 1280) ● À 390 px, le menu passe sous le logo et déborde de 40 px à droite. La cause : .nav a un min-width: 720px. Je corrige. ● Edit style.css · recapture à 390 px · le header tient maintenant dans la largeur. > _
Les largeurs 390, 768 et 1280 px sont disponibles sur le compte gratuit. Shotbot Pro débloque n'importe quelle largeur de 280 à 3840 px, pour tester un breakpoint précis.
Audit complet : balayer toute une plage de breakpoints
Vous suspectez un bug quelque part entre 280 et 640 px mais vous ne savez pas exactement où ? Demandez à Claude de tout tester d'un coup. Il lance les captures en batch, lit chaque image, et vous dresse la liste précise de ce qui casse, à quel pixel, et pourquoi : sans que vous ayez à redimensionner votre navigateur une seule fois.
> Scanne tous les viewports de 280 à 640 px par pas de 20 px et trouve tous les bugs CSS ● Je lance 19 captures en parallèle. batch(19 viewports · 280 → 640 px · mon-site.fr/) ✓ 19 captures · 7s ● Lecture de 19 images… 280-300 px logo déborde de 14 px à droite - .site-logo sans max-width 380 px bouton CTA sur 2 lignes - padding-inline: 2rem trop large 520-560 px scroll horizontal : gap: 1.5rem fait déborder la grille à 2 colonnes ● 3 corrections dans style.css. Je vérifie aux viewports critiques. ✓ 280 px · ✓ 380 px · ✓ 520 px · ✓ 560 px - aucun débordement. > _
Les 19 captures partent en une seule requête via l'outil batch.
Les viewports personnalisés de 280 à 3840 px sont disponibles avec Shotbot Pro.
Les quatre outils
capture: capture n'importe quelle URL publique. Options : format (jpg, png, webp, avif, pdf),viewport_width, pleine page,color_scheme,wait, presets, et les options Shotbot Pro (sélecteur CSS, gestion des cookies, auth HTTP, blocage pub, captures géolocalisées).get_status: suit une capture par son token (queued,processing,done,failed) et renvoie l'URL de l'image une fois prête.batch: jusqu'à 500 URLs (5000 avec Shotbot Pro) en une requête atomique, idéal pour comparer des pages ou archiver un site entier.account_status: plan (gratuit ou Pro), solde de crédits et quota mensuel.
Gratuit ou Shotbot Pro
Le serveur MCP fonctionne dès le compte gratuit : 200 captures par mois, format JPG, viewports 390 / 768 / 1280 px, attente jusqu'à 5 secondes. Shotbot Pro débloque tous les formats, les viewports personnalisés jusqu'à 3840 px, le découpage par sélecteur CSS, la gestion des bannières cookies, l'authentification HTTP, le blocage des publicités et les captures géolocalisées. Claude ne filtre rien : c'est l'API qui contrôle l'éligibilité et renvoie une erreur claire si une option nécessite Shotbot Pro.
Commencer
Compte gratuit avec 200 captures par mois. Pas de carte bancaire. Clé API disponible immédiatement après inscription.