Recipes

Name: Dembrandt
Author: Dembrandt

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

Extract and print JSON

Terminal

dembrandt stripe.com --json-only

Save to output folder

Terminal

dembrandt stripe.com --save-output

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.

Crawl up to 5 pages

Terminal

dembrandt stripe.com --crawl 5 --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?"

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.Mobile vs. desktop token comparison

DesignerDeveloperQA

Extract the same site at desktop and mobile viewport. Ask an AI to identify which tokens change between breakpoints and which stay fixed — finding type scales that don't adapt, spacing that ignores viewport, or radii that differ unexpectedly.

Extract desktop

Terminal

dembrandt brand.com --save-output

Extract mobile viewport

Terminal

dembrandt brand.com --mobile --save-output

Agent prompt

# Load both extractions, then:

"Compare these two extractions from the same site,

one desktop one mobile. Which tokens change between

viewports and which stay fixed? Flag any type sizes

that don't scale, spacing that stays identical, or

radii that differ unexpectedly."

Output

Per-token viewport diff: what adapts responsively and what is hardcoded across breakpoints.

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 brand.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 brand.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 specific paths and merge

DesignerDeveloperPM

Pass multiple paths in one command to extract and merge tokens from targeted sections. Then ask an AI which tokens are unique to each path — revealing page-specific design decisions.

Extract and merge specific paths

Terminal

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

Agent prompt

# Extract paths separately then compare, or load merged output:

"Which tokens appear only on /pricing but not on the homepage?

These are likely conversion-specific design decisions.

Describe the visual strategy difference between the marketing

pages and the product pages based on the token data."

Output

Merged token set from targeted paths + per-page token strategy analysis.

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 brand.com --save-output

Extract with raw colors

Terminal

dembrandt brand.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-site.com --browser firefox --save-output

Firefox + stealth

Terminal

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

Full disguise

Terminal

dembrandt protected-site.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.company.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.company.com/dashboard --save-output

Output

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

Audit & Compliance

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

Full WCAG audit

Terminal

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

Crawl then audit

Terminal

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

Output

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

12.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 client.com --brand-guide --screenshot ./audit.png --save-output

With crawl

Terminal

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

13.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.com --wcag --brand-guide --save-output

Output

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

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

Extract with target locale

Terminal

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

Extract Middle Eastern market

Terminal

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

Extract with Finnish locale

Terminal

dembrandt brand.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."

Output

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

Brand & Docs

15.Generate a brand guide PDF

DesignerAgencyMarketing

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 use it as AI context to protect the brand in every future AI-generated asset.

Export PDF

Terminal

dembrandt client.com --brand-guide

Crawl then export

Terminal

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

Output

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

16.Reconstruct a missing brand guide

DesignerAgencyPM

Client has no brand guide, or a 2019 PDF nobody follows. Extract the live site, the legacy app, and any sub-domains. What ships is the real brand. Generate the document from that.

Extract main site

Terminal

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

Extract legacy app

Terminal

dembrandt app.client.com --save-output

Generate PDF

Terminal

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

Output

Token files per surface + a PDF brand guide built from what actually shipped.

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

Competitive Research

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

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

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

AI Pipelines

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

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

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

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

25.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 company.com --save-output

Extract app

Terminal

dembrandt app.company.com --save-output

Extract docs

Terminal

dembrandt docs.company.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.

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

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

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

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

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

Code & Tokens

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

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

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

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

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

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

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

Automation

38.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.company.com --no-sandbox --json-only > tokens.json

Save output in CI

Terminal

dembrandt app.company.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.

39.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.company.com --save-output

Extract after next release

Terminal

dembrandt app.company.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.

40.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.company.com --save-output

CI step: extract and archive

# In your pipeline, after deploy:

- name: Extract design tokens

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

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

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

Integrations

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

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