Skip to main content
Home/Recipes/Paste tokens to Figma Make
AI Pipelines

Paste tokens to Figma Make

Designer

Overview

Figma Make generates components fast, but without brand context it guesses colors and type. Add extracted tokens as context first. The AI now builds components on the actual brand values, saving hours of manual correction.

Figma Make generates UI components from natural language prompts, but without brand context it defaults to generic colors, system fonts, and arbitrary spacing. The result looks like a prototype, not a product. Extract the actual brand tokens from the live site using Dembrandt, then paste the JSON into Figma Make as context before prompting. The AI now has exact hex values, font families, size scales, and border radii to work from. Components come out on-brand without manual correction of every color and type property.

Extract tokens

Terminal
dembrandt example.com --json-only
Figma Make prompt
# Paste JSON output into Figma Make context, then:
"Use these extracted design tokens as the brand foundation.
Build a [component] that matches these colors,
type scale, spacing, and border radii exactly."
Output

Figma Make components built on real token values, not AI-guessed brand colors.

More in AI Pipelines

Clone a brand's design languageBuild a design system in Claude CodeRebrand an existing applicationBrand guide PDF vs. live siteCross-app token comparisonBuild a design system in Figma via MCPImprove a Google Stitch prompt with brand contextTurn a live site plus brand guide into a Figma design systemAuthor a design system from screenshots, brand guide, and tokens in Figma or PenpotBuild on-brand UI in Claude artifactsGenerate a branded presentationFind tokens that fit a page's purposeBrand guardrail for AI-generated UI

Browse all

All recipes →

52 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more