Add to Chrome

All designer tools in one extension.

Inspect CSS, measure gaps, pull colors into Figma and copy any section as code for your AI. Everything runs on the page you are looking at.

Add to Chrome

5.0 on the Chrome Web Store

No account needed

For designers

Understand every detail behind great design.

Inspect any website to discover its spacing, dimensions, typography, and colors. Everything you need to recreate great designs.

Hover to see it

Every element, measured and explained

Point at anything on a page and read its size, spacing, type and colors.

  • Hover any element

    Move your mouse over a page and every element tells you its size, spacing, font and colors.

  • Measure the space between elements

    Pick one element, then point at another. You get the exact gap in pixels, and a guide when two edges line up.

Every color, handled

Grab any color. Paste it in Figma.

Pull a palette out of any image, pick any pixel and check its contrast.

  • Colors from any image

    Click any photo or banner and get its palette. Paste it in Figma as one editable rectangle per color.

  • Pick any pixel

    Point at any spot on the screen and get that exact color as HEX, RGB and HSL.

  • Contrast, checked

    See the WCAG ratio of any text on its background, with a clear AA or AAA badge.

Every screen

See every screen. Capture them all.

Phone, tablet and desktop in one view. Rotate, zoom and scroll them together, then capture.

  • Side by side

    All the screens at once, with a camera on each one.

  • Screenshots, ready to hand over

    Capture the whole page on every screen, then download one ZIP or copy it for Figma.

  • Add any device

    Search 20+ devices or type your own size.

Website to Figma

Copy any page. Paste it in Figma as real layers.

Pick a section or the whole page, then press Ctrl+V in Figma. You get editable layers, not a screenshot. No plugin needed.

  • Editable layers, with auto layout

    Frames, text and spacing arrive named and organized, so you can start editing right away.

For design engineers

Give your AI the real design, not a screenshot

Hand your AI the exact code or timing, and it rebuilds what you saw.

Section code for AI

Copy any section as code for your AI

The real code of a section, not a screenshot. Your AI rebuilds it with the same layout, spacing and fonts.

  1. Select a section. Click it, then press O.
  2. Pick a format and copy. Tailwind, HTML, React, Vue or Elementor.
  3. Paste it into your AI and ask it to rebuild.
Add to Chrome
1

Select a section on any page

section.hero
2

Pick a format and copy it

TailwindHTMLReactVueElementorCopy
3

Paste it into your AI

Rebuild this sectionsection.hero · Tailwind
Done. Same layout, spacing and fonts.
Animations for AI

Copy any animation for your AI

Found an animation you love? Get its exact timing and easing as a brief your AI can rebuild.

  1. Click the element that moves.
  2. Press Copy for AI in the side panel.
  3. Paste it into your AI and name your framework.
Add to Chrome
1

Point at the thing that moves

Start free trial
2

We measure it for you

  • Movesup 2 px on hover
  • Colordark navy to a lighter navy
  • Speed0.25 seconds, smooth ease
Copy for AI
3

Paste it into your AI

Recreate this animation in Reactanimation-brief.md
Done. Same timing and easing.
All tools

The checks you repeat all day, now one key away

Spacing, CSS, devices, colors, fonts, files and page health. Stop opening DevTools, screenshots and design files for every small question.

Element inspector

Hover any element and a card shows its size, spacing, font and colors, with the box model drawn right on the page. Press Space to pin it.

Distance measurement

Pick one element, hover another and read the exact gap in pixels. Page rulers and a crosshair help you line things up.

Copy the CSS

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

Responsive mode

See phone, tablet and desktop side by side. Search 20+ devices or type your own size, then rotate, zoom and scroll them together.

Colors & contrast

Pick any pixel with the eyedropper and get HEX, RGB or HSL. Check the WCAG contrast ratio with a clear AA or AAA badge.

Page palette

Every color a page uses in one list. Export it to Figma, CSS variables, Tailwind or JSON tokens.

Typography

Find out which font a site uses: 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, in one click.

Page audit

Check meta tags, social previews for Facebook, X and LinkedIn, page weight by type and the technologies a site uses.

Three steps

Up and running in a minute

No account, nothing to configure. Three steps and you are measuring a real page.

Design ToolkitElement inspector, measure, colors★★★★★5.0Add to Chrome
Step 1

Install the extension

Add it from the Chrome Web Store. Works in Chrome, Edge, Brave and more.

designtoolkit.online
or pressAltR
Step 2

Turn it on anywhere

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

a.btn  160 × 56
Start building
IInspectMMeasure CColorsRResponsive
Step 3

Hover, measure, copy

Every tool has one key, so you stay on the page, not in DevTools.

One price

Pricing

Try every tool free for 7 days. Keep it for life with one $5 payment.

Free trial

7 days

Try every tool on a real project. No card needed.

Freefor 7 days
Start free trial
  • For designers: inspect CSS, measure spacing and copy image colors into Figma
  • For design engineers: copy any section or animation as exact code for your AI
  • Responsive mode and page audit
  • Chrome, Edge, Brave, Opera, Vivaldi and Arc

Lifetime

Pay once

For designers and design engineers who use it every week.

$5one-time
Get lifetime access
  • Yours for life, no subscription
  • Every future update included
  • Works on up to 3 of your own browsers or devices
  • Secure checkout by Polar, with a 14-day refund
  • Support by email

One price for everyone, no subscription. 14-day refund on every purchase.

FAQ

Questions

Short answers about price, browsers, privacy and how each tool works.

How do I inspect the CSS of an element without opening DevTools?

Press Alt + I and hover any element. A card shows its size, margin, padding, font and colors, and the box model is drawn on the page. Press Space to pin it, then copy the computed CSS, the real rules, Tailwind classes or a React style object.

How do I get the colors of an image on a website?

Press Shift + C and click any photo, background or video frame. Its main colors appear with their codes. Press Copy for Figma, then paste with Ctrl + V (⌘ + V on Mac). Each color becomes an editable rectangle named after the color. You can also copy the same colors as CSS variables, Tailwind v4 or v3, or JSON tokens.

Can I copy a website into Figma as editable layers?

Yes. Pick a section or the whole page, then press Ctrl + V in Figma. You get real frames, text and auto layout, not a screenshot, and you do not need a plugin.

Can I give my AI the code of a section of a website?

Yes. Select a section, press O to open the side panel and use the Export card. Choose Tailwind, HTML, React, Vue or Elementor, then copy or download it. Paste it into ChatGPT, Claude, Gemini or Cursor and ask it to rebuild the section. Check the phone, tablet and desktop preview first, because pages that rearrange themselves with JavaScript can come out slightly different. Animations work the same way: press Copy for AI and you get a brief with the exact timing and easing.

Which browsers does Design Toolkit work in?

Google Chrome, Microsoft Edge, Brave, Opera, Vivaldi and Arc, all installed from the Chrome Web Store. It works on Windows, Mac and Linux.

Is Design Toolkit safe? Does it collect my data?

No data is collected. The extension runs in your browser with no account and no analytics, and the pages you inspect never leave your device. It only runs on the tab where you turn it on. If you buy a license, only your license key is sent to Polar to confirm it. Files are downloaded and text is copied only when you ask for it.

Is Design Toolkit free?

Yes, for 7 days. Every tool is free during the trial and no card is needed. After that, lifetime access is one payment of $5, with no subscription.

How do I pay, and can I get a refund?

Checkout is handled by Polar, our merchant of record, and takes major debit and credit cards such as Visa and Mastercard. If your card is declined, check that it is enabled for international online payments, which many banks turn off by default, or try another card. Your license key arrives by email right after payment. Every purchase has a 14-day refund.

Stop guessing. Get the exact design of any website.

Hover for the real CSS, pull its colors into Figma, or give your AI the code of a whole section.

Add to Chrome
No accountRuns locally14-day refund