Design System Inspector

About

Design System Inspector - Intuitive UI Verification Tool

Validate your web implementation faster and more beautifully. Design System Inspector (DSI) is a professional tool that analyzes web elements instantly with a simple hover, bridging the gap between design and code.

[Key Features]

Intuitive Control: Hover to preview element details. Click to "Lock" an element and instantly measure the distance to any other element with pixel-perfect precision.

Smart Noise Reduction: DSI intelligently filters information. It hides font details on images and ignores empty properties, keeping the UI minimal and focused on what matters.

Deep Scan Logic: Visualizes individual corner radii (TL/TR/BR/BL) and border orientations just like in Figma. Spot implementation discrepancies in seconds.

DOM Navigation: Use Up/Down arrow keys to traverse parent or child elements effortlessly. Perfect for inspecting complex nested components.

[Inspection Capabilities]

Dimensions: Width × Height (Pixel perfect)

Token Check: CSS Class names for design system validation

Spacing: Padding, Margin, and distance between elements

Typography: Font Family, Size, Weight, Line-height, and Letter-spacing

Advanced Styles: Individual Corner Radius, Border sides visualization, and Colors (Text/Fill)

Stop wasting time digging through clunky developer tools. Elevate your design review workflow with DSI.