Chrome extension
Lay OnionSkin over a live page and it reads what the browser is really doing — the type sizes, the spacing, the focus rings, what changes when you hover or resize. Then you hand that sheet to your AI and it can build from the real thing, not a guess.
The gap
Hand your AI a picture and it has to guess the rest — from one resting state, at one width, with none of the names. It will guess confidently. And it will be wrong in the places nobody bothers to screenshot.
Three out of eight, and the easy three.
The states are the point. That's where the real work lives.
Six layers
Source code tells you what someone typed. OnionSkin looks at what the browser actually drew — colours settled, sizes decided, names kept. That's how it catches the stuff that only shows up on hover, or when you squeeze the window.
Handoff
Pick based on how big the job is. One screen? Drop the whole sheet into the chat. Longer build? Give your AI something it can ask questions of as it goes.
One click opens the conversation with the sheet, a screenshot, and a prompt already ready. Add a line about what you're building, or send it as-is and let the AI read first. It also lands on your clipboard, so if the chat tool changes overnight you're one paste away — not stuck waiting on a broken button.
Export the sheet as a tiny helper your AI can talk to. Instead of re-reading the whole document every turn, it just asks for the one value it needs — a colour, a radius, how a button behaves on hover.
$ claude mcp add sheet-height \
-- node ./app-height-com.mjs
✓ sheet-height connected
6 tools · 0 dependencies · 11 KBOne small file. No install step. Works with tools that speak MCP — Claude, Cursor, and friends.
Folio
Every sheet you keep stays searchable — by site, by tag, by that colour you half-remember. Reference you pick up while browsing, not something you sat down to organise.
Put any two sheets side by side and the differences show up on their own — main colour, corners, font, spacing. Tiny colour shifts nobody would notice don't get shouted about like the ones everybody can see.
Point it at your Tailwind config or your CSS file and the comparison runs the other way: how far your build has drifted from the design it was meant to match, which of your variables to move, and a patch written in your own names.
Exports
A tracing isn't much use stuck inside an extension. Take it to Figma, drop it into a config, or hand it to your AI as something it can ask questions of.
## Type ramp
display Söhne 600 · 48/52 · -0.02em
heading Söhne 600 · 24/32 · -0.01em
body Inter 400 · 15/24 · normal
mono Berkeley Mono 400 · 13/20
## States — button/primary
rest bg #0f62fe
hover bg #0353e9
focus-visible ring 2px #0f62fe, offset 2
active bg #002d9c
disabled bg #c1c7cd · cursor not-allowed
confidence: 0.94 — 41 samplesThree jobs
There's a design already, and your build has to sit next to it without looking off. Stop poking around in the inspector on eleven elements to check if that corner is 8 or 10. Trace it once and work from the numbers.
You found a site that solves the problem well and you want its bones, not a pixel-perfect copy. A sheet gives your AI real structure to build on — so the first try is worth editing, not throwing away.
Point it at your own product and the sheet becomes a mirror. Here's what actually shipped, next to the config that was supposed to make it — and every place the two stopped agreeing.
Privacy
The permission list is short on purpose. There is no server quietly collecting what you browse — because there isn't a server, bar the one exception below, which felt worth saying out loud.
OnionSkin only opens the one tab you ask it to. It has no ongoing access to anything else you browse.
Files you hand over to check against your own code are read in the page and thrown away. They never get uploaded. A config file is just treated as text — that's all it needs to be.
It can see the active tab when you click, run a script there, store sheets and a viewport screenshot on your machine, and copy a brief to the clipboard. Host access is limited to the AI tools it can hand off to, plus a licence check if you buy the folio. No account to create.
If you buy the folio, a licence check talks to a server — that's the exception, and it only carries a licence key, not your sheets or screenshots. Licence and trial state may sync with your Chrome profile; sheets stay in local storage.
Pricing
Pay once, keep it. No subscription, no account, nobody counting seats.
$0always
$3.99one payment
Every paid feature runs three times free first. Try it before you buy it.
Free to trace, as often as you like. No sign-up. What you trace stays on your machine — only the sheet you choose to send, and a licence check if you buy the folio, ever leave it.