Extracts design tokens from any live website URL using dembrandt. Analyzes computed DOM styles and CSS variables via Playwright to produce a structured design system — colors, typography, spacing, borders, shadows, component patterns, logos, favicons, and breakpoints.
Great for:
Design audits — reverse-engineer any site's design system
Competitor analysis — extract color palettes, font stacks, spacing scales
Design system documentation — save token output as JSON for reference
Migration/rebuilds — capture the existing design tokens before a redesign
Installation
# Install the plugin via supercli
sc plugins install ./plugins/dembrandt --on-conflict replace --json
# Install dembrandt globally (optional, works via npx too)
npm install -g dembrandt
Available Commands
Command
Description
sc dembrandt self analyze <url>
Extract design tokens from a website
sc dembrandt self analyze <url> --dtcg
Export in W3C Design Tokens format
sc dembrandt self analyze <url> --save-output
Save results as JSON
sc dembrandt self analyze <url> --dark-mode
Extract dark mode tokens
sc dembrandt self analyze <url> --browser=firefox
Use Firefox (bypasses bot detection)
sc dembrandt self analyze <url> --slow
Slow mode for JS-heavy SPAs
sc dembrandt _ <args>
Passthrough for advanced usage
Flags Reference
Flag
Type
Description
--dtcg
flag
Export tokens in W3C Design Tokens standard format
--save-output
flag
Save results as JSON file
--browser
option
Browser engine: chromium (default) or firefox
--dark-mode
flag
Extract dark mode color tokens
--slow
flag
Reliable extraction on JS-heavy SPAs
Usage Examples
# Basic extraction
sc dembrandt self analyze https://example.com
# Save as JSON for documentation
sc dembrandt self analyze https://example.com --save-output
# W3C standard format
sc dembrandt self analyze https://example.com --dtcg
# Bot-protected site with Firefox
sc dembrandt self analyze https://example.com --browser=firefox
# Dark mode tokens
sc dembrandt self analyze https://example.com --dark-mode
# JS-heavy SPA with slow mode
sc dembrandt self analyze https://example.com --slow
Tips
First run may take extra time to download Chromium browser engine (~150MB)
Use --browser=firefox for sites with aggressive Cloudflare/bot detection
Use --slow for SPAs like React/Vue/Angular apps with heavy JS
Output is structured JSON — pipe through jq for further processing
1---2name: quickstart-17763description: dembrandt Plugin4---5# dembrandt Plugin67## Overview89Extracts design tokens from any live website URL using [dembrandt](https://github.com/dembrandt/dembrandt). Analyzes computed DOM styles and CSS variables via Playwright to produce a structured design system — colors, typography, spacing, borders, shadows, component patterns, logos, favicons, and breakpoints.1011Great for:12- **Design audits** — reverse-engineer any site's design system13- **Competitor analysis** — extract color palettes, font stacks, spacing scales14- **Design system documentation** — save token output as JSON for reference15- **Migration/rebuilds** — capture the existing design tokens before a redesign1617## Installation1819```bash20# Install the plugin via supercli21sc plugins install ./plugins/dembrandt --on-conflict replace --json2223# Install dembrandt globally (optional, works via npx too)24npm install -g dembrandt25```2627## Available Commands2829| Command | Description |30|---|---|31| `sc dembrandt self analyze <url>` | Extract design tokens from a website |32| `sc dembrandt self analyze <url> --dtcg` | Export in W3C Design Tokens format |33| `sc dembrandt self analyze <url> --save-output` | Save results as JSON |34| `sc dembrandt self analyze <url> --dark-mode` | Extract dark mode tokens |35| `sc dembrandt self analyze <url> --browser=firefox` | Use Firefox (bypasses bot detection) |36| `sc dembrandt self analyze <url> --slow` | Slow mode for JS-heavy SPAs |37| `sc dembrandt _ <args>` | Passthrough for advanced usage |3839## Flags Reference4041| Flag | Type | Description |42|---|---|---|43| `--dtcg` | flag | Export tokens in W3C Design Tokens standard format |44| `--save-output` | flag | Save results as JSON file |45| `--browser` | option | Browser engine: `chromium` (default) or `firefox` |46| `--dark-mode` | flag | Extract dark mode color tokens |47| `--slow` | flag | Reliable extraction on JS-heavy SPAs |4849## Usage Examples5051```bash52# Basic extraction53sc dembrandt self analyze https://example.com5455# Save as JSON for documentation56sc dembrandt self analyze https://example.com --save-output5758# W3C standard format59sc dembrandt self analyze https://example.com --dtcg6061# Bot-protected site with Firefox62sc dembrandt self analyze https://example.com --browser=firefox6364# Dark mode tokens65sc dembrandt self analyze https://example.com --dark-mode6667# JS-heavy SPA with slow mode68sc dembrandt self analyze https://example.com --slow69```7071## Tips7273- First run may take extra time to download Chromium browser engine (~150MB)74- Use `--browser=firefox` for sites with aggressive Cloudflare/bot detection75- Use `--slow` for SPAs like React/Vue/Angular apps with heavy JS76- Combine flags: `sc dembrandt self analyze <url> --dark-mode --save-output --dtcg`77- Output is structured JSON — pipe through `jq` for further processing
Run npx skillmds@latest add javimosch/quickstart-1776 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
dembrandt Plugin It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
javimosch (@javimosch) published this skill. Their other Agent Skills are listed on their SkillMD profile.
javimosch