Skip to main content
Home/Recipes/Clone a brand's design language
AI Pipelines

Clone a brand's design language

DeveloperDesignerAgency

Overview

Extract a site's visual language, then ask an AI to build a complete on-brand page from it. One command captures the tokens. One prompt produces a page that matches the typography, palette, spacing, and component density of the original.

The --design-md flag exports a DESIGN.md file containing all extracted tokens in a format optimized for AI agent context. Feed this file into Claude Code and prompt it to build a complete UI from the extracted visual language. The agent now has exact color values, type scale, spacing rhythm, border radii, and shadow definitions to work from. No defaults, no approximations, no hallucinated brand colors. The result is a page that matches the visual density and personality of the original brand without manual token entry.

Extract + export DESIGN.md

Terminal
dembrandt stripe.com --design-md --save-output
Claude Code prompt
# With DESIGN.md in context:
"Build a complete SaaS landing page using these extracted tokens.
Match the color palette, type scale, spacing rhythm, and component
density exactly. Include: hero, feature grid, pricing table, footer."
Output

On-brand landing page: matching palette, type scale, spacing, and component density.

More in AI Pipelines

Build a design system in Claude CodeRebrand an existing applicationBrand guide PDF vs. live siteCross-app token comparisonBuild a design system in Figma via MCPPaste tokens to Figma MakeImprove 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