Design X-Ray

Inspect and reverse-engineer the design system of any website — typography, colors, spacing, components and more.

What’s New in Design X-Ray 1.2.3 Design X-Ray is now more powerful, more practical, and better suited for real design system analysis. New features include: • Design Insights dashboard with consistency, maturity, theming, and accessibility scores • Saved scans, recent scan history, and scan comparison • Pin analysis so results stay available while browsing • Component Inventory for detecting UI patterns such as buttons, cards, inputs, modals, dropdowns, tabs, navigation, and tables • Component Screenshot Engine to capture detected UI components and export them as a ZIP • Full-page screenshot capture with PNG download • Copy element code directly from detected visual elements • Copy live page source, including HTML and CSS, for use with AI coding tools • CSS Variable Extraction from real website styles • Design System Export in multiple formats including JSON, Tailwind, and CSS Variables • Pro export formats for Cursor prompts, SCSS, Styled Components, Chakra UI, and shadcn/ui • Improved accessibility audit with WCAG contrast checks, missing alt text, labels, landmarks, heading order, and more • Icon system detection for libraries like Font Awesome, Material Icons, Lucide, and others • Automatic logo and favicon extraction • Improved dark mode detection and responsive breakpoint analysis This update makes Design X-Ray more than a visual scanner — it is now a complete design system inspection, documentation, and export tool for designers, developers, and product teams.