Skip to main content
Home/Recipes/Cross-app token comparison
AI Pipelines

Cross-app token comparison

DesignerPMQAEnterprise

Overview

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.

Large organizations run multiple digital products simultaneously: a marketing site, a SaaS application, a documentation portal, a mobile app, each maintained by different teams. Without a shared enforcement layer, the visual identity of each surface drifts independently. Extract tokens from all active surfaces, then ask an AI agent to compare them: which values are shared across all products (the true brand baseline), which differ by product (intentional product-level variation), and which differ inconsistently (unintentional drift that should be fixed).

Extract main site

Terminal
dembrandt example.com --save-output

Extract app

Terminal
dembrandt app.example.com --save-output

Extract docs

Terminal
dembrandt docs.example.com --save-output
Claude Code prompt
# If component-family-consistency skill is installed, activate it first.
# Load all three extractions, then:
"Compare these three token sets. Output two tables:
SHARED TOKENS (appear in all three with <10% variance):
TOKEN | VALUE | NOTES
DIVERGING TOKENS:
TOKEN | MAIN SITE | APP | DOCS | DELTA | VERDICT
(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.

More in AI Pipelines

Clone a brand's design languageBuild a design system in Claude CodeRebrand an existing applicationBrand guide PDF vs. live siteBuild a design system in Figma via MCPPaste tokens to Figma MakeImprove a Google Stitch prompt with brand contextTurn a live site plus brand guide into a Figma design systemAuthor a design system from screenshots, brand guide, and tokens in Figma or PenpotBuild on-brand UI in Claude artifactsGenerate a branded presentationFind tokens that fit a page's purposeBrand guardrail for AI-generated UI

Browse all

All recipes →

52 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more