Skip to main content
Home/Recipes/Author a design system from screenshots, brand guide, and tokens in Figma or Penpot
AI Pipelines

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

DesignerDeveloperAgency

Overview

Tokens carry measured values. Screenshots and brand imagery carry what never reaches CSS: layout, illustration, photography, density. Give the agent all of it at once, plus the brand guide PDF and any reference images, and it authors color styles, text styles, variables, and components into Figma or Penpot over MCP. This is the most expensive recipe here: large image context, a long agentic session. Use it for a high-value handoff, not a quick draft.

Token JSON is precise about color, type, spacing, and radius, and blind to everything else. Layout rhythm, illustration style, photography treatment, and the aesthetic of a brand's social and marketing output never appear in tokens. A multimodal agent reads images. Assemble the full context in one Dembrandt run: token JSON, a screenshot of every current surface, and the brand guide PDF. Add reference images that are not on the site, marketing shots, social posts, deck slides, whatever defines the look. Hand the lot to the agent with the Figma MCP or the official Penpot MCP connected, and it creates the styles, variables, and starter components directly in the file. Penpot is open source and ships an official MCP server that creates color, typography, and spacing tokens; Figma is authored over its MCP. The cost is real: 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. The payoff is a system grounded in the brand's full visual language, not just the values a parser could measure.

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

Browse all

All recipes →

45 workflows