Designer Dev Mode by spphhc

Designer Dev Mode is a Chrome extension that brings a Figma Dev Mode inspired inspection workspace directly into the browser. It helps designers, developers, and product teams analyze live websites visually, inspect layout structure, review spacing, extract design tokens, find assets, and understand the CSS behind selected elements.

After opening the extension on a webpage, Designer Dev Mode scans the visible page and builds a structured layer tree of detected elements. You can select elements from the layer list or directly from the page, then inspect their size, margin, padding, gap, typography, colors, borders, radius, shadows, computed CSS, and HTML attributes. Visual overlays make it easier to understand spacing and element boundaries directly on the website.

The extension also detects design tokens from CSS variables and inferred page styles, including colors, typography, spacing, border radius, and shadows. Tokens can be reviewed, edited, and exported as JSON. Selected elements can be adjusted live through the inspector, including font family, font size, weight, line height, letter spacing, text color, background color, border styling, opacity, dimensions, layout, spacing, and corner radius.

Designer Dev Mode includes asset detection for images, icons, inline SVGs, media sources, and background images, with download support for collected assets. It also provides accessibility checks with helpful hints, an integrated console view for page logs and JavaScript execution, per-site autosaving for design changes, and a reset option to restore edited styles.