# 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. 53 recipes. Full pages at https://www.dembrandt.com/recipes/[id]. ## Extraction ### Basic token extraction URL: https://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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. ### Cross-pollinate extraction with brand context URL: https://www.dembrandt.com/recipes/cross-pollinate-context Audience: Designer, Developer, PM, Agency | Time: 5 min 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: `dembrandt example.com /products /dashboard /settings --save-output` - Crawl the app across key paths: `dembrandt app.example.com /home /projects /preferences --save-output` 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. ### Build a design system in Claude Code URL: https://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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 guardrail for AI-generated UI URL: https://www.dembrandt.com/recipes/agent-brand-guardrail Audience: Developer | Time: 5 min Give your AI coding agent a brand baseline it cannot drift from. The agent extracts your live brand, builds UI, then scores its own output before you ever see it. Agent prompt: ``` Extract the design tokens from example.com and treat them as the brand baseline. Build the new settings page. Before showing me the result, extract its rendered tokens and run compute_drift against the baseline. If the drift score is above 10, list what drifted and fix it so the page stays on brand. ``` Output: AI-built UI that is provably on-brand: a drift score under threshold, with the agent self-correcting colors, type, and spacing before handoff. ## Brand & Docs ### Generate a brand guide PDF URL: https://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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. ### Design due diligence for M&A URL: https://www.dembrandt.com/recipes/ma-design-due-diligence Audience: PM, Agency, Enterprise | Time: 5 min 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. - Audit the acquisition target: `dembrandt target.example.com --crawl 5 --wcag --brand-guide --save-output` Agent prompt: ``` 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. ### Mobile vs desktop token consistency URL: https://www.dembrandt.com/recipes/mobile-desktop-consistency Audience: Designer, Developer, QA | Time: 1 min Responsive coherence breaks quietly: type stops scaling, spacing rhythm shifts, touch targets shrink. Extract both viewports and flag every inconsistency between them. - Desktop (default viewport): `dembrandt example.com --save-output` - Mobile viewport: `dembrandt example.com --mobile --save-output` Agent prompt: ``` 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. ### Full audit pack in one command URL: https://www.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://www.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://www.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. ### Staging vs production drift check URL: https://www.dembrandt.com/recipes/staging-vs-production-drift Audience: QA, Developer | Time: 3 min Verify staging matches production before you promote. Extract both, diff the tokens, and see exactly which colors, sizes, or spacing moved. - Pin production as the baseline: `dembrandt https://example.com --json-only > prod.json` - Compare staging against it: `dembrandt https://staging.example.com --compare prod.json --html diff.html` Agent prompt: ``` 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. ### Pre-sales brand and accessibility audit URL: https://www.dembrandt.com/recipes/pre-sales-brand-audit Audience: Agency, Designer, PM | Time: 5 min 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. - Audit contrast on the prospect's site: `dembrandt https://prospect.example.com --wcag --html audit.html` - Crawl key pages to surface cross-page inconsistency: `dembrandt https://prospect.example.com --crawl 5 --wcag --save-output` Agent prompt: ``` 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. ### Client delivery sign-off report URL: https://www.dembrandt.com/recipes/client-delivery-signoff Audience: PM, Agency, Developer | Time: 3 min 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. - Pin the client's live brand as the baseline: `dembrandt https://example.com --json-only > client-brand.json` - Compare the delivered build, write the sign-off report: `dembrandt https://delivery.example.com --compare client-brand.json --html signoff.html` Agent prompt: ``` 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 ### Competitor benchmarking URL: https://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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. ### CI drift gate (GitHub Actions) URL: https://www.dembrandt.com/recipes/ci-drift-gate Audience: Developer, QA | Time: 10 min 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): `dembrandt https://example.com --json-only > baseline.json` - In CI: compare the preview, fail on drift, write a report: `dembrandt "$PREVIEW" --compare baseline.json --html report.html` - Accept an intentional change as the new baseline: `dembrandt https://example.com --compare baseline.json --approve` 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.