Recipes

Name: Dembrandt
Author: Dembrandt

57 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, no flags

Terminal

dembrandt stripe.com

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.ML-powered brand primary detection

DesignerDeveloperAgency

When a palette has four strong colors and two plausible brand primaries, the heuristic picks wrong. Add --ai and a trained model identifies the actual brand primary. One flag, experimental.

Predict brand primary with ML

Terminal

dembrandt example.com --ai

Install the optional runtime first

Terminal

npm install onnxruntime-node

Combine with other flags

Terminal

dembrandt example.com --ai --save-output

Agent prompt: use ML primary in code generation

# Extract with --ai, load the JSON, then:

"Use the colors.semantic.primary value from this extraction

as the brand primary. It was predicted by the ML model.

Build a landing page hero section using that color as the

primary CTA color, with accessible contrast on white."

Output

colors.semantic.primary set to the ML-predicted brand primary. Terminal prints the score and accuracy.

3.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.

4.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.

5.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.

6.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.

7.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.

8.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.

9.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.

10.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

11.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.

12.Cross-pollinate extraction with brand context

DesignerDeveloperPMAgency

Extracting a design system from a website alone is not an accurate way to reverse-engineer a brand. Combine Dembrandt's live extraction with the rest of your context (a brand guide, a Figma export, an existing token file, a Storybook, a screenshot) and the agent reconciles them into one reliable token set.

Crawl the marketing site across key paths

Terminal

dembrandt example.com /products /dashboard /settings --save-output

Crawl the app across key paths

Terminal

dembrandt app.example.com /home /projects /preferences --save-output

Context you can drop in (anything the editor reads)

# Each source improves a different part of the result:

# brand-guide.pdf intended palette, type, voice

# design.md prior decisions and constraints

# tailwind.config / CSS anchors output to your real token values

# Storybook / components component-level ground truth

# tokens.json (DTCG) structured tokens from Tokens Studio

# competitor extraction a benchmark to compare against

# screenshot / poster visual reference for off-system values

Agent prompt: combine extraction with loaded context

# Drag [brand-guide.pdf] and [design.md] into context, then:

"Using the attached [brand-guide.pdf] and [design.md], crawl

example.com /products /dashboard and /settings with Dembrandt.

Combine that result with a second extraction of app.example.com,

crawling /home /projects and /preferences.

Output all design system differences in an ASCII table, with a

suggested next step per row, and point out the gaps or mistakes

against the brand guide that need action from my side."

Output

One reconciled token set from the live product plus loaded context, with an ASCII diff table and a list of gaps against the brand guide.

13.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.

14.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.

15.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.

16.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.

17.Build a design system foundation in Figma or Penpot via MCP

DesignerDeveloper

Extract any live site with Dembrandt, then use the Figma MCP or the official Penpot MCP to push the real token values straight into the design tool. Figma gets color styles, text styles, and variables. Penpot gets a native design-token set: colors, spacing, radii, and type primitives in the Tokens catalog.

Extract the live site

Terminal

dembrandt example.com --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."

Claude Code prompt (Penpot MCP active)

# Penpot ships an official MCP server (help.penpot.app/mcp/).

# Connect it to your agent, then with the extraction JSON in context:

"In the connected Penpot file, create a design-token set named [brand].

Add native design tokens using the exact extracted values, do not invent any:

1. color tokens for every palette color, named semantically

(color.brand.primary, color.surface.default, color.text.primary, ...)

2. spacing tokens for the spacing scale (space.1 ... space.32)

3. borderRadius tokens (radius.sm / md / lg / full)

4. fontSizes, fontWeights, and fontFamilies tokens for the type scale

List anything you could not set and why."

Output

Figma: a file populated with color styles, text styles, and variables. Penpot: a native design-token set (colors, spacing, radii, font sizes, weights, families) in the Tokens catalog, themeable and bindable to shape properties. Both derived from the live brand and ready to build components on.

18.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.

19.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.

20.Give your brand videos a motion language

DesignerMarketingDeveloper

AI-generated video looks generic because the agent doesn't know your brand. Extract a DESIGN.md with one command, let HeyGen's HyperFrames extend it into a FRAME.md motion language, and every video you generate moves like your brand.

Extract DESIGN.md from your live site

Terminal

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

Crawl key pages for a fuller token set

Terminal

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

Agent prompt: add a voice section on top

# With the extracted DESIGN.md in context:

"Read 3-5 real headlines from example.com and derive our voice

and tone rules from them. Add a Voice section to this DESIGN.md:

2-3 adjectives, sentence length, capitalization habits, and hard

rules ('always X, never Y'). Keep every extracted token untouched."

HyperFrames prompt: watch your brand move

# Upload DESIGN.md at hyperframes.dev/design, download FRAME.md,

# drop it in your project folder, then:

"/hyperframes

Here's my FRAME.md. Make a 20-second 1920x1080 brand reel that

brings it to life: open on the wordmark and palette, show the

typography at work, build one sample UI card in this design

system, and close on the logo. Every entrance, exit, and

transition should follow the motion language in the file."

Output

A FRAME.md that travels with every video you generate, and a 20-second brand reel where every entrance, exit, and transition follows your brand's motion language.

21.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.

22.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.

23.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.

24.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.

25.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.

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.

35.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.

36.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

37.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.

38.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.

39.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.

40.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.

41.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. Then ask an agent to turn the data into a one-page brief you can send the day before the meeting.

CLI commands

Extract and crawl the prospect site

Terminal

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

Agent prompt: turn extraction into a client brief

You have the JSON output from a Dembrandt extraction of a prospect's live website.

Write a short brief — no headers, no bullet lists, plain paragraphs — that a senior

account director would send to a prospect the evening before a first meeting.

Goal: the prospect reads it and wants to be in the room tomorrow.

Use only what the data actually shows. Quote specific values when they reveal

something: a contrast ratio, a hex that appears 11 times when there should be 3,

a font stack with 6 weights. Don't quote values that don't say anything.

Don't flatter. Don't editorialize. If something is genuinely good, say so once.

If something is broken, say what it is and why it matters — not in design terms,

in business terms.

No agency language. No "holistic", "cohesive", "seamless", "elevate". Write like

you already know their business and have done your homework.

Run this as an agent prompt (MCP)

Agent prompt · MCP active

You have a Dembrandt extraction of a prospect's live website. Write a short

pre-meeting brief — plain paragraphs, no headers or bullets — that a senior account

director would send the evening before a first meeting. Quote specific token values

only when they reveal something concrete. No agency language, no flattery. The

prospect should read it and want to be in the room tomorrow.

Output

Brand guide PDF + WCAG report from the CLI. Agent produces a one-page pre-pitch brief ready to send to the prospect.

42.Client-branded audit report

AgencyPM

Run an audit of any site, then render the findings as a document that looks like it was made by your client — using their own colors, fonts, and voice. Two extractions, one polished deliverable.

CLI commands

Extract the site being audited

Terminal

dembrandt prospect.example.com --wcag --crawl 10 --save-output

Extract your client's own site for brand context

Terminal

dembrandt client.example.com --brand-guide --save-output

Agent prompt: render audit in client's brand

You have two inputs:

1. A Dembrandt extraction of the site being audited (audit-target.json)

2. Either a Dembrandt extraction of the client's own site (client-brand.json)

or a brand guide PDF attached to this conversation.

Write a concise audit of the first site — what the data shows about their color

discipline, typography consistency, spacing system, and WCAG compliance. Quote

specific values when they reveal something concrete.

Then render this as a self-contained HTML document styled with the client's brand:

use their primary color for headings and accents, their font stack, their border

radius and spacing rhythm. The document should look like it came from their design

system, not from a generic report template.

Tone: match the voice in the client's brand guide if one is provided. Otherwise

infer it from their site — formal or conversational, technical or editorial.

Run this as an agent prompt (MCP)

Agent prompt · MCP active

You have a Dembrandt extraction of a site to audit and either a second extraction

or brand guide PDF for the client receiving the report. Write a concise audit of

the first site using specific token values as evidence. Render the findings as HTML

styled with the client's own colors, fonts, and spacing. The document should look

like it belongs in their design system.

Output

A self-contained HTML audit report styled with the client's own brand tokens — ready to send without further design work.

43.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.

44.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.

45.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.

46.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

47.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.

48.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.

49.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)

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.

53.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.

54.Automated drift tracking with an API key

DeveloperQAEnterprise

Generate an API key, then pass --key to the CLI. Every run uploads a snapshot to your account and is scored against the previous one for that domain. Drift over time with nothing to save by hand.

Push a snapshot to your account

Terminal

dembrandt app.example.com --key dmb_xxx

Push from a container or CI runner

Terminal

dembrandt app.example.com --key dmb_xxx --no-sandbox

GitHub Actions: snapshot after every production deploy

# .github/workflows/drift.yml

# Store key as repo secret: DEMBRANDT_KEY

on:

deployment_status:

jobs:

snapshot:

if: >

github.event.deployment_status.state == 'success' &&

github.event.deployment_status.environment == 'Production'

runs-on: ubuntu-latest

steps:

- uses: actions/setup-node@v4

with:

node-version: 24

# Cache the browser so it is downloaded once, not every run

- name: Cache Playwright Chromium

uses: actions/cache@v4

with:

path: ~/.cache/ms-playwright

key: playwright-chromium-${{ runner.os }}

- name: Install Chromium

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

- name: Snapshot

env:

DEMBRANDT_KEY: ${{ secrets.DEMBRANDT_KEY }}

# Snapshots group by hostname. Only use the event URL when production

# always resolves to one canonical host; otherwise hardcode it.

TARGET_URL: ${{ github.event.deployment_status.target_url }}

# Over quota (20/hr, 200/day, 500/wk) the upload is skipped with a

# warning and the step still exits 0 — it never fails the pipeline.

run: |

npx -y dembrandt@latest "$TARGET_URL" --key "$DEMBRANDT_KEY" --no-sandbox

Where the history lives

# dembrandt.com/app/extractions

# Cloud column, open the domain, scrub the timeline.

# The drift panel shows what changed between snapshots.

Output

One cloud snapshot per run, grouped by domain, auto-scored against the previous one. Timeline and drift report in the App, no files to manage.

55.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.

56.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.

57.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