Skip to main content
AI Pipelines

Turn a live site plus brand guide into a Figma design system

DesignerDeveloperAgency

Overview

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 every shipped surface to DESIGN.md and hand the agent that plus the brand guide PDF. Where they agree, the value is the foundation. Where they differ, the conflict goes to a human: guide or production.

Two sources beat one.

With the Figma MCP connected the agent writes the color and text styles, the spacing and radius variables, and components built on them, instead of you copying hex by hex.

How it works

Loading diagram...

Crawl the live site to DESIGN.md

Terminal
dembrandt example.com --crawl 5 --design-md --save-output

Add a gated surface (app, dashboard)

Terminal
dembrandt app.example.com --design-md --save-output
Claude Code prompt (Figma MCP active, DESIGN.md + brand guide in context)
# With DESIGN.md and the brand guide PDF both in context,
# and the Figma MCP connected to the target file:
"You have two sources: DESIGN.md extracted from the live site,
and the client's existing brand guide PDF.
1. Reconcile them. Where the guide and the live tokens agree,
treat that value as the system foundation. Where they differ,
list the conflict (token, guide value, live value) and pick the
guide value by default, noting it for human review.
2. Open the Figma file at [file URL], frame [Design System].
3. Create color styles and text styles from the reconciled tokens,
named semantically (Brand/Primary, Surface/Default, Heading/Large).
4. Create local variables for spacing and border radius.
5. Build starter components on those styles: Button, Input, Card.
Report the conflict list at the end."
Verify nothing was hardcoded
# Export the token set from the design tool and diff it against the
# extraction. Values present only in the design file were invented;
# tokens bound to no shape are dead.
dembrandt example.com --dtcg --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 and a diff proving no value was invented on the way in.

More in AI Pipelines

Clone a brand's design languageCross-pollinate extraction with brand contextBuild a design system in Claude CodeRebrand an existing applicationBrand guide PDF vs. live siteCross-app token comparisonBuild a design system foundation in Figma or Penpot via MCPPaste tokens to Figma MakeImprove a Google Stitch prompt with brand contextGive your brand videos a motion languageAuthor a design system from screenshots, brand guide, and tokens in Figma or PenpotOne design system from several products, as three variantsBuild 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 →

64 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

43 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