Features point at things
Turn any website into one prompt for ChatGPT or Claude
B Design prompt in the toolbar, free with no account
For when the ask is a whole site rather than one component. One document describing how a page looks, assembled from measurements rather than from a screenshot, ready to paste into any chat.
What you get
- The palette as custom properties
- A
:rootblock 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 Verbatim does it
The page is surveyed rather than scraped: the content root is found, sections are identified by landmark and structure, repeating components are grouped by class signature, and the motion is read out of the keyframes and transitions actually in use. Those measurements are written into a document with instructions on top. No model is involved in any of it, which is why there is nothing to configure and no key to add. A key only buys a description of the character, written on top of values it is not allowed to change.
How to use it
- Press Alt+Shift+P, then B.
- Wait for the four passes: stylesheets, tokens, sections, component CSS.
- 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.
Compared with pasting a screenshot into a model
A screenshot contains no values. A model reading one cannot tell #2E6FF2 from #2F6DF6, 13px from 14px, or a 600 weight from a 650, and hover states and breakpoints are not in a picture at all. It will build something that looks broadly right and it will not tell you which numbers it invented.
Design prompt gives it the numbers. The palette as custom properties, the fonts and where they are served from, the CSS of the components that repeat, every section in order with its layout and spacing, the assets, and what moves. No model is involved in producing that document, which is why there is nothing to configure and no key to add.
When to use this one
Use Design prompt when the brief is "something that feels like this site". Use Pick element when the brief is "build this card", since its Prompt tab writes a much shorter brief for one component. The two compose: give the model the system, then hand it individual picks for the pieces that have to be exact.
Questions about Design prompt
Does it need an AI key?
No. The whole document is generated from the extraction with no model involved, and that is the default. A key is optional and buys one thing: a model describing the character of the design on top of values it is not allowed to alter. Nothing is sent anywhere until you press that button.
Which AI tools does the prompt work with?
Any of them. It is plain markdown with no tool-specific syntax, so it pastes into v0, Claude, ChatGPT, Cursor, Lovable or Bolt. Agents with MCP can fetch it themselves with get_design_prompt.
Will it reproduce the site’s content?
No, and it explicitly instructs the model not to. The headings it quotes are structural evidence showing the shape of a section, and the asset URLs belong to the original site. You write your own copy and bring your own imagery.
How long is the document?
Long, deliberately. A model given forty lines of measurements produces a closer result than one given four adjectives, and context windows stopped being the constraint that made brevity worth the loss.
What if the page builds itself after load?
It is read after load, so client-rendered pages are fine. What it cannot read is content inside a frame from another origin, which shows up as a section list that looks too short.
Already have it? The first thirty seconds covers the shortcut, all thirteen keys and what to do if something does not work.