Vérifier le responsive design avec votre IA

Indiquez simplement à votre IA l'URL et les tailles de viewport à tester. Elle utilisera ScreenshotOne pour capturer la page à ces dimensions précises. Cela vous permet de voir exactement comment les éléments se déplacent ou se chevauchent entre le mobile et le bureau. Vous obtenez ainsi un aperçu visuel du comportement de votre mise en page sur différents appareils.

1. 01

   Définir la cible

   L'IA reçoit l'URL et les dimensions d'appareils spécifiques que vous souhaitez tester.

   take_viewport_screenshot
2. 02

   Ajuster les viewports

   L'agent demande à l'outil de redimensionner la fenêtre du navigateur pour correspondre aux besoins mobile, tablette ou bureau.

   take_viewport_screenshot
3. 03

   Capturer les images

   L'outil effectue une capture d'écran de haute qualité de la page rendue à cette largeur précise.

   take_viewport_screenshot
4. 04

   Analyser le visuel

   L'IA examine les images obtenues pour trouver les éléments qui ne s'adaptent pas correctement à l'écran.

   take_viewport_screenshot

ScreenshotOne Connector

Tout est prêt. Choisissez votre client MCP et suivez les instructions de configuration.

Lien du connecteurhttps://edge.vinkius.com/vk_preview_JUwwYa83yWRRMbOnbxUmQsFRB6tFeXnZOYxfQrXu/mcpCopier

Claude Desktop

Suivez les étapes ci-dessous pour vous connecter en quelques secondes.

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — ScreenshotOne capabilities are ready to use.

Configuration · claude_desktop_config.jsonCopier

{
  "mcpServers": {
    "screenshotone-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_JUwwYa83yWRRMbOnbxUmQsFRB6tFeXnZOYxfQrXu/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

Cliquez simplement sur le lien pour connecter votre compte. Vos identifiants restent chiffrés et sécurisés, et vous pouvez immédiatement confier vos tâches de test de mise en page à votre IA.

• 01

  L'IA peut-elle corriger le CSS pour moi ?

  Non. L'IA peut identifier des problèmes de mise en page via les captures d'écran, mais elle ne peut pas modifier le code de votre site.

• 02

  L'IA enregistre-t-elle des vidéos du défilement ?

  Non. Cet outil spécifique est conçu pour prendre des captures d'écran statiques à des tailles de viewport précises.

• 03

  Puis-je tester des éléments spécifiques plutôt que toute la page ?

  Oui, vous pouvez demander à votre IA de se concentrer sur des parties précises de la page via le processus de capture du viewport.

• 04

  L'IA téléchargera-t-elle automatiquement ces images sur mon GitHub ?

  Non. L'IA vous transmet les captures d'écran dans le chat, et c'est à vous de décider où les enregistrer ou les charger.

• 05

  Combien de tailles d'écran différentes puis-je tester à la fois ?

  Vous pouvez demander autant de largeurs différentes que nécessaire dans un seul prompt.

• D'autres questions sur ScreenshotOne ? La page du connecteur y répond. Voir toutes les capacités du connecteur ScreenshotOne