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.

Two sources beat one. Crawl every shipped surface with Dembrandt and export DESIGN.md. Hand the agent that file and the brand guide PDF. Agreeing values become the foundation. Diverging values are flagged for a human to resolve, guide or production. With the Figma MCP connected, the agent creates the styles and variables in the file directly: color styles, text styles, spacing and radius variables, and components built on them. The hex-by-hex copying and style naming you would do by hand happens in the session instead. The system is grounded in what the brand ships, not in defaults.

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."
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.

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 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 →

57 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