Recipes

Name: Dembrandt
Author: Dembrandt

52 workflows. CLI commands, AI agent prompts, and full pipelines — copy and run.

CLIMCPAI AgentsCI/CDFigmaCursor

Two ways to run these workflows

CLI — explicit commands

Run exact flags yourself. Full control, works anywhere.

dembrandt stripe.com --wcag --locale ja-JP --save-output

MCP + Skills — natural language

With MCP and dembrandt-skills active, the agent picks the right flags and runs the extraction itself.

"Is stripe.com WCAG-compliant for the Japanese market?"

Extraction

1.Basic token extraction

DesignerDeveloper

Point Dembrandt at any live website and get every visual property back as structured data: colors, fonts, spacing, borders, shadows. No DevTools, no guesswork.

CLI commands

Extract and print JSON

Terminal

dembrandt stripe.com --json-only

Save to output folder

Terminal

dembrandt stripe.com --save-output

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Extract the design tokens from stripe.com and summarize the

color palette, type scale, and spacing system. Flag any value

that looks inconsistent or off-system.

Output

Complete token JSON: colors, typography scale, spacing, border radii, shadows.

2.Multi-page crawl

DesignerDeveloperQA

A homepage extraction misses what lives on pricing pages, dashboards, and docs. Crawling maps the full visual surface of a product, not just what's above the fold.

CLI commands

Crawl up to 5 pages

Terminal

dembrandt stripe.com --crawl 5 --save-output

Extract two pages to compare

Terminal

dembrandt stripe.com /products /settings --save-output

Discover via sitemap

Terminal

dembrandt stripe.com --sitemap --save-output

AI agent prompt: compare internal pages

# Extract two separate sections, then:

"Compare these two extractions from the same product.

One is the marketing site, one is the app.

Which tokens are shared, which differ, and does the

visual language stay consistent across the product boundary?"

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Crawl up to 5 pages of stripe.com, merge the design tokens,

and tell me which brand values only appear outside the homepage.

Note anything where the visual language breaks across pages.

Output

Merged token set across all crawled pages. Catches brand values that only appear in secondary UI.

3.Dark mode analysis

DeveloperQADesigner

Extract both light and dark mode token sets. Compare them to verify that dark mode is a proper inversion, not just a color swap that breaks spacing, type, and component density.

Extract light mode

Terminal

dembrandt vercel.com --save-output

Extract dark mode

Terminal

dembrandt vercel.com --dark-mode --save-output

Output

Two token files. Load both in the Dembrandt App to diff them side-by-side.

4.Screenshot + token visual audit

DesignerDeveloper

Extract tokens and capture a screenshot in one command. Feed both to an AI agent to find what the JSON missed: textures, gradients, image-based backgrounds, icon weight, and visual elements that tokens don't capture.

Extract + screenshot

Terminal

dembrandt example.com --save-output --screenshot /tmp/brand.png

Agent prompt

# Load the PNG and JSON into Claude, then:

"Look at the screenshot and the extracted tokens together.

Does the visual impression match what the tokens describe?

Are there elements in the screenshot that suggest tokens

Dembrandt didn't capture: textures, gradients, image-based

backgrounds, icon weight, illustration style?"

Output

Visual gap report: design elements present in the screenshot but absent from the token JSON.

5.DTCG export to Tokens Studio or Figma Variables

DesignerDeveloper

Export extracted tokens in W3C DTCG format and convert them to a Tokens Studio-compatible structure with semantic group nesting — ready to import directly into Tokens Studio or as Figma Variables.

Export DTCG format

Terminal

dembrandt example.com --dtcg --save-output

Agent prompt

# Load the DTCG JSON, then:

"Convert this DTCG token file to a Tokens Studio-compatible

structure with semantic group nesting:

- color/brand/primary, color/brand/accent, color/surface/default

- typography/scale/base, typography/scale/large, typography/label/small

- spacing/1, spacing/2... radius/sm, radius/md

Output valid JSON ready to paste into Tokens Studio

or import as Figma Variables."

Output

DTCG JSON restructured for Tokens Studio or Figma Variables import. No manual token entry.

6.Extract and merge tokens across key pages

DesignerDeveloperPM

Pass multiple paths in one command to build a single token set spanning your most important pages. Tokens that recur across pages are promoted to higher confidence; page-specific outliers stay visible by their low frequency.

CLI commands

Merge tokens across key pages

Terminal

dembrandt example.com /pricing /features /about --save-output

For per-page analysis, extract each path separately

Terminal

dembrandt example.com --save-output

...then the page you want to compare

Terminal

dembrandt example.com/pricing --save-output

Agent prompt: per-page diff (uses the separate extractions)

# Load the two extractions (homepage and /pricing), then:

"Which tokens appear in the /pricing extraction but not the

homepage one? These are likely conversion-specific design

decisions. Describe the visual strategy difference between the

marketing and product pages from the token data."

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Extract example.com and example.com/pricing separately, then tell

me which tokens appear only on /pricing. Describe the

conversion-specific design decisions that implies.

Output

One merged token set across the given paths, with confidence boosted for tokens seen on multiple pages.

7.Raw vs. filtered color analysis

DesignerDeveloper

Extract both the filtered palette and the full raw color set. Ask an AI what Dembrandt filtered out and whether any filtered colors are meaningful brand values worth keeping.

Extract filtered palette

Terminal

dembrandt example.com --save-output

Extract with raw colors

Terminal

dembrandt example.com --raw-colors --save-output

Agent prompt

# Load both extractions, then:

"Compare the filtered and raw color extractions.

What did Dembrandt filter out? Are any of the filtered

colors actually meaningful brand values that were

incorrectly excluded? List any candidates for promotion

to the official token palette with reasoning."

Output

Filtered vs. raw color comparison with candidates for palette promotion.

8.Extract Cloudflare-protected sites with Firefox

Developer

Some sites block Chromium-based extraction. Switch to Firefox or enable stealth mode to bypass bot protection. Use only on sites you are authorized to extract.

Try Firefox

Terminal

dembrandt protected.example.com --browser firefox --save-output

Firefox + stealth

Terminal

dembrandt protected.example.com --browser firefox --stealth --save-output

Full disguise

Terminal

dembrandt protected.example.com --stealth --browser firefox --user-agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" --slow --save-output

Output

Successful extraction from bot-protected sites where Chromium fails.

9.Extract authenticated views via CDP

Developer

Connect Dembrandt to an existing Chrome session via CDP to extract pages that require login — dashboards, account settings, gated product UIs — without automating the auth flow.

Launch Chrome with remote debugging

Terminal

google-chrome --remote-debugging-port=9222

Extract authenticated view

Terminal

BROWSER_CDP_ENDPOINT=http://localhost:9222 dembrandt app.example.com/dashboard --save-output

macOS: launch Chrome with CDP

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \

--remote-debugging-port=9222 --user-data-dir=/tmp/chrome-cdp

# Log into the target site in this Chrome window, then run:

BROWSER_CDP_ENDPOINT=http://localhost:9222 dembrandt app.example.com/dashboard --save-output

Output

Token extraction from authenticated product UIs, dashboards, and gated views.

AI Pipelines

10.Clone a brand's design language

DeveloperDesignerAgency

Extract a site's visual language, then ask an AI to build a complete on-brand page from it. One command captures the tokens. One prompt produces a page that matches the typography, palette, spacing, and component density of the original.

Extract + export DESIGN.md

Terminal

dembrandt stripe.com --design-md --save-output

Claude Code prompt

# With DESIGN.md in context:

"Build a complete SaaS landing page using these extracted tokens.

Match the color palette, type scale, spacing rhythm, and component

density exactly. Include: hero, feature grid, pricing table, footer."

Output

On-brand landing page: matching palette, type scale, spacing, and component density.

11.Build a design system in Claude Code

DeveloperDesigner

Extract tokens and feed them into Claude Code. The agent scaffolds CSS variables, a Tailwind theme, and React primitives, all derived from exact brand values, not defaults.

Generate DESIGN.md

Terminal

dembrandt example.com --design-md

Claude Code prompt

# With DESIGN.md in context:

"Build a design token system using these extracted tokens as source of truth.

Output:

1. CSS custom properties (colors, type, spacing, radius, shadow)

2. Tailwind theme extension

3. Button, Input, Card, Badge primitives in React"

Output

CSS variables + Tailwind theme + React primitives. All values from the live brand.

12.Rebrand an existing application

DeveloperDesignerAgency

Extract the new brand's tokens. Feed the JSON and your existing codebase to Claude Code. The agent applies the new visual language (colors, type, spacing, radii) across the whole product.

Extract new brand tokens

Terminal

dembrandt new.example.com --save-output

Claude Code prompt

# With extraction JSON and codebase in context:

"Apply these extracted design tokens to the attached codebase.

Replace hardcoded color values, type sizes, spacing, and border

radii with the new brand values."

Output

Complete visual rebrand: hardcoded values replaced with new brand tokens.

13.Brand guide PDF vs. live site

DesignerQAAgency

Your brand guide says one thing. Your live site says another. Extract what actually shipped, compare it against the PDF, and get a concrete list of exactly where the brand broke down.

Extract live tokens

Terminal

dembrandt example.com --save-output

Claude Code prompt

# Drag extraction JSON and brand guide PDF into context, then:

"Compare this extraction against the brand guide PDF.

Output an ASCII table:

TOKEN | BRAND GUIDE | PRODUCTION | DELTA | CLASS

(class: intentional / drift / unknown)

Flag differences above 10% as ⚠️.

Intentional = documented exception or product-level decision.

Drift = production diverged without a clear reason.

End with a remediation list: drift items only, ordered by visual impact."

Output

Gap report: which production values diverge from the brand guide, by how much, and where.

14.Cross-app token comparison

DesignerPMQAEnterprise

Large organizations often have a main site, a SaaS app, and a docs site, all drifting from each other without anyone noticing; extract all three and ask an AI to map what is shared versus what has diverged.

Extract main site

Terminal

dembrandt example.com --save-output

Extract app

Terminal

dembrandt app.example.com --save-output

Extract docs

Terminal

dembrandt docs.example.com --save-output

Claude Code prompt

# If component-family-consistency skill is installed, activate it first.

# Load all three extractions, then:

"Compare these three token sets. Output two tables:

SHARED TOKENS (appear in all three with <10% variance):

TOKEN | VALUE | NOTES

DIVERGING TOKENS:

(verdict: intentional variation / likely drift / confirm with team)

Flag any color that differs by more than 10% ΔE as ⚠️ drift.

Flag any spacing value that differs by more than 4px as ⚠️ drift.

Intentional variation = product-level UI convention (e.g. denser dashboard).

Drift = no plausible reason for the difference."

Output

Token overlap map: shared baseline vs. per-product overrides vs. unintentional drift.

15.Build a design system in Figma via MCP

DesignerDeveloper

Crawl any live site with Dembrandt, then use the Figma MCP to push the extracted tokens directly into a linked Figma frame or section: colors as styles, type as text styles, and spacing as variables.

Crawl the live site

Terminal

dembrandt example.com --crawl 3 --json-only

Claude Code prompt (Figma MCP active)

# With Figma MCP connected and extraction JSON in context:

"Open the Figma file at [file URL] and navigate to the frame named [Design System].

Using the extracted tokens:

1. Create local color styles for every color in the palette,

named semantically (Brand/Primary, Brand/Accent, Surface/Default, Text/Primary, etc.)

2. Create text styles for each step in the type scale,

named by size and weight (Body/Base, Heading/Large, Label/Small, etc.)

3. Create local variables for spacing values (space-1 through space-16)

and border radii.

Apply all styles to the design system frame."

Output

Figma file populated with color styles, text styles, and local variables derived from the live brand. Ready to build components on top of.

16.Paste tokens to Figma Make

Designer

Figma Make generates components fast, but without brand context it guesses colors and type. Add extracted tokens as context first. The AI now builds components on the actual brand values, saving hours of manual correction.

Extract tokens

Terminal

dembrandt example.com --json-only

Figma Make prompt

# Paste JSON output into Figma Make context, then:

"Use these extracted design tokens as the brand foundation.

Build a [component] that matches these colors,

type scale, spacing, and border radii exactly."

Output

Figma Make components built on real token values, not AI-guessed brand colors.

17.Improve a Google Stitch prompt with brand context

DesignerDeveloper

Generic prompts produce generic-looking UI. Extract the brand's tokens first, then inject them into your Stitch prompt. The output matches the actual brand instead of defaulting to Material or Tailwind styles.

Extract brand tokens

Terminal

dembrandt example.com --json-only

Google Stitch prompt

# Include extracted values in your Stitch prompt:

"Design a [screen name] using these brand tokens:

Primary: #133174 | Background: #0A0A0F

Font: [extracted family] | Base size: [extracted size]

Radius: [extracted radius]

Match the visual language of the extracted design system."

Output

Stitch output that reflects the real brand palette and type system.

18.Turn a live site plus brand guide into a Figma design system

DesignerDeveloperAgency

A design system written into Figma by the agent, from two real inputs: a Dembrandt extraction of the live site and the existing brand guide PDF. The agent reconciles them, creates color styles, text styles, spacing and radius variables, and starter components over MCP, and lists every token where the guide and production disagree.

Crawl the live site to DESIGN.md

Terminal

dembrandt example.com --crawl 5 --design-md --save-output

Add a gated surface (app, dashboard)

Terminal

dembrandt app.example.com --design-md --save-output

Claude Code prompt (Figma MCP active, DESIGN.md + brand guide in context)

# With DESIGN.md and the brand guide PDF both in context,

# and the Figma MCP connected to the target file:

"You have two sources: DESIGN.md extracted from the live site,

and the client's existing brand guide PDF.

1. Reconcile them. Where the guide and the live tokens agree,

treat that value as the system foundation. Where they differ,

list the conflict (token, guide value, live value) and pick the

guide value by default, noting it for human review.

2. Open the Figma file at [file URL], frame [Design System].

3. Create color styles and text styles from the reconciled tokens,

named semantically (Brand/Primary, Surface/Default, Heading/Large).

4. Create local variables for spacing and border radius.

5. Build starter components on those styles: Button, Input, Card.

Report the conflict list at the end."

Output

A Figma design system authored over MCP from the live site reconciled against the brand guide, plus a conflict list of tokens where the two disagree.

19.Author a design system from screenshots, brand guide, and tokens in Figma or Penpot

DesignerDeveloperAgency

Tokens carry measured values. Screenshots and brand imagery carry what never reaches CSS: layout, illustration, photography, density. Give the agent all of it at once, plus the brand guide PDF and any reference images, and it authors color styles, text styles, variables, and components into Figma or Penpot over MCP. This is the most expensive recipe here: large image context, a long agentic session. Use it for a high-value handoff, not a quick draft.

Capture tokens, screenshot, and brand guide in one run

Terminal

dembrandt example.com --crawl 5 --screenshot ./current.png --brand-guide --design-md --save-output

Add a gated surface

Terminal

dembrandt app.example.com --screenshot ./app.png --design-md --save-output

Agent prompt (Figma MCP or Penpot MCP active, all inputs in context)

# In context: DESIGN.md, the screenshots, the brand guide PDF,

# and any reference images. Figma MCP or Penpot MCP connected.

"You have measured tokens (DESIGN.md), screenshots of the current

surfaces, the brand guide PDF, and reference images.

1. Use the tokens for exact color, type, spacing, and radius values.

2. Use the screenshots and references for what tokens miss: layout

rhythm, density, illustration and photography style.

3. In the connected design tool, create color styles and text styles

from the tokens, local variables for spacing and radius, and

starter components that match the visual language in the images.

Scope this run to [one frame / one component set]. List anything

you inferred from the images that the tokens did not confirm."

Connect the Penpot MCP (open source)

# Penpot ships an official MCP server. Point your agent at it,

# then run the prompt above against a Penpot file instead of Figma.

# Docs: https://help.penpot.app/mcp/

Output

A design system authored in Figma or Penpot over MCP, grounded in measured tokens plus the visual language carried by screenshots and reference images, with a list of what the agent inferred from images beyond the tokens.

20.Build on-brand UI in Claude artifacts

DesignerDeveloperPM

An on-brand interactive component in the chat, no project to set up. Extract the tokens, paste the JSON into Claude, ask for an artifact. It renders inline on the real palette, type scale, and spacing. Without the tokens, artifacts default to generic colors and system fonts.

Extract tokens

Terminal

dembrandt example.com --json-only

Claude prompt (paste JSON, then ask for an artifact)

# Paste the extraction JSON into the conversation, then:

"Using these extracted design tokens as the only source of truth,

build a [pricing section / dashboard card / hero] as an artifact.

Match the palette, type scale, spacing, and border radius exactly.

No generic defaults, no invented colors."

Output

A live, on-brand Claude artifact built on the extracted tokens, ready to iterate on in the conversation.

21.Generate a branded presentation

PMDesignerMarketing

Marketing teams build decks, one-pagers, and campaign assets constantly, and keeping them on-brand without a designer in the loop is the default failure mode. Extract the brand palette and type, then generate a themed deck in Gamma, Canva Magic, or Plus AI.

Extract brand tokens

Terminal

dembrandt example.com --json-only

Gamma / Canva Magic / Plus AI prompt

# Paste extracted colors and type into the AI tool, then:

"Create a presentation using this brand palette:

Primary: #133174 | Accent: [extracted accent]

Background: [extracted bg] | Heading: [extracted heading family]

Apply consistently across all slides."

Output

Branded presentation deck. Colors and type match the live product.

22.Find tokens that fit a page's purpose

DesignerDeveloper

Describe the purpose of a page or a token you want to create. Ask an AI to find a reference site that uses that approach well, then extract it to get the actual values.

Claude Code prompt: find and extract

# Step 1: ask the agent to identify a reference:

"I am designing a [checkout flow / onboarding / dashboard / landing page].

The emotional register should be [calm and trustworthy / energetic / serious / warm].

Which live site executes this page type and tone exceptionally well?

Name one URL I should extract with Dembrandt."

# Step 2: extract the suggested site:

# dembrandt [suggested-url] --save-output

# Step 3: load the JSON and ask:

"Now analyze the extracted tokens from [site].

Output a table:

TOKEN TYPE | VALUE | EMOTIONAL EFFECT | APPLIES TO MY PAGE (yes/no)

Then give three concrete starting values I should adopt:

1. Primary color: [hex] — because [reason]

2. Base spacing: [px] — because [reason]

3. Border radius: [px] — because [reason]

Keep explanations to one line per token."

Output

Reference site identified + extracted token set + explanation of which values create the intended emotional register.

23.Brand guardrail for AI-generated UI

Developer

Give your AI coding agent a brand baseline it cannot drift from. The agent extracts your live brand, builds UI, then scores its own output before you ever see it.

CLI commands

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Extract the design tokens from example.com and treat them as the

brand baseline. Build the new settings page. Before showing me the

result, extract its rendered tokens and run compute_drift against the

baseline. If the drift score is above 10, list what drifted and fix it

so the page stays on brand.

Output

AI-built UI that is provably on-brand: a drift score under threshold, with the agent self-correcting colors, type, and spacing before handoff.

Brand & Docs

24.Generate a brand guide PDF

DesignerAgencyMarketingPM

Turn any live website into a structured brand guide PDF in seconds. Use it as a client deliverable, hand it to a new designer on day one, or as AI context to protect the brand in every future AI-generated asset. When no current guide exists, extract every shipped surface and build the guide from what actually ships.

Export PDF

Terminal

dembrandt example.com --brand-guide

Crawl then export

Terminal

dembrandt example.com --crawl 3 --brand-guide

Pull a legacy surface too, then export

Terminal

dembrandt app.example.com --save-output

Output

Brand guide PDF: color palette, typography system, spacing scale, component samples.

25.Does the brand feel like what it claims to be?

DesignerMarketingAgency

A brand says it is 'bold, human, and trustworthy'. Extract the live site's tokens and ask an AI if the visual choices actually support those values, or contradict them.

Claude Code prompt

# If brand-visual-language skill is installed, activate it first.

# Extract the site first, then load the JSON and ask:

"This brand describes itself as [bold / human / trustworthy / innovative].

Evaluate the extracted tokens against these values. Output two tables:

SUPPORTS brand values:

TOKEN | VALUE | WHY IT WORKS

CONTRADICTS brand values:

TOKEN | VALUE | WHY IT CONFLICTS | SUGGESTED FIX

Then score overall alignment: Strong / Partial / Weak.

Use specific token values as evidence, not impressions."

Output

Brand alignment report: which tokens support the stated values, which contradict them, and what to change.

Code & Tokens

26.Design-system-aware Cursor project

Developer

Extract DESIGN.md and add it to Cursor project rules. Every AI suggestion in the editor now has brand context: correct colors, type scale, and spacing before you write a line.

Generate DESIGN.md

Terminal

dembrandt example.com --design-md

Add to .cursorrules

# Paste DESIGN.md content into .cursorrules or add as context file.

# Example Cursor prompt after setup:

"Add a pricing card component. Use the design system

tokens in DESIGN.md, no hardcoded values."

Output

Cursor project with brand context. Agent suggestions stay on-token.

27.Give GitHub Copilot brand context

Developer

Put the brand tokens where Copilot already reads: .github/copilot-instructions.md. Generate DESIGN.md, paste it in. Completions and Copilot Chat then have the real colors, type scale, and spacing as context. Without it Copilot fills styling with invented hex values.

Generate DESIGN.md

Terminal

dembrandt example.com --design-md

Add to .github/copilot-instructions.md

# Paste DESIGN.md content into .github/copilot-instructions.md,

# under a clear heading, then commit it.

## Design tokens (source of truth)

## Rule

When generating UI, use only these tokens. No hardcoded

hex values, no system fonts, no arbitrary spacing.

Output

Repo-wide Copilot context. Completions and Copilot Chat stay on the brand token system.

28.Refactor hardcoded colors to token variables

Developer

Extract tokens from the live site. Use Cursor to find every hardcoded color, spacing, or radius value in the codebase and replace it with the correct token variable.

Extract live tokens

Terminal

dembrandt app.example.com --json-only

Cursor prompt

# With extraction JSON and codebase in context:

"Find every hardcoded color (#hex, rgb(), hsl()),

spacing value (px, rem), and border-radius in this codebase.

Replace each with the matching CSS variable from the

extracted token set. Show a summary of all replacements."

Output

Codebase with hardcoded values replaced by token variables.

29.Tailwind defaults to brand theme

Developer

Extract the brand's real tokens. Generate a Tailwind theme extension that replaces generic defaults with actual brand values.

Extract brand tokens

Terminal

dembrandt example.com --save-output

Claude Code prompt

# With extraction JSON in context:

"Generate a Tailwind CSS theme extension (tailwind.config.js)

using these extracted tokens. Map brand colors to semantic

names (primary, accent, surface, muted), extract the type

scale, spacing, and border radius."

Output

tailwind.config.js with brand-accurate color, type, spacing, and radius scales.

30.Legacy CSS to design tokens

DeveloperEnterprise

Extract the current live site to capture what actually shipped. Use that as ground truth to generate CSS custom properties and replace scattered hardcoded values across the codebase.

Extract live site

Terminal

dembrandt app.example.com --crawl 5 --save-output

Claude Code prompt

# With extraction JSON and existing CSS in context:

"Generate a CSS custom properties file (:root { ... }) from

these extracted tokens. Then audit the existing CSS and

replace hardcoded values with the correct var() references."

Output

CSS custom properties file + refactored stylesheets using var() references.

31.Generate a shadcn/ui theme from any website

Developer

Extract a site's design tokens and convert them into a shadcn/ui theme. CSS variables mapped to shadcn's semantic token names, ready to drop into globals.css.

Extract tokens

Terminal

dembrandt example.com --save-output

Claude Code prompt

# With extraction JSON in context:

"Convert these extracted design tokens into a shadcn/ui theme.

Output a complete CSS block for globals.css:

:root {

--background: ;

--foreground: ;

--primary: ;

--primary-foreground: ;

--secondary: ;

--secondary-foreground: ;

--muted: ;

--muted-foreground: ;

--accent: ;

--accent-foreground: ;

--destructive: ;

--border: ;

--input: ;

--ring: ;

--radius: ;

}

Map the extracted colors to the closest semantic role.

Use the extracted border radius for --radius.

Add a .dark block with appropriate dark mode values."

Output

Complete shadcn/ui theme block for globals.css, derived from the extracted brand tokens.

32.Export design tokens to Storybook

DeveloperDesigner

Extract a site's tokens and generate a Storybook design token page. Colors, typography, spacing, and radii documented as living components that stay in sync with the live product.

Extract tokens

Terminal

dembrandt example.com --save-output

Claude Code prompt

# With extraction JSON in context:

"Generate a Storybook design token documentation file (tokens.stories.tsx).

Include:

1. Color palette story: swatches for each extracted color with hex value and name

2. Typography story: specimen for each type scale step (size, weight, line height)

3. Spacing story: visual grid showing each spacing value

4. Border radius story: examples of each extracted radius value

Use the extracted token values as constants at the top of the file.

Export each as a named Storybook story."

Output

tokens.stories.tsx with visual documentation of all extracted design tokens.

33.Extract design tokens for a Next.js application

Developer

Extract a live site's tokens and generate a Next.js-compatible token file. CSS custom properties for the App Router, Tailwind theme extension, and typed TypeScript constants.

Extract tokens

Terminal

dembrandt example.com --save-output

Claude Code prompt

# With extraction JSON in context:

"Generate a complete design token setup for a Next.js App Router project:

1. globals.css: CSS custom properties block (:root { ... })

with colors, font sizes, spacing, radius, shadows

2. tailwind.config.ts: theme.extend block mapping

Tailwind keys to the CSS variables (e.g. colors.primary: 'var(--primary)')

3. tokens.ts: typed TypeScript constants object

for use in components without string literals

All three files should reference the same extracted values."

Output

globals.css + tailwind.config.ts + tokens.ts — complete Next.js token setup from a live brand.

Audit & Compliance

34.WCAG accessibility audit

QADeveloperDesignerPM

EU accessibility legislation (EAA) requires WCAG 2.1 compliance for most digital products from 2025. This runs a contrast check against the real rendered page, not theoretical values, and flags exactly what fails and where.

CLI commands

Full WCAG audit

Terminal

dembrandt stripe.com --wcag --save-output

Crawl then audit

Terminal

dembrandt stripe.com --crawl 5 --wcag --save-output

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Run a WCAG 2.1 contrast audit on stripe.com and tell me which

color pairs fail AA, where they appear, and the concrete token

changes that would bring each one into compliance.

Output

Per-pairing contrast ratios with WCAG 2.1 AA/AAA pass/fail verdicts.

35.Design due diligence for M&A

PMAgencyEnterprise

Before acquiring a company, audit its design system from the outside in five minutes: brand quality, design debt, WCAG compliance, and a low/medium/high estimate of the effort to align it with yours.

CLI commands

Audit the acquisition target

Terminal

dembrandt target.example.com --crawl 5 --wcag --brand-guide --save-output

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Analyze this acquisition target's design system. Evaluate brand

consistency and quality, design technical debt (hardcoded values, drift), WCAG

compliance level, and the effort to align with our system (low/medium/high per

category: color, typography, spacing, components).

Output

A due-diligence summary of the target's design system: quality, debt, WCAG level, and per-category alignment effort, ready for the negotiation table.

36.Mobile vs desktop token consistency

DesignerDeveloperQA

Responsive coherence breaks quietly: type stops scaling, spacing rhythm shifts, touch targets shrink. Extract both viewports and flag every inconsistency between them.

CLI commands

Desktop (default viewport)

Terminal

dembrandt example.com --save-output

Mobile viewport

Terminal

dembrandt example.com --mobile --save-output

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Compare these desktop and mobile extractions. Flag inconsistencies in

typography scaling, spacing rhythm, touch targets / button sizes, and color usage

in navigation. Recommend fixes for responsive coherence.

Output

A list of responsive inconsistencies between mobile and desktop, with recommended fixes for coherence.

37.Full audit pack in one command

QADesignerAgency

Combine brand guide PDF, screenshot, and raw JSON into one extraction run. Attach all three to a bug report, client handoff, or audit trail as proof of the site state at that moment.

Full audit pack

Terminal

dembrandt example.com --brand-guide --screenshot ./audit.png --save-output

With crawl

Terminal

dembrandt example.com --crawl 3 --brand-guide --screenshot ./audit.png --save-output

Output

Three files: brand guide PDF, PNG screenshot, and token JSON. Full audit record from a single run.

38.Agency pre-sales audit

AgencyPM

Before walking into a pitch, run the prospect's website through Dembrandt. Show them their own WCAG failures, inconsistent brand colors, and typography drift. With a PDF in hand.

Extract prospect site

Terminal

dembrandt prospect.example.com --wcag --brand-guide --save-output

Output

Brand guide PDF + WCAG failure report for the prospect's live site. Ready to present.

39.Cultural color and token audit

DesignerMarketingAgency

Extract a site's design tokens with the target locale set, then ask an AI to flag colors, visual patterns, or density choices that carry cultural risk in a specific market or region.

CLI commands

Extract with target locale

Terminal

dembrandt example.com --locale ja-JP --timezone Asia/Tokyo --save-output

Extract Middle Eastern market

Terminal

dembrandt example.com --locale ar-SA --timezone Asia/Riyadh --save-output

Extract with Finnish locale

Terminal

dembrandt example.com --locale fi-FI --timezone Europe/Helsinki --save-output

Agent prompt: cultural risk analysis

# Load the extraction JSON, then:

"Analyze this design token palette for cultural risk in [Japan / Saudi Arabia / Brazil / target market].

For each color in the palette:

1. Note any cultural associations (positive, negative, or sensitive) in that market

2. Flag colors that carry significant risk as ⚠️

3. Note colors that are particularly well-suited for that market as ✓

Also review:

- Overall color temperature (warm/cool) and its reception in this culture

- High-density vs. open layouts and local UI conventions

- Any patterns in the spacing or visual weight that may feel unfamiliar

Suggest specific token value changes for any flagged risks."

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Extract example.com rendered for the Japanese market, then assess

the color palette for cultural risk in that region. Flag any

token that lands poorly, and suggest safer replacement values.

Output

Per-token cultural risk assessment with ⚠️ flags, market-specific associations, and suggested alternatives.

40.Staging vs production drift check

QADeveloper

Verify staging matches production before you promote. Extract both, diff the tokens, and see exactly which colors, sizes, or spacing moved.

CLI commands

Pin production as the baseline

Terminal

dembrandt https://example.com --json-only > prod.json

Compare staging against it

Terminal

dembrandt https://staging.example.com --compare prod.json --html diff.html

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Extract https://example.com and https://staging.example.com,

compare the design tokens, and tell me every color, font size, and

spacing value that differs between production and staging. Flag

anything that looks like an unintended regression.

Output

Drift score plus an itemized changed / added / removed list across colors, type, spacing, radius, and shadows.

41.Pre-sales brand and accessibility audit

AgencyDesignerPM

Walk into the pitch with the prospect's own problems on a slide. Run their live site for WCAG contrast failures and brand inconsistency before the first meeting.

CLI commands

Audit contrast on the prospect's site

Terminal

dembrandt https://prospect.example.com --wcag --html audit.html

Crawl key pages to surface cross-page inconsistency

Terminal

dembrandt https://prospect.example.com --crawl 5 --wcag --save-output

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Audit prospect.example.com: extract the design tokens with WCAG

contrast analysis, then summarize every contrast pair that fails AA, every

color that looks off-system, and any inconsistency across the pages. Write it

as three talking points I can bring to a sales call.

Output

A personalized audit: failing WCAG pairs, off-system colors, and cross-page inconsistencies, in a shareable HTML report.

42.Client delivery sign-off report

PMAgencyDeveloper

Prove the delivered product matches the client's brand. Compare the build against a baseline extracted from the client's own live site, and hand over the score.

CLI commands

Pin the client's live brand as the baseline

Terminal

dembrandt https://example.com --json-only > client-brand.json

Compare the delivered build, write the sign-off report

Terminal

dembrandt https://delivery.example.com --compare client-brand.json --html signoff.html

Run this as an agent prompt (MCP)

Agent prompt · MCP active

Extract the brand tokens from the client's site example.com as a

baseline, then compare our delivered build at delivery.example.com. Give me a

drift score and a plain-language list of anything that does not match the

client's brand, so I can confirm sign-off or fix it first.

Output

A drift score and itemized token comparison as an HTML sign-off report: objective proof the delivery matches the client's brand.

Competitive Research

43.Competitor benchmarking

PMDesignerMarketingAgency

Extract design tokens from your top competitors and compare them side by side. Structured data instead of screenshots in a slide: actual color values, type scales, and spacing systems.

Extract competitor A

Terminal

dembrandt linear.app --save-output

Extract competitor B

Terminal

dembrandt height.app --save-output

Extract competitor C

Terminal

dembrandt asana.com --save-output

Output

Per-brand token JSON files ready for side-by-side comparison, charting, or AI analysis.

44.Discover a competitor's visual strategy

PMDesignerMarketing

What visual language does each competitor use before a user reads a single word? Extract tokens from multiple brands in the same category, then ask an AI agent to compare color temperature, type personality, and UI density.

Extract competitor A

Terminal

dembrandt stripe.com --save-output

Extract competitor B

Terminal

dembrandt linear.app --save-output

Extract competitor C

Terminal

dembrandt notion.so --save-output

AI agent prompt

# If brand-visual-language skill is installed, activate it first.

# Load all three extractions, then:

"Compare the visual strategy of these three products.

Output a structured table:

DIMENSION | BRAND A | BRAND B | BRAND C

Color temperature| warm/cool/neutral

Type personality | humanist/geometric/transitional

UI density | tight/medium/open (note px spacing base)

Border treatment | sharp/rounded (note px radius base)

Shadow depth | flat/subtle/elevated

For each dimension, note the specific token values that drive the conclusion.

End with one sentence per brand: what it communicates before a user reads a word.

Flag any dimension where two brands are within 10% of each other as ≈ (similar)."

Output

Visual strategy analysis: brand tone, density positioning, and design language compared across competitors.

45.Compare Stripe, Linear and Notion design systems

DesignerPMDeveloper

Extract design tokens from three of the most-referenced product design systems and compare them. Stripe's precision, Linear's density, Notion's openness -- in actual numbers.

Extract Stripe

Terminal

dembrandt stripe.com --crawl 3 --save-output

Extract Linear

Terminal

dembrandt linear.app --crawl 3 --save-output

Extract Notion

Terminal

dembrandt notion.so --crawl 3 --save-output

Agent prompt

# Load all three extractions, then:

"Compare the design systems of Stripe, Linear and Notion.

Output a structured table:

DIMENSION | STRIPE | LINEAR | NOTION

Primary color

Color temperature (warm/cool/neutral)

Base font size

Type scale steps

Base spacing unit

Border radius (default)

Shadow depth (flat/subtle/elevated)

UI density (tight/medium/open)

For each cell, use the actual extracted token value.

End with one sentence per product: what the visual language communicates."

Output

Side-by-side token comparison of three benchmark design systems with actual values.

Integrations

46.Extract tokens via MCP

DeveloperDesigner

With the Dembrandt MCP server installed, your AI agent extracts design tokens mid-conversation. No terminal switching, no file management. Just ask.

Install MCP server

claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp

Agent prompt

# In Claude Code with MCP active:

"Extract the design tokens from stripe.com and

summarize the color palette and type scale."

Output

Tokens extracted and available in the agent's context.

47.Design review with Dembrandt Skills

DesignerDeveloper

Dembrandt Skills give AI agents structured design knowledge. Combine with an extraction to get a review grounded in real token data, not generic best-practice advice.

Install skills

npx skills add dembrandt/dembrandt-skills

Claude Code prompt

# With skills installed and an extraction in context:

"Review this UI against the extracted tokens.

Identify WCAG contrast issues, inconsistent spacing,

and color values that deviate from the brand palette."

Output

Structured design review: contrast failures, token inconsistencies, and brand deviation.

Automation

48.Docker and CI pipeline extraction

Developer

Chromium fails in Docker and most CI environments without --no-sandbox. Add this flag to any pipeline step that runs Dembrandt in a container.

Basic CI extraction

Terminal

dembrandt app.example.com --no-sandbox --json-only > tokens.json

Save output in CI

Terminal

dembrandt app.example.com --no-sandbox --save-output

GitHub Actions step

- name: Extract design tokens

run: |

npx dembrandt ${{ env.SITE_URL }} --no-sandbox --json-only > tokens.json

- name: Upload tokens

uses: actions/upload-artifact@v4

with:

path: tokens.json

Output

Successful extraction in Docker or CI. No sandbox crash.

49.Track token drift

DeveloperDesignerQAEnterprise

Pin a release as the visual baseline. After the next sprint, extract again. The Dembrandt App shows exactly what changed: which tokens shifted, which disappeared, and which are new.

Extract baseline

Terminal

dembrandt app.example.com --save-output

Extract after next release

Terminal

dembrandt app.example.com --save-output

Agent prompt: ASCII diff

# Load both extraction JSON files into context, then:

"Compare these two extractions from the same site.

Show the token diff as an ASCII table:

TOKEN | BEFORE | AFTER | DELTA

Flag any change above 10% with ⚠️.

Summarize what changed and whether it looks like intentional

update or unintentional drift."

App workflow (visual diff)

# dembrandt.com/app

# 1. Drag baseline JSON → pin as baseline

# 2. Drag new extraction → compare against baseline

Output

ASCII token diff table with delta values + drift summary. Or visual diff in the Dembrandt App.

50.CI/CD drift detection

DeveloperEnterprise

Extract on every release and load into the Dembrandt App to diff against the pinned baseline. Teams that ship frequently catch visual drift before it accumulates into a rebrand.

Extract after each release

Terminal

dembrandt app.example.com --save-output

CI step: extract and archive

# In your pipeline, after deploy:

- name: Install dembrandt + Chromium

run: |

npm i dembrandt

npx playwright-core install --with-deps chromium

- name: Extract design tokens

run: npx dembrandt ${{ env.SITE_URL }} --save-output

- name: Archive extraction

uses: actions/upload-artifact@v4

with:

path: output/

Agent prompt: compare two archived extractions

# Download two artifact JSONs, load both into context, then:

"Compare these two extractions from the same site.

Show the token diff as an ASCII table:

TOKEN | BEFORE | AFTER | DELTA

Flag any change above 10% with ⚠️.

Summarize what changed and whether it looks like intentional

update or unintentional drift."

Output

Token snapshots archived per release. Agent produces ASCII diff on demand, no --compare flag needed.

51.Design drift detection in GitHub Actions

Developer

Add a design extraction step to your GitHub Actions pipeline. Archive tokens as build artifacts on every push so drift is traceable across every release.

Extract after deploy

Terminal

npx dembrandt $SITE_URL --no-sandbox --json-only > tokens.json

GitHub Actions workflow step

- name: Install dembrandt + Chromium

run: |

npm i dembrandt

npx playwright-core install --with-deps chromium

- name: Extract design tokens

run: npx dembrandt ${{ env.SITE_URL }} --no-sandbox --json-only > tokens.json

- name: Archive tokens

uses: actions/upload-artifact@v4

with:

path: tokens.json

retention-days: 90

Agent prompt: compare two workflow runs

# Download tokens.json from two GitHub Actions runs, then:

"Compare these two token snapshots from the same site.

Output an ASCII diff table:

TOKEN | RUN A (sha: xxxx) | RUN B (sha: yyyy) | DELTA | ⚠️

Flag any change above 10% as ⚠️.

Summarize: what changed between these two deployments?"

Output

Per-commit token snapshots in GitHub Actions artifacts. Traceable drift across every deployment.

52.CI drift gate (GitHub Actions)

DeveloperQA

Stop off-brand UI from merging. Extract the deploy preview, compare it against a baseline, and fail the build when design tokens drift.

Capture the baseline once (same environment you will check against)

Terminal

dembrandt https://example.com --json-only > baseline.json

In CI: compare the preview, fail on drift, write a report

Terminal

dembrandt "$PREVIEW" --compare baseline.json --html report.html

Accept an intentional change as the new baseline

Terminal

dembrandt https://example.com --compare baseline.json --approve

GitHub Actions: drift gate on every preview deploy

on: deployment_status # fires when the host finishes a preview deploy

jobs:

drift:

if: github.event.deployment_status.state == 'success'

runs-on: ubuntu-latest

env:

PREVIEW: ${{ github.event.deployment_status.environment_url }}

steps:

# Local install pulls the pinned browser driver (playwright-core);

# installing 'playwright' globally risks a version mismatch.

- run: npm i dembrandt

- run: npx playwright-core install --with-deps chromium

# production is the pinned baseline; any token change shows as drift

- run: npx dembrandt https://example.com --json-only > baseline.json

- run: npx dembrandt "$PREVIEW" --compare baseline.json --html report.html

- uses: actions/upload-artifact@v4

if: always()

with: { name: drift-report, path: report.html }

# Fuller version — a PR comment listing the exact tokens that changed,

# plus --approve to accept intended drift — is in examples/drift-gate.yml.

Output

Red check on drift (exit 1), green when stable. Self-contained HTML report as a build artifact, plus a 0-100 drift score per page.

Next steps

Install the CLI MCP server Agent skills Explore tokens