AI Pipelines

Author a design system from screenshots, brand guide, and tokens in Figma or Penpot

Name: Dembrandt
Author: Dembrandt

DesignerDeveloperAgency

Overview

Tokens measure color, type, spacing and radius. Screenshots and brand imagery carry what never reaches CSS: layout, density, illustration, photography. Hand a multimodal agent both, plus the brand guide, and it authors the styles, variables and starter components over MCP. Expensive: big image context, long session.

Token JSON is blind to everything it does not measure: layout rhythm, illustration style, photography treatment, the look of a brand's marketing output.

A multimodal agent reads images.

Capture tokens, a screenshot of every surface and the brand guide in one Dembrandt run, add reference images that are not on the site, and hand the lot to an agent with the Figma or Penpot MCP connected. Penpot ships an official MCP server that writes color, typography and spacing tokens. Image context is token-heavy and the session is long, so scope each run to one frame or one component set and review the output.

How it works

Loading diagram...

Capture tokens, screenshot, and brand guide in one run

Terminal

dembrandt example.com --crawl 5 --screenshot ./current.png --brand-guide --design-md --save-output

Add a gated surface

Terminal

dembrandt app.example.com --screenshot ./app.png --design-md --save-output

Agent prompt (Figma MCP or Penpot MCP active, all inputs in context)

# In context: DESIGN.md, the screenshots, the brand guide PDF,

# and any reference images. Figma MCP or Penpot MCP connected.

"You have measured tokens (DESIGN.md), screenshots of the current

surfaces, the brand guide PDF, and reference images.

1. Use the tokens for exact color, type, spacing, and radius values.

2. Use the screenshots and references for what tokens miss: layout

rhythm, density, illustration and photography style.

3. In the connected design tool, create color styles and text styles

from the tokens, local variables for spacing and radius, and

starter components that match the visual language in the images.

Scope this run to [one frame / one component set]. List anything

you inferred from the images that the tokens did not confirm."

Connect the Penpot MCP (open source)

# Penpot ships an official MCP server. Point your agent at it,

# then run the prompt above against a Penpot file instead of Figma.

# Docs: https://help.penpot.app/mcp/

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

A design system authored in Figma or Penpot over MCP, grounded in measured tokens plus the visual language carried by screenshots and reference images, with a list of what the agent inferred from images beyond the tokens and a diff of the authored tokens 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 Build a design system foundation in Figma or Penpot via MCP 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 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

Author a design system from screenshots, brand guide, and tokens in Figma or Penpot

Overview

More in AI Pipelines

Continue reading

Getting started

MCP

Skills