Design Toolkit - Element Inspector & Measurement

Inspect, measure and copy any web design: box model, spacing, fonts, colors, responsive preview and animations for AI.

Inspect, measure and copy any website design in one click. Design Toolkit puts a CSS inspector, a pixel ruler, a color picker, a font finder, a responsive viewer and an animation inspector in one lightweight extension, with no account and no tracking. Hover any element to see its size, margin, padding, typography and colors. Measure the exact distance between elements in pixels. Open the side panel to copy CSS, Tailwind or React code, check color contrast, preview the page on phone, tablet and desktop at once, and turn any animation into a ready-made brief for your AI assistant. Made for web designers, front-end developers, UI/UX designers and QA testers. INSPECT ANY ELEMENT • Hover to see the box model drawn on the page: width, height, margin, border and padding • A floating card shows fonts, colors, display and spacing • Press Space to pin cards and compare elements side by side • Move to the parent or child element with the arrow keys MEASURE LIKE A PIXEL RULER • Select one element, hover another and read the exact gap in pixels • Rulers along the page edges and a live crosshair COPY CSS, TAILWIND AND REACT CODE • Computed CSS or the page's own CSS rules, including @media and @layer • Tailwind classes or a React style object, ready to paste COLORS, CONTRAST AND FONTS • HEX, RGB and HSL values for text, background and border colors • WCAG contrast ratio with AA and AAA badges • Font family, size, weight, line height and letter spacing • Eyedropper color picker to sample any pixel on the screen COPY ANIMATIONS FOR AI • See CSS animations, transitions and hover effects with durations, easing curves and keyframes • One click copies a brief with the exact timing and values, ready to paste into ChatGPT, Claude or Gemini to recreate the animation RESPONSIVE VIEWER • Phone, tablet and desktop previews side by side, zoomed to fit your screen • Switch any screen between light and dark mode • Add devices, rotate, zoom and scroll every screen together PAGE AUDIT AND ASSETS • Meta tags and social previews for Facebook, X and LinkedIn • Page weight, detected technologies, color palette and fonts • Export the color palette as CSS variables or a Tailwind theme • Download images, SVGs and videos with their real file names FREE FOR 7 DAYS, THEN YOURS FOR LIFE • Every tool is free for 7 days after you install, with no card and no account • Then keep it with a one-time lifetime license. No subscription • Checkout is handled by Polar, and the license turns on by itself in your browser KEYBOARD SHORTCUTS Alt+R (Option+R on Mac) turn on or off · Alt+I inspect · M measure · O side panel · R responsive viewer · C color picker · Space pin · ↑ ↓ parent or child · P pause · H hide the dock · Esc quit PRIVATE BY DESIGN The pages you inspect never leave your browser. No account, no analytics and no tracking. The extension has no access to a website until you click its icon or press one of its shortcuts. The only thing it ever sends is your license key, to Polar, to check that it is valid. Works on any website, including right-to-left pages and sites with a strict Content-Security-Policy. Website: https://www.designtoolkit.online/