26.Build a design system in Figma via MCP

Name: Dembrandt
Author: Dembrandt

DesignerDeveloper

Overview

Crawl any live site with Dembrandt, then use the Figma MCP to push the extracted tokens directly into a linked Figma frame or section: colors as styles, type as text styles, and spacing as variables.

Figma MCP lets an AI agent read and write to a Figma file directly from Claude Code or Cursor. Combined with a Dembrandt extraction, the workflow becomes: crawl the live site to get the real token values, then instruct the agent to create Figma color styles, text styles, and local variables from the extracted data, writing them into a specific frame or section you point it at. The result is a Figma design system foundation built from what actually ships, not from memory or approximation. No manual token entry or copy-pasting hex values one by one.

How it works

Loading diagram...

Crawl the live site

Terminal

dembrandt brand.com --crawl 3 --json-only

Claude Code prompt (Figma MCP active)

# With Figma MCP connected and extraction JSON in context:

"Open the Figma file at [file URL] and navigate to the frame named [Design System].

Using the extracted tokens:

1. Create local color styles for every color in the palette,

named semantically (Brand/Primary, Brand/Accent, Surface/Default, Text/Primary, etc.)

2. Create text styles for each step in the type scale,

named by size and weight (Body/Base, Heading/Large, Label/Small, etc.)

3. Create local variables for spacing values (space-1 through space-16)

and border radii.

Apply all styles to the design system frame."

Output

Figma file populated with color styles, text styles, and local variables derived from the live brand. Ready to build components on top of.

More in AI Pipelines

21.Clone a brand's design language 22.Build a design system in Claude Code 23.Rebrand an existing application 24.Brand guide PDF vs. live site 25.Cross-app token comparison 27.Paste tokens to Figma Make 28.Improve a Google Stitch prompt with brand context 29.Generate a branded presentation 30.Find tokens that fit a page's purpose

Browse all

All recipes →

43 workflows