Author a design system from screenshots, brand guide, and tokens in Figma or Penpot
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
Capture tokens, screenshot, and brand guide in one run
Add a gated surface
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.
More in AI Pipelines
Browse all
All recipes →