Skip to main content
Home/Recipes/Brand guide PDF vs. live site
AI Pipelines

Brand guide PDF vs. live site

DesignerQAAgency

Overview

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.

Brand guides and live products drift apart during sprints, handoffs, and quick fixes. The brand guide says the primary blue is #133174. Production says #1a3a8a. Nobody noticed. This workflow extracts the real token state from the live site and feeds both the extraction JSON and the original brand guide PDF into an AI agent. The agent compares them systematically, lists every divergence, and classifies each as intentional (a product-level decision) or drift (an unintended deviation). The output is a concrete remediation list, not a subjective visual review.

Extract live tokens

Terminal
dembrandt example.com --save-output
Claude Code prompt
# Drag extraction JSON and brand guide PDF into context, then:
"Compare this extraction against the brand guide PDF.
Output an ASCII table:
TOKEN | BRAND GUIDE | PRODUCTION | DELTA | CLASS
(class: intentional / drift / unknown)
Flag differences above 10% as ⚠️.
Intentional = documented exception or product-level decision.
Drift = production diverged without a clear reason.
End with a remediation list: drift items only, ordered by visual impact."
Output

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

More in AI Pipelines

Clone a brand's design languageBuild a design system in Claude CodeRebrand an existing applicationCross-app token comparisonBuild 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