# Dembrandt Recipes

> CLI commands, AI agent prompts, and full pipelines for extracting design tokens from any website and feeding them to AI tools (Claude, Cursor, GitHub Copilot, Figma MCP, Figma Make, Google Stitch) and codebases.

45 recipes. Full pages at https://dembrandt.com/recipes/[id].

## Extraction

### Basic token extraction
URL: https://dembrandt.com/recipes/basic-extraction
Audience: Designer, Developer | Time: 30 sec

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: `dembrandt stripe.com --json-only`
- Save to output folder: `dembrandt stripe.com --save-output`

Agent prompt:
```
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.

### Multi-page crawl
URL: https://dembrandt.com/recipes/crawl-and-inspect
Audience: Designer, Developer, QA | Time: 2 min

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: `dembrandt stripe.com --crawl 5 --save-output`
- Extract two pages to compare: `dembrandt stripe.com /products /settings --save-output`
- Discover via sitemap: `dembrandt stripe.com --sitemap --save-output`

Agent prompt:
```
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.

### Dark mode analysis
URL: https://dembrandt.com/recipes/dark-mode-analysis
Audience: Developer, QA, Designer | Time: 2 min

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: `dembrandt vercel.com --save-output`
- Extract dark mode: `dembrandt vercel.com --dark-mode --save-output`

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

### Screenshot + token visual audit
URL: https://dembrandt.com/recipes/screenshot-visual-audit
Audience: Designer, Developer | Time: 2 min

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: `dembrandt example.com --save-output --screenshot /tmp/brand.png`

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

### DTCG export to Tokens Studio or Figma Variables
URL: https://dembrandt.com/recipes/dtcg-tokens-studio
Audience: Designer, Developer | Time: 5 min

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: `dembrandt example.com --dtcg --save-output`

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

### Extract and merge tokens across key pages
URL: https://dembrandt.com/recipes/paths-targeted-merge
Audience: Designer, Developer, PM | Time: 2 min

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.

- Merge tokens across key pages: `dembrandt example.com /pricing /features /about --save-output`
- For per-page analysis, extract each path separately: `dembrandt example.com --save-output`
- ...then the page you want to compare: `dembrandt example.com/pricing --save-output`

Agent prompt:
```
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.

### Raw vs. filtered color analysis
URL: https://dembrandt.com/recipes/raw-colors-analysis
Audience: Designer, Developer | Time: 3 min

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: `dembrandt example.com --save-output`
- Extract with raw colors: `dembrandt example.com --raw-colors --save-output`

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

### Extract Cloudflare-protected sites with Firefox
URL: https://dembrandt.com/recipes/firefox-cloudflare
Audience: Developer | Time: 2 min

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: `dembrandt protected.example.com --browser firefox --save-output`
- Firefox + stealth: `dembrandt protected.example.com --browser firefox --stealth --save-output`
- Full disguise: `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.

### Extract authenticated views via CDP
URL: https://dembrandt.com/recipes/cdp-authenticated
Audience: Developer | Time: 10 min

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: `google-chrome --remote-debugging-port=9222`
- Extract authenticated view: `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

### Clone a brand's design language
URL: https://dembrandt.com/recipes/clone-brand
Audience: Developer, Designer, Agency | Time: 5 min

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: `dembrandt stripe.com --design-md --save-output`

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

### Build a design system in Claude Code
URL: https://dembrandt.com/recipes/design-system-claude-code
Audience: Developer, Designer | Time: 5 min

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: `dembrandt example.com --design-md`

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

### Rebrand an existing application
URL: https://dembrandt.com/recipes/rebrand-existing-app
Audience: Developer, Designer, Agency | Time: 10 min

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: `dembrandt new.example.com --save-output`

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

### Brand guide PDF vs. live site
URL: https://dembrandt.com/recipes/pdf-vs-live
Audience: Designer, QA, Agency | Time: 5 min

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: `dembrandt example.com --save-output`

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

### Cross-app token comparison
URL: https://dembrandt.com/recipes/cross-app-comparison
Audience: Designer, PM, QA, Enterprise | Time: 10 min

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: `dembrandt example.com --save-output`
- Extract app: `dembrandt app.example.com --save-output`
- Extract docs: `dembrandt docs.example.com --save-output`

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

### Build a design system in Figma via MCP
URL: https://dembrandt.com/recipes/figma-mcp-design-system
Audience: Designer, Developer | Time: 10 min

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: `dembrandt example.com --crawl 3 --json-only`

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

### Paste tokens to Figma Make
URL: https://dembrandt.com/recipes/paste-to-figma-make
Audience: Designer | Time: 2 min

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: `dembrandt example.com --json-only`

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

### Improve a Google Stitch prompt with brand context
URL: https://dembrandt.com/recipes/improve-stitch-prompt
Audience: Designer, Developer | Time: 3 min

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: `dembrandt example.com --json-only`

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

### Turn a live site plus brand guide into a Figma design system
URL: https://dembrandt.com/recipes/brand-guide-to-figma-design-system
Audience: Designer, Developer, Agency | Time: 20 min

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: `dembrandt example.com --crawl 5 --design-md --save-output`
- Add a gated surface (app, dashboard): `dembrandt app.example.com --design-md --save-output`

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.

### Author a design system from screenshots, brand guide, and tokens in Figma or Penpot
URL: https://dembrandt.com/recipes/multimodal-context-design-system
Audience: Designer, Developer, Agency | Time: 30 min

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: `dembrandt example.com --crawl 5 --screenshot ./current.png --brand-guide --design-md --save-output`
- Add a gated surface: `dembrandt app.example.com --screenshot ./app.png --design-md --save-output`

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.

### Build on-brand UI in Claude artifacts
URL: https://dembrandt.com/recipes/claude-artifacts-on-brand
Audience: Designer, Developer, PM | Time: 3 min

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: `dembrandt example.com --json-only`

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

### Generate a branded presentation
URL: https://dembrandt.com/recipes/presentation-theme
Audience: PM, Designer, Marketing | Time: 3 min

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: `dembrandt example.com --json-only`

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

### Find tokens that fit a page's purpose
URL: https://dembrandt.com/recipes/tokens-for-purpose
Audience: Designer, Developer | Time: 5 min

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.

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

## Brand & Docs

### Generate a brand guide PDF
URL: https://dembrandt.com/recipes/brand-guide-pdf
Audience: Designer, Agency, Marketing, PM | Time: 1 min

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: `dembrandt example.com --brand-guide`
- Crawl then export: `dembrandt example.com --crawl 3 --brand-guide`
- Pull a legacy surface too, then export: `dembrandt app.example.com --save-output`

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

### Does the brand feel like what it claims to be?
URL: https://dembrandt.com/recipes/brand-values-audit
Audience: Designer, Marketing, Agency | Time: 10 min

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.

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

## Code & Tokens

### Design-system-aware Cursor project
URL: https://dembrandt.com/recipes/cursor-design-aware
Audience: Developer | Time: 5 min

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: `dembrandt example.com --design-md`

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

### Give GitHub Copilot brand context
URL: https://dembrandt.com/recipes/copilot-design-context
Audience: Developer | Time: 5 min

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: `dembrandt example.com --design-md`

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

### Refactor hardcoded colors to token variables
URL: https://dembrandt.com/recipes/cursor-refactor-hardcoded
Audience: Developer | Time: 10 min

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: `dembrandt app.example.com --json-only`

Output: Codebase with hardcoded values replaced by token variables.

### Tailwind defaults to brand theme
URL: https://dembrandt.com/recipes/migration-tailwind
Audience: Developer | Time: 10 min

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

- Extract brand tokens: `dembrandt example.com --save-output`

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

### Legacy CSS to design tokens
URL: https://dembrandt.com/recipes/migration-legacy-css
Audience: Developer, Enterprise | Time: 15 min

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: `dembrandt app.example.com --crawl 5 --save-output`

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

### Generate a shadcn/ui theme from any website
URL: https://dembrandt.com/recipes/shadcn-theme-from-website
Audience: Developer | Time: 5 min

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: `dembrandt example.com --save-output`

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

### Export design tokens to Storybook
URL: https://dembrandt.com/recipes/storybook-design-tokens
Audience: Developer, Designer | Time: 10 min

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: `dembrandt example.com --save-output`

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

### Extract design tokens for a Next.js application
URL: https://dembrandt.com/recipes/nextjs-design-tokens
Audience: Developer | Time: 5 min

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: `dembrandt example.com --save-output`

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

## Audit & Compliance

### WCAG accessibility audit
URL: https://dembrandt.com/recipes/wcag-audit
Audience: QA, Developer, Designer, PM | Time: 1 min

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: `dembrandt stripe.com --wcag --save-output`
- Crawl then audit: `dembrandt stripe.com --crawl 5 --wcag --save-output`

Agent prompt:
```
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.

### Full audit pack in one command
URL: https://dembrandt.com/recipes/full-audit-pack
Audience: QA, Designer, Agency | Time: 2 min

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: `dembrandt example.com --brand-guide --screenshot ./audit.png --save-output`
- With crawl: `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.

### Agency pre-sales audit
URL: https://dembrandt.com/recipes/agency-presales
Audience: Agency, PM | Time: 5 min

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

### Cultural color and token audit
URL: https://dembrandt.com/recipes/cultural-color-audit
Audience: Designer, Marketing, Agency | Time: 10 min

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: `dembrandt example.com --locale ja-JP --timezone Asia/Tokyo --save-output`
- Extract Middle Eastern market: `dembrandt example.com --locale ar-SA --timezone Asia/Riyadh --save-output`
- Extract with Finnish locale: `dembrandt example.com --locale fi-FI --timezone Europe/Helsinki --save-output`

Agent prompt:
```
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.

## Competitive Research

### Competitor benchmarking
URL: https://dembrandt.com/recipes/competitor-benchmark
Audience: PM, Designer, Marketing, Agency | Time: 5 min

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: `dembrandt linear.app --save-output`
- Extract competitor B: `dembrandt height.app --save-output`
- Extract competitor C: `dembrandt asana.com --save-output`

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

### Discover a competitor's visual strategy
URL: https://dembrandt.com/recipes/brand-intelligence
Audience: PM, Designer, Marketing | Time: 10 min

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: `dembrandt stripe.com --save-output`
- Extract competitor B: `dembrandt linear.app --save-output`
- Extract competitor C: `dembrandt notion.so --save-output`

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

### Compare Stripe, Linear and Notion design systems
URL: https://dembrandt.com/recipes/compare-stripe-linear-notion
Audience: Designer, PM, Developer | Time: 10 min

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: `dembrandt stripe.com --crawl 3 --save-output`
- Extract Linear: `dembrandt linear.app --crawl 3 --save-output`
- Extract Notion: `dembrandt notion.so --crawl 3 --save-output`

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

## Integrations

### Extract tokens via MCP
URL: https://dembrandt.com/recipes/mcp-agent-extraction
Audience: Developer, Designer | Time: 30 sec

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

Output: Tokens extracted and available in the agent's context.

### Design review with Dembrandt Skills
URL: https://dembrandt.com/recipes/skills-design-review
Audience: Designer, Developer | Time: 5 min

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.

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

## Automation

### Docker and CI pipeline extraction
URL: https://dembrandt.com/recipes/no-sandbox-ci
Audience: Developer | Time: 5 min

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: `dembrandt app.example.com --no-sandbox --json-only > tokens.json`
- Save output in CI: `dembrandt app.example.com --no-sandbox --save-output`

Output: Successful extraction in Docker or CI. No sandbox crash.

### Track token drift
URL: https://dembrandt.com/recipes/app-drift-tracking
Audience: Developer, Designer, QA, Enterprise | Time: 2 min

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: `dembrandt app.example.com --save-output`
- Extract after next release: `dembrandt app.example.com --save-output`

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

### CI/CD drift detection
URL: https://dembrandt.com/recipes/ci-drift-enforcement
Audience: Developer, Enterprise | Time: 10 min

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: `dembrandt app.example.com --save-output`

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

### Design drift detection in GitHub Actions
URL: https://dembrandt.com/recipes/github-actions-design-drift
Audience: Developer | Time: 15 min

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: `npx dembrandt $SITE_URL --no-sandbox --json-only > tokens.json`

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