UI Developer Kit

UI toolkit for developers — inspect fonts, colors, contrast, spacing, dimensions, grids, performance, and more

UI Developer Kit is a professional inspection toolkit that helps front-end developers and designers analyze any webpage in real time. Click the extension icon on any page to open the toolkit panel. Inspect fonts, pick colors, measure spacing, check accessibility contrast ratios, overlay grids, and more — all without leaving your browser. TOOLS INCLUDED: • Font Inspector — Identify font family, size, weight, line-height, and letter-spacing on hover • Color Inspector — Pick and analyze colors from any element with HEX, RGB, and HSL output • Contrast Checker — Verify WCAG AA/AAA compliance for text and background color combinations • Dimension Inspector — Measure width, height, padding, and margins of any element • Spacing Inspector — Visualize padding, margin, and gap values with a box-model overlay • Grid Overlay — Project a configurable grid on any page to verify alignment • Ruler Tool — Draw rulers between elements to measure distances precisely • CSS Inspector — View all computed CSS properties for any selected element • Performance Monitor — Track page load metrics and Core Web Vitals • SEO Inspector — Analyze meta tags, heading structure, and on-page SEO signals • Accessibility Checker — Audit ARIA labels, roles, and WCAG compliance • Layout Visualizer — Highlight flexbox and grid containers with their properties • Viewport Tester — Preview responsive breakpoints without resizing your browser FEATURES: • Activate tools with keyboard shortcuts for fast workflows • Export corporate-grade audit reports (PDF and HTML) • Works on any webpage — no configuration required • Lightweight — tools only activate when you open them • Privacy-first — no data leaves your browser except license validation