New Copy any animation for AI

Inspect, measure & copy any design on the web

Hover any element to see its box model, spacing, colors and fonts. Measure pixel distances, preview every screen size, audit the page and hand its animations to your AI. One extension, on any website.

Add to Chrome

No account Runs locally Chrome, Edge, Brave, Opera & Firefox

Move your mouse over the preview. Switch tools in the dock, or press M to measure.

Private by design Runs in your browser. No account, no analytics, no server.
Tested in 4 browsers Automated end-to-end tests in Chrome, Edge, Brave and Firefox.
Works on any site Right-to-left pages, strict CSP, iframes and smooth-scroll sites.
Lightweight No trackers, no remote code, and it stays idle until you turn it on.
All in one

Every check a web page needs

Inspect, measure, audit and copy, without opening DevTools or a design file.

Inspect everything

Hover any element for its size, margin, padding, typography and colors. Press Space to pin it and compare elements side by side.

Design Toolkit inspector showing the box model and styles of a dashboard number

Measure anything

Pick an element, hover another and read the exact gap in pixels, with page rulers and a live crosshair.

Copy animations for AI

Durations, easing curves, keyframes and hover values, packed into one brief you paste into your AI.

Works in every modern browser

One install gives you the same tools in Chrome, Edge, Brave, Opera, Vivaldi, Arc and Firefox, on every site you visit.

  • Chrome
  • Edge
  • Brave
  • Opera
  • Vivaldi
  • Arc
  • Firefox
See it work

Real screenshots, real pages

Every image below is a real screenshot of the extension at work. Hover an image to see it in color.

Floating inspector card with width, height, margin, colors and font details
Hover to inspect. Box model on the page, every value in a floating card.
Features

Everything Design Toolkit does

An inspector, ruler, color picker, font finder, asset downloader, responsive tester and animation inspector. All of them, on any page.

Element inspector

Hover any element for size, spacing, typography and colors in a floating card. Press Space to pin it.

Box model overlay

Margin, border, padding and content drawn right on the page, with every value labelled.

Distance measurement

Select one element, hover another and see the pixel gap between them, including nested elements.

Code export

Copy computed CSS, the page's real rules (including @media and @layer), Tailwind classes or a React style object.

Colors & contrast

Text, background and border colors in HEX, RGB or HSL, with the WCAG contrast ratio and an AA or AAA badge.

Animation inspector

CSS animations, transitions and Web Animations on the element or inside it, with easing curves, keyframes and hover styles.

Copy for AI

A ready-to-paste brief with timing, easing, the values that change on hover and the full CSS.

Responsive mode

Phone, tablet and desktop side by side. Add devices, rotate, zoom and sync scrolling, even on pages that block iframes.

Page audit

Meta tags, social previews for Facebook, X and LinkedIn, page weight by type and detected technologies.

Show all featuresShow fewer features

Typography

Font family, size, weight, line height and letter spacing, with a live preview of the typeface.

Asset downloads

Save images, SVGs, video posters and videos with their real file names. Next.js image URLs are unwrapped.

Page rulers

Pixel rulers along the top and left of the page, with a crosshair that follows your cursor.

Color picker

Sample any pixel on screen and copy its HEX value in one click.

Pinned cards

Pin as many elements as you like, drag the cards anywhere and compare values side by side.

Parent & child selection

Walk up and down the DOM with the arrow keys, or jump to any ancestor from the document tree.

Keyboard first

A shortcut for every tool that never gets in the way of typing in forms, on Windows or Mac.

Smooth-scroll friendly

The panel and the page scroll independently, even on sites that use Lenis or Locomotive Scroll.

RTL & strict CSP ready

Docks on the left for Arabic and Hebrew pages, and keeps working on sites with a strict Content-Security-Policy.

Copy for AI

Give your AI the exact motion, not a guess

Found an animation you love? Design Toolkit measures it on the live page and writes a brief ChatGPT, Claude, Gemini or Cursor can rebuild in your stack.

  1. Click the element that moves. A hover effect, a marquee, a spinning icon.
  2. Press Copy for AI in the Animations section of the side panel.
  3. Paste it into your AI and name your framework. The numbers are already exact.
Recreate this animation from a web page.Match the timing, easing, values and trigger exactly. ## Element- Tag: <a>, text: "Start free trial"- Classes: btn- Size: 152 × 49 px ## What changes- background-color: rgb(15, 23, 42) → rgb(30, 41, 59) on hover- transform: none → translateY(-2px) on hover ## Transitions- background-color: 0.25s ease- transform: 0.15s cubic-bezier(0.4, 0, 0.2, 1) ## CSS.btn {  transition: background-color 0.25s ease,    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { background: rgb(30, 41, 59); transform: translateY(-2px); }
Get started

Up and running in a minute

  1. Install the extension

    Add Design Toolkit to Chrome, Edge, Brave, Opera or Firefox. No account, nothing to configure.

  2. Turn it on anywhere

    Click the toolbar icon or use the shortcut on any website.

    AltR⌥ R on Mac

  3. Hover, measure, copy

    Every tool is one key away.

    MORCSpaceEsc
Pricing

Free for everyone. Pro is on the way.

Every tool you have seen on this page is free. Pro adds frame-accurate motion capture for the animations you want to rebuild.

FreeAvailable now
$0forever

For designers, developers and QA who live in the browser.

  • Inspector, box model and pinned cards
  • Distance measurement and page rulers
  • CSS, Tailwind and React code export
  • Animation inspector with Copy for AI
  • Responsive mode and page audit
  • Chrome, Edge, Brave, Opera and Firefox
Add to Chrome
ProComing soon
Soon

For teams that rebuild motion and need proof it matches.

  • Everything in Free
  • Motion capture: record any animation frame by frame, including GSAP
  • Match score that compares your rebuild with the original
  • Export to CSS, GSAP and Framer Motion
  • Priority support
Join the waitlist

No credit card, no account. The free plan stays free.

FAQ

Questions, answered

Is Design Toolkit free?

Yes. Every tool on this page is free to use, with no account and no sign-up.

Which browsers does Design Toolkit work in?

Google Chrome, Microsoft Edge, Brave, Opera, Vivaldi, Arc and Firefox. The color picker uses the EyeDropper API, which Chromium-based browsers provide.

Does Design Toolkit collect my data?

No. The extension runs entirely in your browser. There is no account, no analytics and no server; files are only downloaded and text is only copied when you ask for it.

How does Copy for AI work?

Select an element that moves, open the Animations section in the side panel and press Copy for AI. You get a ready-to-paste brief with the timing, easing, keyframes, hover values and full CSS, which ChatGPT, Claude or Gemini can turn into code for your project.

Will it change the websites I inspect?

No. Nothing is added to a page until you turn the toolkit on. Press P to pause and use the page normally, or Esc to quit.

What are the keyboard shortcuts?

Alt + R (⌥ + R on Mac) toggles the toolkit, Alt + I inspects, M measures, O opens the side panel, R opens responsive mode, C picks a color, Space pins an element, ↑ ↓ select the parent or child, P pauses, H hides the dock and Esc quits.

Does it work on right-to-left and strict CSP websites?

Yes. On Arabic and Hebrew pages the side panel docks on the left so it never covers the content, and every panel keeps working on sites with a strict Content-Security-Policy.

Install Design Toolkit

No account, no setup. Inspect, measure and copy on the next page you open.

Add to Chrome