Design Lens - Page Design Inspector

Inspect colors, fonts, images, and element sizes on the current webpage for faster design review.

Design Lens is a lightweight page design inspector built for designers, frontend developers, product builders, and QA reviewers. It helps you quickly inspect visual details on the active webpage without switching into a heavy design or developer workflow. After you click the extension, you can check page colors, typography, image metadata, and basic element measurements directly on the page. Core features: Pick visible page colors and copy HEX, RGB, or HSL values. Inspect text styles including font family, size, line height, weight, and color. Scan images for natural size, displayed size, format, alt text, and oversized asset warnings. Check element width, height, and simple spacing with a lightweight ruler mode. Copy individual results, copy recent samples, or export collected samples. Save language, theme, hover guides, and recent samples locally. How to use: Open any supported webpage. Click the Design Lens extension. Choose Color, Font, Images, Ruler, or Element mode. Start inspecting and click page elements to collect visual details. Copy or export the results you need. Privacy: Design Lens runs locally in your browser after you click the extension. It does not upload webpage content, screenshots, browsing history, cookies, account data, or user files. Preferences and recent samples are stored locally using browser storage. Limitations: Design Lens is a visual inspection helper. It does not edit webpages, compress images, generate design files, capture full-page screenshots, or sync data to an account.