Build a design system foundation in Figma or Penpot via MCP

Both Figma and Penpot expose an MCP server that lets an AI agent in Claude Code or Cursor read and write to a file directly. Combined with a Dembrandt extraction, one prompt builds the foundation: extract the live site to get real token values, then instruct the agent to author them in the connected tool. In Figma the agent creates color styles, text styles, and local variables. In Penpot the agent creates native design tokens in a named token set (color, spacing, borderRadius, fontSizes, fontWeights, fontFamilies, letterSpacing), which bind to shape properties and are themeable. Either way the foundation is built from what actually ships, not from memory or approximation. No manual token entry, no copy-pasting hex values one by one. Tested end to end: a single extraction plus one Penpot MCP pass produced a 38-token set in the Tokens catalog.

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