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

Name: Dembrandt
Author: Dembrandt

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 language Build a design system in Claude Code Rebrand an existing application Brand guide PDF vs. live site Cross-app token comparison Build a design system in Figma via MCP Paste tokens to Figma Make Improve a Google Stitch prompt with brand context Author a design system from screenshots, brand guide, and tokens in Figma or Penpot Build on-brand UI in Claude artifacts Generate a branded presentation Find tokens that fit a page's purpose

Browse all

All recipes →

45 workflows