设计系统提取

Install

Install globally: npm install -g dembrandt

dembrandt example.com

Or use npx without installing: npx dembrandt example.com

Requires Node.js 18+

Store output as baseline, re-run after deploys and diff

**CI / headless environments**

Usage

dembrandt <url>                        # Basic extraction (terminal display only)
dembrandt example.com --json-only      # Output raw JSON to terminal (no formatted display, no file save)
dembrandt example.com --save-output    # Save JSON to output/example.com/YYYY-MM-DDTHH-MM-SS.json
dembrandt example.com --dtcg           # Export in W3C Design Tokens (DTCG) format (auto-saves as .tokens.json)
dembrandt example.com --dark-mode      # Extract colors from dark mode variant
dembrandt example.com --mobile         # Use mobile viewport (390x844) for responsive analysis
dembrandt example.com --slow           # 3x longer timeouts (24s hydration) for JavaScript-heavy sites
dembrandt example.com --brand-guide    # Generate a brand guide PDF
dembrandt example.com --design-md      # Generate a DESIGN.md file for AI agents
dembrandt example.com --crawl 5        # Analyze 5 pages (homepage + 4 discovered pages), merges results
dembrandt example.com --sitemap        # Discover pages from sitemap.xml instead of DOM links
dembrandt example.com --crawl 10 --sitemap # Combine: up to 10 pages discovered via sitemap
dembrandt example.com --no-sandbox     # Disable Chromium sandbox (required for Docker/CI)
dembrandt example.com --browser=firefox # Use Firefox instead of Chromium (better for Cloudflare bypass)
dembrandt example.com --wcag           # WCAG 2.1 contrast analysis — real DOM pairs, AA/AAA grades
dembrandt example.com --stealth        # Opt-in anti-detection: navigator spoofing + human mouse simulation (use only when authorized)
dembrandt example.com --locale fi-FI --timezone Europe/Helsinki  # Browser fingerprint: locale and timezone
dembrandt example.com --user-agent "Mozilla/5.0 ..."            # Custom user agent string
dembrandt example.com --accept-language "fi,en;q=0.9"           # Custom Accept-Language header
dembrandt example.com --screen-size 2560x1440                   # Physical screen resolution to report

Default: formatted terminal display only. Use --save-output to persist results as JSON files. Browser automatically retries in visible mode if headless extraction fails.

Saves to: output/example.com/TIMESTAMP.tokens.json

```

The DTCG format is an industry-standard JSON schema that can be consumed by design tools and token transformation libraries like Style Dictionary.

Saves to: output/example.com/DESIGN.md

```

DESIGN.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.

Brand Guide PDF

Use --brand-guide to generate a printable PDF summarizing the extracted design system: colors, typography, components, and logo on a single document.

```bash dembrandt example.com --brand-guide

Saves to: output/example.com/TIMESTAMP.brand-guide.pdf

```

Use Cases

• Design system documentation
• Multi-site design consolidation
• Internal design audits on your own properties
• Learning how design tokens map to real CSS

Use the .tokens.json with Style Dictionary to generate tailwind.config.js

**Export for Tokens Studio / Figma**

Use sitemap.xml for page discovery instead of DOM link scraping

dembrandt example.com --sitemap

AI Agent Integration (MCP)

Use 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.

claude mcp add --transport stdio dembrandt -- npx -y dembrandt-mcp

Or add to your project's .mcp.json:

{
  "mcpServers": {
    "dembrandt": {
      "command": "npx",
      "args": ["-y", "dembrandt-mcp"]
    }
  }
}

7 tools available: get_design_tokens, get_color_palette, get_typography, get_component_styles, get_surfaces, get_spacing, get_brand_identity.

Pair with 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.

npx skills add dembrandt/dembrandt-skills

Compare output/stripe.com and output/braintree.com side by side

**Multi-page audit** — get a fuller picture across the whole site

**Spot-check a value** — verify a specific token fast

**Export for Tailwind** — get spacing and color values into your config