How to capture a design system for Cursor in 60 seconds

July 19, 2026 5 min read

Step-by-step guide to capturing any website's design system and using it as context in Cursor, Claude Code, or Codex for instant design-matching.

You're building a SaaS app. Your designer sent a Figma link three weeks ago and the last message from them was "looks good, ship it." The Figma file is locked behind a Professional plan you cancelled. Your AI agent keeps generating flat blue buttons when the reference site uses a very specific indigo-to-violet gradient with a 2px border and a subtle box shadow.

Here's the problem: Cursor's AI — and every other coding agent — has no idea what a site actually looks like at runtime. It can't read computed CSS. It doesn't know your spacing scale, your font stack, or which breakpoints you're targeting. You can paste a screenshot into the chat but the agent can't extract exact values from a PNG. You end up giving it eyeballed hex codes and approximate padding values, and the output looks approximately right — which is another way of saying wrong.

Design Catcher solves this. Install it once, click it on any site, and you get three structured markdown files that any coding agent can read as precise context. This post walks through the exact workflow.

Install the extension (30 seconds)

Open the Chrome Web Store and search for Design Catcher, or go directly to the extension page. Click "Add to Chrome." No account, no API key, no onboarding flow. The extension icon appears in your toolbar.

Pin it. You'll use it constantly.

Pick a site to capture

For this walkthrough, use Linear (linear.app). It's a useful capture because Linear has an unusually disciplined design system — a consistent 4px base grid, a tight typographic scale, and CSS variables for every meaningful value. If you're building productivity software or any kind of dashboard, this is worth having in your context.

Navigate to linear.app in Chrome. You don't need to be logged in — the extension reads computed styles from whatever is rendered in the DOM. The public marketing site works fine.

Run the capture (10 seconds)

Click the Design Catcher icon in your toolbar. A small panel opens showing the page URL. Click Capture.

The extension runs a content script that reads all computed CSS properties, CSS custom properties (variables), and the DOM structure of the page. This data is sent to Design Catcher's backend, which uses Gemini 2.5 Flash to synthesize three structured markdown files. The first capture of a URL runs the full LLM synthesis — subsequent captures of the same URL load from the community cache instantly.

The synthesis takes 5–15 seconds. A progress indicator shows in the panel.

What you get: three files

When the capture finishes, the panel shows three download buttons:

  • DESIGN.md — the design system spec: colors, typography, spacing, component patterns, do's and don'ts
  • STRUCTURE.md — the layout architecture: page sections, grid system, content hierarchy
  • UI-KIT.md — reusable component recipes: buttons, forms, cards, navigation patterns

Download all three. They're plain markdown — no proprietary format, no dependencies.

What DESIGN.md actually contains

Here's a representative opening from a real capture of a SaaS app. The actual Linear capture will have different values, but this shows the structure and notation: 

# Design System — Linear

## Overview
Dense, functional dashboard aesthetic. High information density with
deliberate whitespace. Neutral grays dominate; accent used sparingly
for interactive states only.

## Colors
- colors.bg.primary: #0F0F10
- colors.bg.surface: #1A1A1D
- colors.bg.elevated: #222226
- colors.text.primary: #E8E8E8
- colors.text.secondary: #8C8C8C

The {colors.primary} token notation is used throughout the file. This matters more than it might seem — agents reason about relationships between tokens, not just individual hex values. When a component definition says background: {colors.bg.surface} and the border says {colors.border.subtle}, the agent understands that these are meant to pair. It won't accidentally use a high-contrast combination that breaks the intended hierarchy.

Getting the files into Cursor

Drop all three files into your project root. If you're starting fresh, a directory like design-context/ keeps things clean: 

your-project/
  design-context/
    DESIGN.md
    STRUCTURE.md
    UI-KIT.md
  src/
  package.json

Open Cursor. In a new chat, reference the files explicitly in your first prompt: 

Using the design system defined in @DESIGN.md, @STRUCTURE.md, and @UI-KIT.md,
build a pricing section with three tiers. Match the card elevation, typography
scale, and button style exactly.

Cursor's @file syntax injects the full file content into the context window. The agent now has exact token values, spacing rules, and component patterns — not a description of a screenshot.

Automate injection with .cursorrules

If you want the design context available in every conversation without remembering to @mention the files, add a .cursorrules file at your project root: 

# .cursorrules

## Design system
Always refer to @design-context/DESIGN.md for design tokens.
Always refer to @design-context/UI-KIT.md for component patterns.
When implementing UI, match the captured design system exactly.
Do not hardcode hex values — use the token names defined in DESIGN.md.

Cursor reads .cursorrules as persistent context for the project. Every chat in this project starts with that instruction, so you never have to repeat "use the design system from…" in every prompt.

Practical tips from regular use

Capture the logged-in app, not the marketing site. If you want to match a dashboard aesthetic, sign in first. The marketing page often has different typography and a lighter color palette than the product itself.

Use the community cache. If you're capturing Linear, Vercel, Stripe, or any other popular site, odds are someone has already run the capture. The result loads instantly from cache — no LLM cost, no wait.

Keep captures beside the project they inform. Don't dump all your captures in a single global folder. Each project should have its own design-context/ directory committed to source control, so your teammates get the same context automatically when they clone the repo.

Recapture after major redesigns. The community cache keys on URL. If a site ships a major design refresh, click the reload icon in the Design Catcher panel to force a fresh synthesis. The new capture will update the cache for everyone.

Use BYOK mode for internal tools. If your company's internal admin panel or design system site is behind authentication and you want to keep the synthesis private, enable BYOK (Bring Your Own Key) in the extension settings. Your Gemini key is used, the data doesn't hit the shared cache, and the capture stays local.

Works with every major agent

DESIGN.md, STRUCTURE.md, and UI-KIT.md are plain markdown. They work anywhere text context is accepted:

  • Cursor: @file or .cursorrules
  • Claude Code: CLAUDE.md or pass files with --context
  • Codex CLI: include in the prompt file or reference with --file
  • Gemini CLI: include in the system prompt
  • VS Code Copilot: add to the workspace instructions in .github/copilot-instructions.md

The format doesn't have any agent-specific syntax. If the agent can read a text file, it can use a Design Catcher capture.

The 60-second summary

Install Design Catcher from the Chrome Web Store. Visit any site. Click capture. Download three markdown files. Drop them in your project. Reference them in your agent. The agent now knows the exact color tokens, font scale, spacing system, and component patterns of the site you're matching — and your UI stops looking approximate.

For Cursor specifically, commit the files to your repo and add .cursorrules to make the context persistent across every session. You'll notice the difference in the first prompt.