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

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

Browse all

All recipes →

43 workflows