No Figma File? Use the Client's Live Website as Cursor Context

No Figma file from the client? Their live website is the design system. Extract its real tokens and give them to Cursor as persistent context, so the pages and components you build for them look like they belong instead of drifting into an accidental redesign.

The short answer

When there is no Figma file, the client's shipped website is the most reliable design system you have. Extract its real tokens from the live URL, give them to Cursor as a rule it reads on every request, and instruct it to build strictly inside them. The new pages then match the existing brand instead of quietly becoming a redesign.

Why the live site beats a description

Telling Cursor "match the client's brand" gives it nothing concrete, so it defaults to generic. A screenshot helps a little but hides the exact values. The production site, on the other hand, has already committed to a palette, a type scale and a spacing rhythm. Reading those directly means Cursor builds from the client's real decisions, not an approximation of them.

Step by step

  1. Open the style extractor and paste the client's production URL.
  2. Extract the tokens: colors ranked and labelled by role, fonts, type scale, radii and shadows.
  3. Copy them into a .cursor rules file in the project you are building for the client (see below).
  4. Build in Cursor. Every generation now reads the client's tokens and stays inside their brand.

A client rules block you can paste

Fill in the values the extractor returns for the client's site:

# Client brand (source of truth). This project extends an existing site. Colors: page: #FBFBF9 raised: #FFFFFF text: #23231F muted: #77776F accent: #C9A227 (buttons, links, focus ONLY) Fonts: "GT Sectra" (headings), "Soehne" (body) Type scale (px): 14, 16, 19, 26, 44 Radius: 4px Spacing base: 8px Rules for Cursor: - Reuse ONLY these tokens. Do not add colors, fonts, or radii. - New pages must look like the existing site, not a fresh design. - Keep the client's spacing rhythm and heading/body font split. - If something is not covered here, ask before inventing it.

Reuse it across the engagement

Client work usually spans several repos and months. Rebuilding a rules file each time is friction, and it goes stale when the client tweaks their site. The SlopScrub extension saves the client's brand as a taste profile Cursor reads over MCP, and lets you capture specific sections (their real header, their pricing table) for reuse. Point every repo in the engagement at the one profile and the brand stays consistent with nothing to copy by hand.

Where it breaks

Extraction reads rendered styles, so client sites built mostly from images, canvas, or behind a login give thin tokens; capture what you can and fill gaps by asking the client. Tokens carry the look, not the component behavior, so you still specify structure. And this is for authorized client and internal work only: extending a brand you are engaged to work on, not lifting a stranger's site.

FAQ

The client has no Figma file. How do I keep new work on-brand?

Treat their live production site as the source of truth. Extract its tokens (colors by role, fonts, type scale, spacing, radii) with SlopScrub's free style extractor and feed them to Cursor as a rule it reads on every request. You get an on-brand result without a design file or a handoff.

Is it okay to build against a client's existing site like this?

For work you are hired to do on their behalf, yes: you are extending their own brand, which is exactly the job. This guide is about authorized client and internal work, not copying a site you have no relationship with.

How do I avoid re-pasting the client's tokens into every Cursor chat?

Use persistent context. A .cursor rules file re-supplies the tokens each request for one repo; the SlopScrub extension saves the client's look as a taste profile Cursor reads over MCP, so any repo you point at it stays on-brand with no re-pasting.