Media
5 items
Description
Inspect and recreate any website's UI with live CSS inspection, Tailwind mapping, colors, and a11y audits. PixelLayer is a modern frontend developer extension built to inspect, understand, and recreate any website's UI faster than opening DevTools. Instead of sifting through complex DevTools tabs, PixelLayer provides an instant floating inspector to inspect box models, map CSS styles directly to Tailwind CSS utility classes, extract full color palettes, analyze page typography, and audit WCAG 2.1 accessibility contrast standards. KEY FEATURES: 1. ELEMENT INSPECTOR & BOX MODEL • Hover over any element on a webpage to see a live viewport-aligned bounding box. • Click to lock onto elements and view width, height, margin, padding, border-radius, and borders. • Deep inspection for Flexbox (direction, align, justify, gap) and Grid layouts. 2. TAILWIND CSS MAPPER • Automatically maps computed styles (padding, margin, font sizes, weights, rounded corners) into matching Tailwind CSS utility classes. • One-click copying for CSS rules, Tailwind classes, and computed properties with instant floating Toast feedback. 3. COLOR PALETTE EXTRACTION • Scans the active webpage DOM to aggregate top background, text, and border colors. • Filter colors by category (All, Background, Text, Border) and click any swatch to copy its Hex value. 4. FONT INSPECTOR & PREVIEW • Detects used font families across the page and classifies them (Google Fonts, Web Fonts, System Fonts). • Preview live sample text rendered in each detected font family along with used font weights. 5. WCAG 2.1 ACCESSIBILITY & CONTRAST AUDIT • Calculates relative luminance contrast ratios between text and background colors. • Displays WCAG AA and AAA pass/fail compliance badges for normal and large text. • Scans page DOM for basic accessibility issues such as missing image alt attributes or unlabelled buttons. 6. FRAMEWORK DETECTION • Identifies active frontend stack signatures including React, Next.js, Tailwind CSS, Material UI (MUI), Chakra UI, and shadcn/ui. • Renders dynamic technology badges directly in the extension header. Designed for frontend engineers, UI/UX designers, and web developers looking to inspect and recreate web layouts efficiently.