DesignSnap

Hover to see design specs instantly

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!