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 section-to-code exporter, 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. Copy a section of a page as clean code, pull the colors out of any image, 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, contrast, 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 • Reaches inside web components (open shadow DOM) MEASURE LIKE A PIXEL RULER • Select one element, hover another and read the exact gap in pixels, from a child to its parent too • Rulers along the page edges and a live crosshair COPY ANY SECTION AS CODE • Select a section and copy it as Tailwind, HTML, React, Vue or Elementor, or download it as a file • A live copy is drawn beside the page and measured element by element, so you see how close it is before you paste • Try the copy on a phone, tablet or desktop screen, with its hover states • Keeps the page's own fonts, breakpoints and hover states COLORS FROM ANY IMAGE • Click a picture on any page (an image, a CSS background, a video frame or a canvas) and get its palette • Copy it for Figma, or as CSS variables, Tailwind or JSON tokens • Eyedropper color picker to sample any pixel on the screen COLORS, CONTRAST AND FONTS • HEX, RGB and HSL values for text, background and border colors • WCAG contrast ratio with AA and AAA badges, worked out against what is really behind the text • Font family, size, weight, line height and letter spacing 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 • Add devices from a list or set your own size, rotate, zoom and scroll every screen together • Inspect and measure inside any screen 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 · Alt+M measure. With the toolkit on: 1 inspect · M measure · C color picker · Shift+C colors from an image · R responsive viewer · O side panel · 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/