AI Pipelines

Build a design system foundation in Figma or Penpot via MCP

Name: Dembrandt
Author: Dembrandt

DesignerDeveloper

Overview

Extract any live site with Dembrandt, then use the Figma MCP or the official Penpot MCP to push the real token values straight into the design tool. Figma gets color styles, text styles, and variables. Penpot gets a native design-token set: colors, spacing, radii, and type primitives in the Tokens catalog.

Both tools expose an MCP server an agent can author into. Extract the live site, then tell the agent to write the values in the connected file. Figma gets color styles, text styles and local variables.

No hex typed by hand.

Penpot gets a native token set that binds to shape properties and is themeable:

color
spacing
borderRadius
fontSizes, fontWeights, fontFamilies
letterSpacing

Tested end to end: one extraction plus one Penpot MCP pass produced a 38-token set.

Penpot Tokens panel showing a design-token set generated from a Dembrandt extraction — A native design-token set authored into Penpot in one MCP pass: colors, spacing, radii, and type primitives from the live extraction.

Extract the live site

Terminal

dembrandt example.com --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."

Claude Code prompt (Penpot MCP active)

# Penpot ships an official MCP server (help.penpot.app/mcp/).

# Connect it to your agent, then with the extraction JSON in context:

"In the connected Penpot file, create a design-token set named [brand].

Add native design tokens using the exact extracted values, do not invent any:

1. color tokens for every palette color, named semantically

(color.brand.primary, color.surface.default, color.text.primary, ...)

2. spacing tokens for the spacing scale (space.1 ... space.32)

3. borderRadius tokens (radius.sm / md / lg / full)

4. fontSizes, fontWeights, and fontFamilies tokens for the type scale

List anything you could not set and why."

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

Figma: a file populated with color styles, text styles, and variables. Penpot: a native design-token set (colors, spacing, radii, font sizes, weights, families) in the Tokens catalog, themeable and bindable to shape properties. Both derived from the live brand and ready to build components on, verified against the extraction.

More in AI Pipelines

Clone a brand's design language Cross-pollinate extraction with brand context Build a design system in Claude Code Rebrand an existing application Brand guide PDF vs. live site Cross-app token comparison Paste tokens to Figma Make Improve a Google Stitch prompt with brand context Give your brand videos a motion language Turn a live site plus brand guide into a Figma design system Author a design system from screenshots, brand guide, and tokens in Figma or Penpot One design system from several products, as three variants Build on-brand UI in Claude artifacts Generate a branded presentation Find tokens that fit a page's purpose Brand guardrail for AI-generated UI

Browse all

All recipes →

64 workflows

Build a design system foundation in Figma or Penpot via MCP

Overview

More in AI Pipelines

Continue reading

Getting started

MCP

Skills