Extension Overview

The UI Inspect Chrome extension is the most comprehensive free design QA toolkit available, with 35+ tools across 30 feature modules.

Feature Categories

Inspect & Measure

• Element Picker — Hold Ctrl to pick any element, see box model and computed styles
• Box Model Visualization — Margin, border, padding, content with colored overlays
• Alignment Guides — Full-page crosshair lines from element edges
• Distance Measurement — Red/blue lines showing spacing between selected and hovered elements
• Sibling Spacing — Auto-detect gaps between sibling elements (flex/grid aware)
• Rulers & Guides — Pixel rulers with draggable cyan guide lines
• Element Outlines — Toggle CSS outlines on all page elements (like Pesticide)
• Layout Visualizer — Grid tracks, flex items, gaps, and direction arrows

Edit & Export

• Visual CSS Editor — 7 property sections with number scrubbing, arrow keys, undo/redo
• Text Editor — Double-click to edit text content inline (Enter to confirm, Esc to revert)
• Element Manipulator — Drag-to-move and resize handles with live size labels
• Copy Selector/Styles/HTML/Tailwind — One-click copy from element toolbar
• Changes Tracker — Export as CSS, Tailwind classes, AI prompt, or CSS file
• Design Tokens — Extract page colors, fonts, spacing, radii, shadows as CSS/Tailwind/JSON

Analyze & Audit

• Accessibility Checker — WCAG contrast, ARIA, headings, touch targets, focus indicators, alt text
• Pseudo-State Inspector — View :hover/:focus/:active style diffs, force pseudo-states
• Eye Dropper — Screenshot-based color picker with HEX/RGB/HSL display
• Font Inspector — WhatFont-style hover to identify fonts, click to pin for comparison
• Color Palette — Extract all colors from element tree (text, bg, border, shadow)
• Page Overview — Scan all colors and fonts used across the page
• Asset Extractor — Find all images, SVGs, videos, background images with download/copy

Preview & Compare

• Responsive Preview — Mobile/tablet/desktop viewport width overlay
• Design Comparison — Upload design mockup, overlay on page, crop and analyze
• Isolate Mode — Dim everything except the selected element

AI & Integration

• AI Prompt Generation — 5 prompt types (fix-styles, match-design, responsive, accessibility, general)
• MCP Bridge — Connect to MCP server for automated fix generation and code application
• Cursor IDE Workflow — Copy prompts optimized for Cursor AI agent

Navigation & UI

• Floating Toolbar — Draggable, collapsible dark glassmorphism toolbar with all tools
• Popup Page — Quick-start from toolbar icon with feature grid
• Side Panel — Full inspector with AI tab, DOM tree, and settings
• DOM Tree — Interactive tree with search, hover-to-highlight, click-to-select
• Breadcrumb — Navigate up the DOM via parent tag clicks
• Shortcuts Overlay — Press ? for complete keyboard shortcuts reference
• Draw/Annotate — Freehand, rectangle, circle, arrow, text annotations with export
• Onboarding — Welcome hint on first use with quick-start tips

Installation

From source (development)

pnpm --filter @ui-inspect/extension build

Development mode

For hot-reload during development:

pnpm --filter @ui-inspect/extension dev

Architecture

Feature modules (30)

accessibility, ai-bridge, asset-extractor, breadcrumb, changes-tracker,
comparison, css-editor, design-tokens, diff, distance, dom-tree, draw,
element-manipulator, element-toolbar, eye-dropper, font-inspector,
inspector, isolate, layout-visualizer, onboarding, outline, page-overview,
panel, pseudo-states, responsive, rulers, shortcuts, spacing,
text-editor, widget

Keyboard Shortcuts

Permissions