Do I need a separate browser installed?

Yes, this skill requires the Chrome DevTools MCP server and a compatible Chrome or Chromium browser to perform automation and testing tasks.

Which AI models are used for visual analysis?

The skill supports various vision models via OpenRouter/Claudish, including Qwen3-VL, Gemini 2.5 Flash, and GPT-4o for high-accuracy design validation and spatial reasoning.

Can it detect console errors automatically?

Yes, the skill can systematically list and monitor console messages, including errors and warnings, to help identify runtime issues during UI testing.

How does it help with design fidelity?

It captures screenshots of your implementation and uses AI vision models to compare them against design requirements, identifying spacing inconsistencies, typography issues, and layout shifts.

Browser UI Debugger

Name: Browser UI Debugger
Author: MadAppGang

byMadAppGang

•

177

브라우저 자동화

Automates UI testing and visual design validation using Chrome DevTools and AI-powered visual analysis.

소개

This skill empowers Claude to interact directly with a real browser environment to verify UI implementations, detect layout shifts, and debug console errors. By integrating Chrome DevTools MCP and advanced vision-language models, it enables automated visual regression testing, design fidelity checks, and comprehensive debugging reports, ensuring that frontend features match design specifications and function correctly across different states.

주요 기능

AI-powered visual analysis for design fidelity checks
Real-time UI functionality testing via Chrome DevTools
Automated console error and network request monitoring
Visual regression detection and layout shift analysis
177 GitHub stars
Multi-model vision support (GPT-4o, Qwen VL, Gemini) for deep inspection

사용 사례

Investigating and reproducing complex frontend bugs and console errors
Verifying UI feature implementation after code changes
Automated design-to-implementation visual comparisons

소개

주요 기능

AI-powered visual analysis for design fidelity checks
Real-time UI functionality testing via Chrome DevTools
Automated console error and network request monitoring
Visual regression detection and layout shift analysis
177 GitHub stars
Multi-model vision support (GPT-4o, Qwen VL, Gemini) for deep inspection

사용 사례

Investigating and reproducing complex frontend bugs and console errors
Verifying UI feature implementation after code changes
Automated design-to-implementation visual comparisons