How to give Cursor, Copilot or Claude a design reference

Cursor, Copilot and Claude write great code but default to a generic look. Give them a concrete design reference and everything they build inherits it.

The problem

AI coders are excellent at structure and terrible at taste by default - ask for a landing page and you get the same centered hero and three feature cards every time. They're not making a design choice; they're filling in the average because you gave them no reference.

Option 1: paste a reference (fastest)

  1. Open the style extractor, paste a URL you like, click Extract.
  2. Click "Copy for your AI" - it bundles the real palette (with roles), fonts, type scale and tokens with a short instruction.
  3. Paste it into Cursor/Claude/Copilot with your task. It builds in that style instead of the default.

Option 2: serve it over MCP (repeatable)

Pasting is per-prompt. For a whole project you want the AI to re-read the reference every time it generates. The SlopScrub extension captures whole sections into named taste profiles, and a hosted MCP server hands them to any MCP-capable client (Cursor, Claude, Cline, Windsurf) on demand - so "build against my taste" just works, no re-pasting.

  1. Install the SlopScrub extension and clip references into a profile.
  2. Connect your client to the hosted MCP endpoint with a token from your account.
  3. Ask it to build using your profile - it pulls the colors, fonts and sections and matches them.

Either way: tell it what to avoid

Add one line to the prompt: avoid the generic AI-default look - centered hero, eyebrow pill, gradient accent word, three icon cards - unless the reference actually uses it. Grounding the model AND naming the failure mode is what keeps the output distinctive.

FAQ

How do I give Cursor a design to follow?

Two ways. Paste a reference style into the chat (SlopScrub's extractor gives you a ready block of colors, fonts and tokens), or connect the SlopScrub MCP server so Cursor reads your saved taste profiles on demand and builds against them without re-pasting.

What is the best way to keep a consistent style across an AI-built project?

A saved reference the AI can re-read. Pasting works for one component; for a whole project, a taste profile served over MCP keeps every generation on the same palette, type and spacing.

Does this work with GitHub Copilot?

Copilot follows the surrounding code and any reference you put in context. Paste the extracted tokens into a comment or a design file it can see, and it will match them. MCP-native clients (Cursor, Claude, Cline, Windsurf) can pull the profile directly.