Designer's Little Helper

Developer & designer toolkit: Grid, CSS Inspector, Color Picker, Contrast Checker, Responsive Testing & more.

Designer's Little Helper — A comprehensive toolkit for web developers and designers, built directly into your browser. 🎨 12 PROFESSIONAL TOOLS IN ONE EXTENSION ▸ Grid Overlay (Ctrl+Shift+G) Customizable grid overlay for pixel-perfect alignment. Configure columns, rows, gutters, and colors. Supports per-domain settings. ▸ CSS Inspector (Ctrl+Shift+I) Deep CSS analysis powered by Chrome DevTools Protocol. View computed styles, matched rules, CSS variables, and human-readable explanations for any element. ▸ Color Picker (Ctrl+Shift+K) Pick any color from the page using the EyeDropper API. View in HEX/RGB/HSL formats, see color harmonies (complementary, triadic, analogous), and keep a history of picked colors. ▸ Contrast Checker (Ctrl+Shift+C) Automated WCAG accessibility contrast testing. Scans text, links, and UI components against AA and AAA standards. Highlights failing elements directly on the page. ▸ Responsive Testing (Ctrl+Shift+D) Test responsive designs with 20+ device presets (iPhone, iPad, Android, tablets). Custom viewport dimensions, portrait/landscape rotation, and screenshot capture. ▸ Layout Inspector (Ctrl+Shift+L) Visualize box model, Flexbox layouts, CSS Grid, margins, padding, and spacing. Color-coded overlays for quick layout debugging. ▸ Ruler & Guides (Ctrl+Shift+R) Pixel-accurate rulers on page edges with draggable alignment guides. Measure positions and distances visually. ▸ Mark & Measure (Ctrl+Shift+M) Click elements to see dimensions, distances, and positions. Annotate measurements and capture screenshots with annotations. ▸ Type X-Ray (Ctrl+Shift+T) Typography inspector that visualizes the font hierarchy across the page. See font family, size, weight, and line-height at a glance. ▸ State Visualizer (Ctrl+Shift+S) Visualize interactive element states (hover, focus, active, disabled) and pseudo-elements without manually triggering them. ▸ Vision Simulator (Ctrl+Shift+V) Simulate 8 types of color vision deficiencies (protanopia, deuteranopia, tritanopia, and more) to test accessibility for users with color blindness. ▸ Edit Tool (Ctrl+Shift+E) Direct text editing on any page with visual highlights. Quick prototyping and content testing without touching source code. ⚡ KEY FEATURES • Dark-themed floating panel — stays out of your way • Keyboard shortcuts for every tool • All tools work on any website • Settings persist across sessions • Customizable toolbar — reorder and hide tools • Zero impact on page performance when inactive • Works entirely client-side — no data sent anywhere 🔒 PRIVACY Designer's Little Helper does not collect, transmit, or store any user data. All processing happens locally in your browser. Settings are stored using Chrome's local storage API. Built for designers who code and developers who design.