Extract design tokens from any website

A Cloudflare Workers deployment of dembrandt — the open-source design token extraction tool by thevangelist. This service rewrites dembrandt's Playwright-based extraction engine to run on Cloudflare Browser Rendering, making it available as a hosted API and MCP server.

🎨

Visual Brand Guide

Interactive HTML page with color swatches, typography samples, button components, shadows, and more. Click to copy any value.

⚡

MCP Server

7 tools for Claude Code, Claude Desktop, Cursor, and Windsurf. Extract design tokens directly from your AI coding assistant.

🔌

REST API

JSON endpoints for full or selective extraction. Supports streaming progress, W3C DTCG format, dark mode, and mobile viewport.

Built on dembrandt

This service is a Cloudflare Workers port of dembrandt, an open-source MIT-licensed project created by thevangelist (Esa Juhana). All 15 design token extraction algorithms — color palette analysis with perceptual deduplication, typography detection, component style extraction, framework detection, and more — originate from dembrandt's extraction engine.

The original project runs locally using Playwright. This deployment rewrites the browser automation layer for Cloudflare Browser Rendering (Puppeteer), adds a remote MCP server, REST API with streaming, and the visual brand guide UI.

dembrandt.com ↗ GitHub ↗ npm ↗

MCP Server

Connect your AI coding tool to extract design tokens on demand.

Claude Code

claude mcp add dembrandt --transport http https://dembrandt.runtype.app/mcp

Claude Desktop

{
  "mcpServers": {
    "dembrandt": {
      "type": "url",
      "url": "https://dembrandt.runtype.app/mcp"
    }
  }
}

Cursor / Windsurf

Add as remote MCP server: https://dembrandt.runtype.app/mcp

REST API

Method	Endpoint	Description
GET	/ui?url=	Visual brand guide (HTML)
POST	/extract	Full extraction (15 extractors)
POST	/extract/colors	Colors only
POST	/extract/typography	Typography only
POST	/extract/spacing	Spacing only
POST	/extract/borders	Border radius + borders
POST	/extract/shadows	Shadows only
POST	/extract/components	Buttons, inputs, links, badges
POST	/extract/brand	Logo, site name, favicons
POST	/extract/meta	Breakpoints, frameworks, icons
GET	/health	Health check

Example

curl -X POST https://dembrandt.runtype.app/extract \
  -H "Content-Type: application/json" \
  -d '{"url": "stripe.com"}'