Features / point at things

Turn any website into one prompt for ChatGPT or Claude

B Design prompt in the toolbar, free with no account

What you get

The palette as custom properties

A :root block with each colour's role and how much of the page it covers, deduplicated, and stopping before the long tail of one-off text colours.

The type, and where to get it

The display face and the body face told apart, with the sizes and weights in use. A Google-hosted family is named so you can link it; a self-hosted one has its file quoted.

The CSS of the components that repeat

A component is a thing that appears more than once with the same classes, so the button, the card and the input are resolved rather than whatever happened to be biggest.

Every section in order

Its layout, background, padding, content measure, heading and body type, and what it contains, so the rebuild has the same rhythm rather than the same colours.

The assets and the motion

What the page loads, largest first, and its transitions, animations and keyframes.

Your own API key, optionally

With a key set, a model writes the character of the site on top of the measurements. It never touches a value, and it is only used when you press the button.

How to use it

1. Press Alt+Shift+P, then B.
2. Wait for the four passes: stylesheets, tokens, sections, component CSS.
3. Copy the prompt. Optionally have your own model describe the aesthetic on top of it first.

What it will not do

• It describes a page, not a site. Run it on the page whose look you want.
• Asset URLs belong to the original site. The prompt says so, and tells a model to write its own copy and use its own imagery.
• A contrast failure on the original is reported as something to fix rather than something to copy.

Next to this one

• Design systemExtract a website's design system: palette, type scale, spacing
• Pick elementCopy the CSS of any element on any website
• Send to agentHand an element you picked to Cursor or Claude Code