How does visual debugging help in development?

It allows Claude to navigate to your local or live site, inject debug outlines or styles, and capture screenshots to identify precisely where CSS or layout logic is failing.

Can I convert screenshots to code with this skill?

Yes, it facilitates screenshot-to-code workflows by capturing visual snapshots and accessibility trees to help Claude generate accurate frontend implementations.

Which browser engines does this skill support?

This skill is designed to work with MCP-compatible browser automation tools, most commonly Playwright and Puppeteer.

What is the Browser DevTools MCP skill?

It is a specialized capability for Claude Code that enables browser automation and UI inspection using the Model Context Protocol (MCP) to bridge design and code.

Browser DevTools & UI Inspection

Name: Browser DevTools & UI Inspection
Author: HermeticOrmus

byHermeticOrmus

•

브라우저 자동화

Automates browser interactions and UI inspection to bridge the gap between visual design and frontend implementation.

This skill empowers Claude Code to interact directly with live web environments using the Model Context Protocol (MCP). It enables advanced workflows such as capturing high-fidelity screenshots for code generation, extracting computed CSS styles, identifying design tokens, and performing visual debugging of complex layouts. By integrating Playwright and Puppeteer capabilities, it allows developers to automate UI analysis and visual regression testing directly within their AI-powered coding sessions, making it an essential tool for frontend engineers and UI/UX designers.

주요 기능

01Live UI screenshot capture and visual analysis

02Programmatic CSS and computed style extraction

035 GitHub stars

04Design token and typography pattern identification

05Visual debugging via layout overlay injection

06Automated screenshot-to-code conversion workflows

사용 사례

01Debugging responsive layout issues with live visual feedback

02Extracting design systems and tokens from live web environments

03Recreating complex UI components from existing production websites

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hermeticormus/libreuiux-claude-code browser-devtools-mcp

For use in Claude.ai and ChatGPT

Download Skill