Skip to main content
AI Pipelines

Build on-brand UI in Claude artifacts

DesignerDeveloperPM

Overview

An on-brand interactive component in the chat, no project to set up. Extract the tokens, paste the JSON into Claude, ask for an artifact. It renders inline on the real palette, type scale, and spacing. Without the tokens, artifacts default to generic colors and system fonts.

Claude artifacts render live, interactive UI inside the conversation. No local project, no build step, a working component in seconds. Without brand context the output uses generic colors and system fonts. Extract the tokens with Dembrandt, paste the JSON in, ask Claude to build the artifact from those exact values. It renders inline. You refine it in the same thread: change the spacing, swap the accent, add a hover state. The extracted palette and type scale stay the source of truth throughout.

Extract tokens

Terminal
dembrandt example.com --json-only
Claude prompt (paste JSON, then ask for an artifact)
# Paste the extraction JSON into the conversation, then:
"Using these extracted design tokens as the only source of truth,
build a [pricing section / dashboard card / hero] as an artifact.
Match the palette, type scale, spacing, and border radius exactly.
No generic defaults, no invented colors."
Output

A live, on-brand Claude artifact built on the extracted tokens, ready to iterate on in the conversation.

More in AI Pipelines

Clone a brand's design languageCross-pollinate extraction with brand contextBuild a design system in Claude CodeRebrand an existing applicationBrand guide PDF vs. live siteCross-app token comparisonBuild a design system foundation in Figma or Penpot via MCPPaste tokens to Figma MakeImprove a Google Stitch prompt with brand contextGive your brand videos a motion languageTurn a live site plus brand guide into a Figma design systemAuthor a design system from screenshots, brand guide, and tokens in Figma or PenpotGenerate a branded presentationFind tokens that fit a page's purposeBrand guardrail for AI-generated UI

Browse all

All recipes →

57 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