Design System Inspector

Inspect design tokens, spacing, and component details with a sleek overlay interface.

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.