Turn a site you envy into tokens your code can use

Reverse the page, pull out the spacing scale, palette and type rules, and hand them to whatever is writing your config.

You can already see that a site looks better than yours. What you cannot see is that it runs on an eight-point scale with one accent reserved for interactive elements. That is the part you can actually implement.

Why this will not look generic: The tokens are measured off a real page that someone designed deliberately, so your config inherits a coherent system instead of the defaults your framework shipped with.

What you walk away with

• The page's design language written out: scale, palette, type, density
• A token set you can paste into a config
• A mockup of your own content in that system
• The style saved, so later pages inherit it

This one happens in one conversation

You bring: A URL you admire. It is already on the web, so give Claude the link rather than a screenshot.

Open with: Reverse this page, then give me its design language as tokens: spacing scale, palette with roles, type ramp, border radius and density. Tailwind config format.

What the thread holds on to:

• The reversed description, so you can ask follow-ups instead of re-reversing
• The token set as it evolves while you argue with the values
• What you already rejected, so it stops offering it back

Then you can just ask:

• Which of these choices is doing the most work?
• Give me the same scale but at our brand's colours
• What would this system look like applied to a dense data table?
• Write it as CSS custom properties instead

What the reverse actually gives you

Point it at: A page whose look you want to understand well enough to implement.

What comes back (representative example): A restrained editorial layout running on a visible system. Vertical rhythm sits on an eight-point scale with roughly a hundred and twenty pixels between sections, which is generous and consistent rather than ad hoc. Palette is warm off-white, near-black and one muted olive, and the olive appears only on interactive elements, never decoratively. Headings use a high-contrast serif against a neutral grotesque for body, at roughly a four to one size ratio. Corners are square throughout. Sections are separated by a one-pixel hairline rather than alternating fills, which is what makes it read as calm rather than striped.

Things you would never have thought to type:

• an eight-point scale with 120px between sections
• the accent reserved for interactive elements only
• a four to one heading-to-body size ratio
• hairlines instead of alternating background fills

What you change: The colours and the typeface. Keep the scale, the ratio and the accent discipline, because those are the system and the colours are just the skin on it.

How it works

1. Reverse it and ask for tokens (In Claude) - Pass the URL rather than pasting a screenshot: a link costs one fetch, a pasted image has to be base64 encoded into the request.
2. See your own screens in it - Apply the system to your actual product before you commit it to a config.

Cost and time

This workflow runs at from 10 credits + 1 reverse + about 1 minute. Your result carries automatically from each step into the next, so there is no re-uploading between tools. Reverses are billed from your reverse meter and generation steps from your AI Credits, both bundled in every pay-as-you-go credit pack.

Browse all guided workflows or all individual tools. Pay as you go, no subscription, AI Credits never expire.