{"id":34570540,"url":"https://github.com/dembrandt/dembrandt","last_synced_at":"2026-06-14T17:00:39.203Z","repository":{"id":325663438,"uuid":"1101924225","full_name":"dembrandt/dembrandt","owner":"dembrandt","description":"Extract any website’s design system into tokens in seconds: logo, colors, typography, borders \u0026 more. One command.","archived":false,"fork":false,"pushed_at":"2026-06-11T21:44:02.000Z","size":5954,"stargazers_count":1920,"open_issues_count":2,"forks_count":193,"subscribers_count":5,"default_branch":"main","last_synced_at":"2026-06-11T23:14:59.115Z","etag":null,"topics":["brand-audits","css","design-engineering","design-md","design-ops","design-systems","design-to-code","design-tokens","developer-experience","dx","frontend","mcp","nodejs","open-source","playwright","productivity","reverse-engineering","tailwind-css","token-drift","ui-audit"],"latest_commit_sha":null,"homepage":"http://dembrandt.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dembrandt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-22T13:49:09.000Z","updated_at":"2026-06-11T19:53:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dembrandt/dembrandt","commit_stats":null,"previous_names":["thevangelist/dembrandt","dembrandt/dembrandt"],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/dembrandt/dembrandt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dembrandt%2Fdembrandt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dembrandt%2Fdembrandt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dembrandt%2Fdembrandt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dembrandt%2Fdembrandt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dembrandt","download_url":"https://codeload.github.com/dembrandt/dembrandt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dembrandt%2Fdembrandt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34329738,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-14T02:00:07.365Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["brand-audits","css","design-engineering","design-md","design-ops","design-systems","design-to-code","design-tokens","developer-experience","dx","frontend","mcp","nodejs","open-source","playwright","productivity","reverse-engineering","tailwind-css","token-drift","ui-audit"],"created_at":"2025-12-24T09:18:11.446Z","updated_at":"2026-06-14T17:00:39.194Z","avatar_url":"https://github.com/dembrandt.png","language":"TypeScript","funding_links":["https://github.com/sponsors/dembrandt"],"categories":["Helper Components","TypeScript","css"],"sub_categories":[],"readme":"# Dembrandt.\n\n[![npm version](https://img.shields.io/npm/v/dembrandt.svg)](https://www.npmjs.com/package/dembrandt)\n[![npm downloads](https://img.shields.io/npm/dm/dembrandt.svg)](https://www.npmjs.com/package/dembrandt)\n[![license](https://img.shields.io/npm/l/dembrandt.svg)](https://github.com/dembrandt/dembrandt/blob/main/LICENSE)\n[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-me-pink?style=flat\u0026logo=github-sponsors)](https://github.com/sponsors/dembrandt)\n\nExtract a website's design system into design tokens in a few seconds: logo, colors, typography, borders, and more. One command.\n\n![Dembrandt: Any website to design tokens](https://raw.githubusercontent.com/dembrandt/dembrandt/main/docs/images/banner.png)\n\n## Install\n\nInstall globally: `npm install -g dembrandt`\n\n```bash\ndembrandt example.com\n```\n\nOr use npx without installing: `npx dembrandt example.com`\n\nRequires Node.js 18+\n\n## AI Agent Integration (MCP)\n\nUse Dembrandt as a tool in Claude Code, Cursor, Windsurf, or any MCP-compatible client. Ask your agent to \"extract the color palette from example.com\" and it calls Dembrandt automatically.\n\n```bash\nclaude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp\n```\n\nOr add to your project's `.mcp.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"dembrandt\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"--package\", \"dembrandt\", \"dembrandt-mcp\"]\n    }\n  }\n}\n```\n\n7 tools available: `get_design_tokens`, `get_color_palette`, `get_typography`, `get_component_styles`, `get_surfaces`, `get_spacing`, `get_brand_identity`.\n\nPair with **[dembrandt-skills](https://github.com/dembrandt/dembrandt-skills)** to give your agent UX intelligence on top of extracted tokens — hierarchy, accessibility, interaction states, and a full 6-stage design pipeline orchestrator.\n\n```bash\nnpx skills add dembrandt/dembrandt-skills\n```\n\n## Dembrandt App (Beta)\n\nLoad extractions, track token drift, and compare snapshots. **[dembrandt.com/app](https://www.dembrandt.com/app)**\n\n* **Drift tracking.** Pin a snapshot as your baseline. Run another extraction later. Get a visual report of what changed.\n* **Visual diff.** Color swatches, before/after values, delta scores per category.\n* **Snapshot history.** GitHub-style calendar per domain.\n* **Copy tokens.** Paste values straight into Copilot, Claude, or Cursor.\n* **No login.** Your data stays in the browser. Drift is computed locally — nothing is sent to any server.\n\n## Recipes\n\n**[dembrandt.com/recipes](https://www.dembrandt.com/recipes)** — 38 ready-to-run workflows. Copy a command, paste a prompt, get a result. Covers competitor benchmarking, WCAG audits, CI/CD drift detection, Figma token push, and agentic design system builds. Filterable by role.\n\n## What to expect from extraction?\n\n- Colors (semantic, palette, CSS variables, gradients)\n- Typography (fonts, sizes, weights, sources)\n- Spacing (margin/padding scales)\n- Borders (radius, widths, styles, colors)\n- Shadows\n- Motion (duration scale, easing curves, hover patterns per component type)\n- Components (buttons, badges, inputs, links)\n- Breakpoints\n- Icons \u0026 frameworks\n\n## Usage\n\n```bash\ndembrandt \u003curl\u003e                        # Basic extraction (terminal display only)\ndembrandt example.com --json-only      # Output raw JSON to terminal (no formatted display, no file save)\ndembrandt example.com --save-output    # Save JSON to output/example.com/YYYY-MM-DDTHH-MM-SS.json\ndembrandt example.com --dtcg           # Export in W3C Design Tokens (DTCG) format (auto-saves as .tokens.json)\ndembrandt example.com --dark-mode      # Extract colors from dark mode variant\ndembrandt example.com --mobile         # Use mobile viewport (390x844) for responsive analysis\ndembrandt example.com --slow           # 3x longer timeouts (24s hydration) for JavaScript-heavy sites\ndembrandt example.com --brand-guide    # Generate a brand guide PDF\ndembrandt example.com --design-md      # Generate a DESIGN.md file for AI agents\ndembrandt example.com /pricing /docs   # Extract specific paths and merge results into one output\ndembrandt example.com --crawl 5        # Analyze 5 pages (homepage + 4 discovered pages), merges results\ndembrandt example.com --sitemap        # Discover pages from sitemap.xml instead of DOM links\ndembrandt example.com --crawl 10 --sitemap # Combine: up to 10 pages discovered via sitemap\ndembrandt example.com --no-sandbox     # Disable Chromium sandbox (required for Docker/CI)\ndembrandt example.com --browser=firefox # Use Firefox instead of Chromium (better for Cloudflare bypass)\ndembrandt example.com --wcag           # WCAG 2.1 contrast analysis — real DOM pairs, AA/AAA grades\ndembrandt example.com --stealth        # Opt-in anti-detection: navigator spoofing + human mouse simulation (use only when authorized)\ndembrandt example.com --locale fi-FI --timezone Europe/Helsinki  # Browser fingerprint: locale and timezone\ndembrandt example.com --user-agent \"Mozilla/5.0 ...\"            # Custom user agent string\ndembrandt example.com --accept-language \"fi,en;q=0.9\"           # Custom Accept-Language header\ndembrandt example.com --screen-size 2560x1440                   # Physical screen resolution to report\n```\n\nDefault: formatted terminal display only. Use `--save-output` to persist results as JSON files. Browser automatically retries in visible mode if headless extraction fails.\n\n### Multi-Page Extraction\n\nAnalyze multiple pages to get a more complete picture of a site's design system. Results are merged into a single unified output with cross-page confidence boosting: tokens appearing on multiple pages get higher confidence scores.\n\n```bash\n# Analyze homepage + 4 auto-discovered pages (default: 5 total)\ndembrandt example.com --crawl 5\n\n# Use sitemap.xml for page discovery instead of DOM link scraping\ndembrandt example.com --sitemap\n\n# Combine both: up to 10 pages from sitemap\ndembrandt example.com --crawl 10 --sitemap\n```\n\n**Page discovery** works two ways:\n- **DOM links** (default): Reads navigation, header, and footer links from the homepage, prioritizing key pages like /pricing, /about, /features\n- **Sitemap** (`--sitemap`): Parses sitemap.xml (checks robots.txt first), follows sitemapindex references, and scores URLs by importance\n\nPages are fetched sequentially with polite delays. Failed pages are skipped without aborting the run.\n\n### Browser Selection\n\nBy default, dembrandt uses Chromium. If you encounter bot detection or timeouts (especially on sites behind Cloudflare), try Firefox which is often more successful at bypassing these protections:\n\n```bash\n# Use Firefox instead of Chromium\ndembrandt example.com --browser=firefox\n\n# Combine with other flags\ndembrandt example.com --browser=firefox --save-output --dtcg\n```\n\n**When to use Firefox:**\n- Sites behind Cloudflare or other bot detection systems\n- Timeout issues on heavily protected sites\n- WSL environments where headless Chromium may struggle\n\n**Installation:**\nFirefox browser is installed automatically with `npm install`. If you need to install manually:\n\n```bash\nnpx playwright@$(node -p \"require('playwright-core/package.json').version\") install firefox\n```\n\n### W3C Design Tokens (DTCG) Format\n\nUse `--dtcg` to export in the standardized [W3C Design Tokens Community Group](https://www.designtokens.org/) format:\n\n```bash\ndembrandt example.com --dtcg\n# Saves to: output/example.com/TIMESTAMP.tokens.json\n```\n\nThe DTCG format is an industry-standard JSON schema that can be consumed by design tools and token transformation libraries like [Style Dictionary](https://styledictionary.com).\n\n### DESIGN.md\n\nUse `--design-md` to generate a [DESIGN.md](https://stitch.withgoogle.com/docs/design-md) file, a plain-text design system document readable by AI agents. The export follows Google's DESIGN.md draft format: YAML design tokens in front matter plus ordered Markdown guidance sections.\n\n```bash\ndembrandt example.com --design-md\n# Saves to: output/example.com/DESIGN.md\n```\n\nDESIGN.md reports only what Dembrandt observed on the source site. Exact values (colors, typography, spacing, radii, shadows) live in the YAML front matter when available, and the Markdown body adds human-readable context. Sections with no extracted evidence are omitted rather than filled with invented defaults. For example, the elevation section is dropped when the site uses no box-shadow tokens.\n\n### WCAG Contrast Analysis\n\nUse `--wcag` to check accessibility contrast ratios across the page. Unlike palette-based checkers, dembrandt walks the actual DOM and finds what color is rendered on top of what background — per element.\n\n```bash\ndembrandt dembrandt.com --wcag\n```\n\nReturns every text/background pair with contrast ratio and WCAG 2.1 grade (AA, AA-Large, AAA, or fail), sorted by how often each pair appears. Results are shown in terminal and included in JSON output as `wcag`.\n\nAlso captures **interactive state contrast**: dembrandt simulates hover, focus, and disabled states on buttons, links, and inputs and checks contrast on each state. State pairs are tagged `[hover]`, `[focus]`, or `[disabled]` in output so you can catch contrast failures that only appear on interaction.\n\n### Motion Tokens\n\nMotion tokens are extracted automatically on every run — no flag needed. Dembrandt analyzes CSS transitions and animations across the page and returns a structured motion profile.\n\n```bash\ndembrandt dembrandt.com\n```\n\nReturns:\n- **Duration scale**: all unique animation durations found on the page\n- **Easing curves**: named easing types (ease-out, spring, custom cubic-bezier) with usage counts\n- **Per-context profiles**: motion behavior by component type (button, nav, card, modal, hero)\n- **Hover interaction deltas**: which properties animate on hover (transform, opacity, background, color) and the pattern (scale-up, fade-in, color-shift, slide-y)\n\nMotion data is included in JSON output as `motion` and printed in terminal under a dedicated Motion section.\n\n### Brand Guide PDF\n\nUse `--brand-guide` to generate a printable PDF summarizing the extracted design system: colors, typography, components, and logo on a single document.\n\n```bash\ndembrandt example.com --brand-guide\n# Saves to: output/example.com/TIMESTAMP.brand-guide.pdf\n```\n\n## Continuous integration\n\nDembrandt drives a real browser, so the browser revision must match `playwright-core`.\n\nIf you are not using the Playwright container image, install the browser revision that matches `playwright-core`:\n\n```bash\n# in dembrandt's own repo\nnpm run install-browser\n# elsewhere — derive the version so it always matches\nnpx playwright@$(node -p \"require('playwright-core/package.json').version\") install --with-deps chromium\n```\n\nA mismatched version fails with \"Executable doesn't exist\". The container image avoids this entirely — just match its tag (`v1.60.0`) to the `playwright-core` version.\n\n### Drift gate\n\nCompare an extraction against a committed baseline and fail the job on drift:\n\n```bash\n# capture a baseline once (same environment you will check against)\ndembrandt https://app.example.com --json-only \u003e baseline.json\n\n# in CI — exits non-zero on drift; writes a report artifact\ndembrandt https://app.example.com --compare baseline.json --html report.html\n```\n\nA ready-to-use GitHub Actions workflow (preview vs production, run summary, report artifact, host-auth bypass) is in [`examples/drift-gate.yml`](examples/drift-gate.yml).\n\n### Exit codes\n\nA pipeline can branch on the exit code; \"design drifted\" and \"extraction broke\" are distinct:\n\n| Code | Meaning |\n|---|---|\n| `0` | Success, or stable (no drift) under `--compare` |\n| `1` | Drift detected (`--compare`) |\n| `2` | Extraction failure (`EXTRACTION_FAILED`, `BROWSER_UNAVAILABLE`) |\n| `67` | Navigation/connection timeout (`NAVIGATION_TIMEOUT`) — retryable, try `--slow` |\n\nWith `--json-only`, a failure also prints a machine-readable `{ \"error\": { \"code\", \"message\" } }` to stdout.\n\n## Recipes\n\n**Quick brand scan**\n```bash\ndembrandt dembrandt.com\n```\n\n**Compare two sites**\n```bash\ndembrandt dembrandt.com --save-output\ndembrandt braintree.com --save-output\n# Compare output/dembrandt.com and output/braintree.com side by side\n```\n\n**Multi-page audit** — get a fuller picture across the whole site\n```bash\ndembrandt dembrandt.com --crawl 10 --sitemap --save-output\n```\n\n**Spot-check a value** — verify a specific token fast\n```bash\ndembrandt dembrandt.com --json-only | grep -i \"border-radius\"\n```\n\n**Export for Tailwind** — get spacing and color values into your config\n```bash\ndembrandt dembrandt.com --dtcg --save-output\n# Use the .tokens.json with Style Dictionary to generate tailwind.config.js\n```\n\n**Export for Tokens Studio / Figma**\n```bash\ndembrandt dembrandt.com --dtcg --save-output\n# Import the .tokens.json directly into Tokens Studio\n```\n\n**Generate DESIGN.md for your AI agent**\n```bash\ndembrandt dembrandt.com --design-md\n# Point your agent at the output DESIGN.md\n```\n\n**Accessibility audit** — check contrast on any live URL\n```bash\ndembrandt dembrandt.com --wcag\n```\n\n**Regression baseline** — snapshot now, catch drift later\n```bash\ndembrandt myapp.com --save-output --dtcg\n# Store output as baseline, re-run after deploys and diff\n```\n\n**CI / headless environments**\n```bash\ndembrandt myapp.com --no-sandbox --save-output\n```\n\n## Use Cases\n\n- Design system documentation\n- Multi-site design consolidation\n- Internal design audits on your own properties\n- Learning how design tokens map to real CSS\n\n## How It Works\n\nUses Playwright to render the page, reads computed styles from the DOM, analyzes color usage and confidence, groups similar typography, detects spacing patterns, and returns design tokens.\n\n### Extraction Process\n\n1. Browser Launch - Launches browser (Chromium by default, Firefox optional) with stealth configuration\n2. Anti-Detection - Injects scripts to bypass bot detection\n3. Navigation - Navigates to target URL with retry logic\n4. Hydration - Waits for SPAs to fully load (8s initial + 4s stabilization)\n5. Content Validation - Verifies page content is substantial (\u003e500 chars)\n6. Parallel Extraction - Runs all extractors concurrently for speed\n7. Analysis - Analyzes computed styles, DOM structure, and CSS variables\n8. Scoring - Assigns confidence scores based on context and usage\n\n### Color Confidence\n\n- High: Logo, primary interactive elements\n- Medium: Secondary interactive elements, icons, navigation\n- Low: Generic UI components (filtered from display)\n- Only shows high and medium confidence colors in terminal. Full palette in JSON.\n\n## Limitations\n\n- Dark mode requires `--dark-mode` flag (not automatically detected)\n- Hover/focus states extracted from CSS (not fully interactive)\n- Canvas/WebGL-rendered sites cannot be analyzed (no DOM to read)\n- JavaScript-heavy sites require hydration time (8s initial + 4s stabilization)\n- Some dynamically-loaded content may be missed\n- Default viewport is 1920x1080 (use `--mobile` for 390x844 mobile viewport)\n\n## Intended Use\n\nDembrandt reads publicly available CSS and computed styles from website DOMs for documentation, learning, and analysis of design systems you own or have permission to analyze.\n\nOnly run Dembrandt against sites whose Terms of Service permit automated access, or against your own properties. Do not use extracted material to reproduce third-party brand identities, logos, or trademarks. Respect robots.txt, rate limits, and copyright.\n\nDembrandt does not host, redistribute, or claim rights to any third-party brand assets.\n\n## Sponsors\n\nThe CLI is MIT-licensed and free. Sponsorship funds the enforcement layer: a committed project-level token baseline, `--compare` and the ingest API for CI/CD drift gates, and the App platform (snapshot history, team drift dashboard, alerts to Slack, Linear, and GitHub).\n\n[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-me-pink?style=flat\u0026logo=github-sponsors)](https://github.com/sponsors/dembrandt)\n\n\u003c!-- sponsors --\u003e\n\u003c!-- Backer ($25+) and Lead sponsor ($500+) logos appear here. --\u003e\n\u003c!-- sponsors --\u003e\n\n## Contributing\n\nBugs, weird sites, pull requests. All welcome.\n\nOpen an [Issue](https://github.com/dembrandt/dembrandt/issues) or PR.\n\n@thevangelist\n\nMIT. Do whatever you want with it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdembrandt%2Fdembrandt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdembrandt%2Fdembrandt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdembrandt%2Fdembrandt/lists"}