Learn to read any web design
Short, practical guides for the questions you ask when you look at a live page: what font is that, what is the spacing, how do I get it into Figma, how do I hand it to an AI.
Copy a section of a website as code
Tailwind, HTML, React, Vue or Elementor, ready to give your AI
02Copy a website into Figma as editable layers
Frames, text and auto layout, pasted with Ctrl+V and no plugin
03Copy a right-to-left website into Figma
Arabic and Hebrew pages with direction, alignment and fonts kept
04Give an AI a website design to rebuild
Why code beats a screenshot, and how to hand it over
05Get the colors from an image on a website
A palette, not a pixel, into Figma or your code
06Find what font a website uses
Four ways, and what the font name alone leaves out
07Copy CSS from a website
The rules behind one element, without the framework around it
08Inspect an element without DevTools
Hover for size, spacing, font and colors on the page itself
09Copy an animation from a website
Timing, easing and keyframes, including animations built in JavaScript
10Extract design tokens from a website
The palette as CSS variables, Tailwind or JSON
11Measure the distance between elements
The measurement DevTools does not offer — and why a margin disappears
12Find the colors used on a website
The whole palette, with alpha intact and the token names where they exist
13Pick a color from a website
HEX, RGB and HSL from any pixel, with contrast
14Test responsive design
Your own breakpoints, and the four bugs device mode never shows you
15Screenshot a website on every device
Capture phone, tablet and desktop in one pass
16Check color contrast on a website
The ratio, the thresholds that apply, and the cases that catch people out
17Get Tailwind classes from a website
Read them, convert the CSS by hand, or export in one go
18Copy a hover effect from a website
The state, the transition and the curve, read off the live page
19Find the easing of an animation
The cubic-bezier or spring behind any motion, and what it means
20Copy a website section into Elementor
An importable template that works with free Elementor
21Download images and SVGs from a website
Real file names, in one click
22Measure pixels on a website
Sizes, gaps and positions with a ruler and a crosshair
No guide matches that. Try a shorter word, like “font” or “color”.
Questions about the guides
What are the Design Toolkit guides?
Short, practical how-tos for reading a live web page: finding a site's font, copying its CSS, pulling colors, measuring spacing, capturing every screen, pasting a page into Figma and handing a design to an AI. Each guide opens with a direct answer.
Do I need Design Toolkit to follow the guides?
No. Most guides first explain the manual way with browser DevTools, then show the faster way with the extension. The extension is free for 7 days with no card.
Which guide should I read first?
Start with how to copy a section of a website as code if you build with AI, or how to copy a website into Figma if you design. Both take a few minutes.
How often are the guides updated?
They are reviewed whenever the extension changes. Every guide shows the month it was last updated.
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