How to Make Cursor Match an Existing Website

Cursor can build new pages that match a site you already have, but only if you give it the site's real design tokens instead of a screenshot or a vague instruction. Here is how to pull the colors, fonts and spacing from a live URL and hand them to Cursor as context it keeps.

The short answer

Give Cursor the existing site's real design tokens, not a description of them. Pull the colors (labelled by role), fonts, type scale, radii and spacing from the live URL, put them in a rules file Cursor reads on every request, and tell it to build new pages inside those constraints. That is the whole trick: concrete values, supplied persistently.

Why "make it look like our site" fails

Cursor does not have your site open. When you ask it to match a design it has never seen, it approximates from training data and lands on the same generic defaults it gives everyone: a centered hero, one accent color, rounded-xl cards. Even a screenshot only gives it a rough impression, not the exact hex values, the real font names, or the spacing rhythm. It needs the actual tokens.

Step by step

  1. Open the style extractor and paste the URL of the site you want to match (yours, or one you have permission to build against).
  2. Click Extract. You get the colors ranked by use and labelled (background, text, accent), the fonts, the type scale, radii and shadows.
  3. Click "Copy for your AI" to bundle the tokens with a short instruction, or copy the raw CSS variables.
  4. In Cursor, save it as a rule (see below) so every generation reads it, rather than pasting it into one chat.

A rule you can paste

Create a .cursor/rules file (or a .cursorrules at the project root) and drop the extracted tokens in with instructions like this. Replace the values with your own from the extractor:

Design system (match the existing site, do not invent new styles): Backgrounds: #0B0B0C (page), #141417 (raised) Text: #F4F4F5 (primary), #9A9AA2 (muted) Accent: #E5522D (use ONLY for buttons, links, focus states) Fonts: "Soehne", system-ui (body + headings) Type scale: 13 / 15 / 17 / 22 / 34 px Radius: 0 (square corners everywhere) Spacing rhythm: multiples of 8px Rules: - Build new pages and components using ONLY the tokens above. - Never introduce a new color, font, or radius. If you need one, ask. - Match the spacing rhythm; do not center everything by default. - This is an existing brand. New work must look like it belongs, not like a redesign.

Make it stick across the whole project

A rules file works, but you have to rebuild it by hand for every project and update it when the site changes. The SlopScrub extension captures the site (and any specific sections you want reused) into a taste profile that Cursor reads over MCP. The tokens are re-supplied on every request automatically, so a long session never drifts back to the defaults, and you can point new projects at the same profile in one line.

Where it breaks

Extraction reads what the site actually renders, so a site behind a login wall, or one that paints everything in canvas or images, gives thin results. Tokens capture the look, not the layout logic, so you still describe the structure you want. And matching a brand you do not own is for internal or client work you are authorized to do, not for cloning someone else's product.

FAQ

How do I get Cursor to match my existing site's design?

Extract the real design tokens from the live site (colors with roles, fonts, type scale, radii, spacing) and give them to Cursor as a rule it reads on every request. SlopScrub's free style extractor turns a URL into those tokens plus a ready prompt. Pasting a screenshot or saying 'match our site' does not work, because Cursor cannot see the site and guesses from memory.

Why does Cursor drift away from my design over a long session?

Anything you paste once scrolls out of the context window as the conversation grows, so later edits fall back to Cursor's defaults. The fix is persistent context: a rules file or an MCP server that re-supplies the tokens every request, instead of a single paste at the top.

Do I need the SlopScrub extension for this?

No. The free style extractor gives you a one-off prompt you can paste into Cursor with no signup. The extension is for when you want it to be repeatable: it saves the look as a taste profile Cursor reads over MCP, so you never re-paste.