Build on-brand UI in Claude artifacts

Name: Dembrandt
Author: Dembrandt

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 language Build a design system in Claude Code Rebrand an existing application Brand guide PDF vs. live site Cross-app token comparison Build a design system in Figma via MCP Paste tokens to Figma Make Improve a Google Stitch prompt with brand context Turn a live site plus brand guide into a Figma design system Author a design system from screenshots, brand guide, and tokens in Figma or Penpot Generate a branded presentation Find tokens that fit a page's purpose

Browse all

All recipes →

45 workflows