Skip to main content
DesignSnap icon

DesignSnap

DesignSnap is the all-in-one design inspector for UI/UX designers and developers. No more digging through DevTools or using multiple extensions! ✨ KEY FEATURES - Hover to Inspect - Simply hover over any element to see its complete design specs - Colors - Background and text colors with automatic HEX conversion - Typography - Font family, size, weight, and line height - Dimensions - Width and height in pixels - Spacing - Margin and padding values - Border Radius - See rounded corner values - One-Click Copy - Click any value to copy it instantly - Keyboard Shortcut - Toggle on/off with Ctrl+Shift+E (Windows/Linux) or ⌘+Shift+E (Mac) - Remembers State - Stays off until you need it, across all tabs šŸŽÆ PERFECT FOR - UI/UX Designers - Frontend Developers - Web Developers - Design Students - Anyone extracting design specs from websites ⚔ HOW TO USE - Click extension icon → Turn ON - Hold Ctrl (or ⌘ on Mac) + move mouse to inspect elements - Release Ctrl to lock panel in place - Click any value to copy it - Hold Ctrl again to inspect more elements - Press Ctrl+E to turn off šŸŽØ BEAUTIFUL DESIGN Modern, clean interface with smooth animations. The overlay appears next to elements so you can always see what you're inspecting. šŸ”’ PRIVACY FOCUSED DesignSnap runs completely locally. No data is collected, stored, or sent to any servers. No account required. šŸ’” LIGHTWEIGHT Less than 50KB. No external dependencies. Fast and efficient. --- Questions or feedback? We'd love to hear from you!

Bilder im Chrome Web Store

Discovery