Guides CSS
How to turn a website into a prompt for v0, Claude or ChatGPT
Install Verbatim, the free Chrome extension, and open the page whose look you want. Press Alt+Shift+P and choose Design prompt. It reads the live page and writes one document: the palette as custom properties, the fonts and where they are served from, the CSS of the components that repeat, every section in order, the assets and the motion. Copy it and paste it into v0, Claude, ChatGPT or Cursor.
What you need first
Verbatim is a free Chrome extension that reads the CSS actually applying to a live page, by resolving the cascade rather than dumping computed styles. Thirteen tools sit on a toolbar inside the page itself, not in a popup: pick an element, measure it, pull the palette and type scale, turn the page into a prompt, or hand any of it to a coding agent.
It is free forever with no account and no sign in, nothing is uploaded anywhere, and it works in Chrome, Edge, Brave, Arc and Opera. Install it, then follow the steps below on any page, including one behind a login.
Why pasting a screenshot into an AI does not work
Every model will happily build a page from a screenshot. The problem is that it has to invent every number in it, and it will not tell you which ones it invented.
| What you give the model | What it can do with it | Where it goes wrong |
|---|---|---|
| A screenshot | Copy the layout roughly, and the mood. | Every value is guessed from pixels. It cannot tell #2E6FF2 from #2F6DF6, 13px from 14px, or 600 weight from 650. Hover states and breakpoints are not in a picture at all. |
| A written description | Get the general direction, if your vocabulary and its vocabulary agree. | "A bit more padding, slightly rounder, that blue" is guesswork on both sides, and the third revision is still wrong. |
| The whole stylesheet | Nothing useful. It has the answer somewhere. | Five thousand rules with nothing to say which of them touched anything. It floods the context and buries the signal. |
| A link to the page | Sometimes fetch it, if the model has browsing. | A fetched page is HTML without the resolved cascade, and a page behind a login or a cookie wall is out of reach entirely. |
| A design prompt | Build from measurements: real hex values, real spacing, real type scale, real section order. | It describes a design, not your content. You still write your own copy, and you still review what comes back. |
The difference is not prompt phrasing. It is whether the model is reading numbers or reading pixels.
What is in the prompt
The document is written for a model to build from, which is a different shape from documentation written for a person. It opens with instructions, then eight sections of measured values.
- Instructions. Deliver the page and nothing else, do not restate the document, use the values as given rather than approximating them, write your own copy, keep it accessible at AA or better even where the original falls short.
- Overall aesthetic. What kind of design this is, in the terms a builder needs: density, contrast, weight, how much motion.
- Fonts. Every family that actually renders, with the sizes and weights in use and where each webfont is served from, so the rebuild can load the same faces or pick honest fallbacks.
- Colour theme. The palette as
:rootcustom properties with their roles named, ordered by how much of the screen each one actually covers. - Component CSS. The rules for the components that repeat across the page, which is what carries the resemblance.
- Assets and media URLs. What the page loads, so nothing is invented.
- Section by section. Every section in document order with its layout, its spacing and its content measure. This is the part that makes a rebuild feel like the original.
- Shape, depth and spacing, and animation patterns. Radii, shadows, the spacing rhythm, and what moves.
None of it requires an AI key. The whole document is generated from the extraction. A key is optional and buys one thing: a model describing the character of the design on top of the measurements, which it is not allowed to change. See Design prompt for the tool itself.
How to turn a website into a prompt, step by step
Six steps, one of which is optional, and none of which need an account.
- Add Verbatim to Chrome. It is a free extension, there is no account and no sign in, and it works in Chrome, Edge, Brave, Arc and Opera.
- Open the page whose look you want. Any page, including one behind a login, because the extension runs in your own browser session.
- Press Alt+Shift+P, or click the Verbatim icon, to bring up the toolbar.
- Choose Design prompt. It surveys the whole page: every stylesheet, every section, the components that repeat, the fonts and the assets.
- Read the document that opens. It starts with instructions for the model, then the measured values under headings: overall aesthetic, fonts, colour theme, component CSS, assets, section by section, shape and spacing, animation.
- Press Copy prompt and paste it into v0, Claude, ChatGPT, Cursor or whatever builds your pages.
- Optional: add your own AI key in settings and press the button to have a model describe the character of the design on top of the measurements. It never alters a value, and nothing is sent until you press it.
The document is long by design. That is the point: a model given 40 lines of measurements produces a closer result than one given four adjectives, and context windows are no longer the constraint they were.
Using it with v0, Claude, ChatGPT and Cursor
The prompt is plain markdown, so it works anywhere. What changes is what you say around it.
- v0. Paste the document and add one line about what the page is for and what sections you want. v0 is strongest when the design is pinned down and the content brief is short.
- Claude and ChatGPT. Paste it and ask for one page, then iterate section by section. Both follow the "use the values as given" instruction well, and both will happily drift if you ask for five changes at once.
- Cursor, Claude Code, Codex and Windsurf. Paste it into the chat, or skip the pasting entirely: the MCP server exposes
get_design_promptas a tool your agent calls on a URL itself. For pages an agent cannot reach, pick it yourself and press G: Send to agent.
If you want one component rather than a whole page, that is a smaller job and a different tool: see how to copy CSS from a website, or go straight to copying a component into React.
A whole page, or one component?
Use the design prompt when the brief is "make something that feels like this site". It carries the system: the palette, the type scale, the spacing rhythm, the section order.
Use a single pick when the brief is "build this card". Pick element gives you the exact rules for one component and its children, and its Prompt tab writes a short brief for that component alone, which is a far smaller thing to paste.
The two compose. Give the model the design prompt for the system, then hand it individual picks for the pieces that have to be exact.
What the prompt will not do
It describes a design. It does not hand you a site, and three things are yours to supply.
- Your own copy. The headings quoted in the document are structural evidence, there to show the shape of a section, not text to lift. The instructions say so to the model as well.
- Your own imagery. The asset URLs belong to the original site. They tell the model what kind of imagery sits where; they are not yours to hotlink or ship.
- Your own judgement on identity. Reproducing a spacing rhythm or a type scale is ordinary practice. Reproducing a brand, its logo, its photography and its wording is not, and no tool makes that acceptable.
There is also a technical limit worth knowing: a page that builds itself entirely after load, in a frame from another origin, is not fully readable by anything running in the page, including this. You will see it as a section list that looks too short.
Questions
How do I turn a website into a prompt for AI?
Open the page, press Alt+Shift+P, choose Design prompt, and copy the document it writes. It contains the palette as custom properties, the fonts and their sources, the CSS of the components that repeat, every section in order, the assets and the motion, all read from the live page rather than guessed from a picture.
Does it need an OpenAI or Claude API key?
No. The whole document is generated from the extraction with no model involved, and that is the default. A key is optional and does exactly one thing: lets a model describe the character of the design on top of the measured values, which it is not allowed to alter. Nothing is sent anywhere until you press that button.
Can I use it with v0, Lovable or Bolt?
Yes. The prompt is plain markdown with no tool-specific syntax, so it pastes into any builder or chat. Add one line saying what the page is for and what sections you want, and let the document carry the design.
Will the AI copy the website exactly?
It will reproduce the design system closely, because it is reading measured values rather than guessing from pixels. It will not reproduce the content: the prompt explicitly instructs the model to write its own copy and use its own imagery, and the headings it quotes are there as structural evidence.
How is this different from pasting a screenshot?
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. The design prompt contains the numbers, so there is nothing left to infer.
Can my coding agent do this itself?
Yes. The MCP server exposes get_design_prompt, so Cursor, Claude Code, Codex, Windsurf or VS Code can point at a public URL and get the same document without you in the loop. For pages an agent cannot reach, such as anything behind a login, pick it yourself and press G to hand it over.
Does it work on a page behind a login?
Yes. The extension runs in your own browser in your own session, on the page you are already looking at, so a dashboard, a checkout or an admin panel reads exactly like a public page. That is the case a crawler or a headless browser cannot cover.