Design language for AI

Your design
language, in
every AI tool.

Capture design patterns from any site. Sync them to Cursor, Claude Code, Copilot, and every AI coding tool in seconds.

Get started View on GitHub

marque add reference

$ marque add reference https://stripe.com

Phase 1 - Extracting design tokens

Colors: 8 extracted

Typography: Inter 300-700, scale 96-12px

Layout: 1280px, asymmetric grids

Motion: cubic-bezier(0.4, 0, 0.2, 1)

Phase 2 - Recording scroll choreography

12 sections · 12 screenshots captured

Synced to 10 agent formats

Works with your tools

Cursor

Claude Code

Copilot

Bolt

Windsurf

Lovable

The problem

Stop fixing
AI's design.

Every AI coding tool produces the same output. Same rounded corners. Same blue buttons. Same gray-600 subheadline. Same Inter at 400 weight. The “AI art face” problem, for UI.

You spend 30 minutes fixing what the agent got wrong. Adjusting colors. Swapping border radius. Replacing font weights. Overriding the defaults that make every AI-built site look identical.

every AI tool, every time

> Build me a hero section

bg-white <- not your brand

rounded-xl <- not your style

bg-blue-500 CTA <- not your color

text-gray-600 <- wrong tone

shadow-lg <- not your depth

centered layout <- not your rhythm

Another generic site. Your brand: gone.

How it works

Three commands.
Every tool, your design.

Point Marque at any site you admire. It extracts the design language and writes it into every AI tool's instruction files.

Capture

Point at any website. Marque scrapes CSS tokens, typography, layout grids, scroll choreography, and captures screenshots at every section boundary.

step 1

$ marque add reference https://linear.app

Phase 1 - Extracting...

Colors, type, layout, motion

Synthesize

Your AI agent reads the raw design data and synthesizes it into structured design language: tokens, anti-defaults, creative direction, and composition guidance.

step 2

$ marque synthesize --apply

Design language saved

Syncing to 10 formats...

Sync

Marque writes your design language to 10 agent instruction formats simultaneously. Every AI tool in your project now speaks your design.

step 3

.cursorrules

.claude/instructions.md

.github/copilot-instructions.md

...and 7 more

Features

Everything your AI needs
to design like you.

Anti-defaults

Marque tells agents what not to use. Every default Tailwind choice that doesn't match your design gets an explicit override.

The agent knows your design decisions before it writes a single character.

.claude/instructions.md

## VISUAL OVERRIDES

bg-blue-500 for CTAs

bg-[#F97316] orange - warm, precise

rounded-xl on cards

rounded-sm (2px) - sharp corners

text-gray-600 body text

text-zinc-500 - correct on this bg

py-8 section spacing

py-32 - let the content breathe

scroll storyboard

Scroll: hijacked | Library: gsap

Total: 13575px (15.1 viewports)

0. [hero] 1vh PINNED

1. [features] 0.3vh PINNED

2. [stats] 0.7vh PINNED

3. [social-proof] 0.8vh slide-down

4. [cta] 1.0vh PINNED

22 screenshots captured

Scroll choreography

Marque records how a page moves: pinned sections, animation triggers, scroll hijacking, GSAP timelines. It maps the full scroll storyboard and captures screenshots at each boundary.

Your agent knows what the site looks like. It also knows how it feels to scroll through it.

10 formats, one sync

marque sync writes your design language to every agent instruction format simultaneously. Switch tools freely. Your design language follows.

Plus MCP server support. Your AI queries your design language as a live tool call, not a static file.

marque sync

$ marque sync

.cursorrules

.cursor/rules/marque.mdc

.claude/instructions.md

.claudecode

.github/copilot-instructions.md

.windsurfrules

AGENTS.md

.agent/rules/marque.md

.marque.md

mission.md

10 formats. One command.

30s

to capture a reference

agent formats synced

22+

screenshots per scrape

<2m

to full design language