Dembrandt

Product Introduction

1. Definition: Dembrandt is a high-performance, open-source Command Line Interface (CLI) tool and automated UI audit utility designed to extract comprehensive design tokens from any live website. It functions as a CSS-to-design-system converter, outputting data in the standardized W3C Design Token Community Group (DTCG) JSON format. This technical utility allows engineers and designers to programmatically deconstruct visual styles into actionable data structures.

2. Core Value Proposition: Dembrandt exists to bridge the "design-to-code gap" by automating the manual, labor-intensive process of inspecting browser DevTools. By providing a one-command solution to capture a brand's visual identity, it enables rapid design system documentation, competitive benchmarking, and front-end development acceleration. Key industry terms include W3C design tokens, automated UI audit, CSS extraction, and design system engineering.

Main Features

1. W3C-Compliant DTCG Export: Utilizing the --dtcg flag, Dembrandt parses a website's CSS and DOM tree to generate a JSON file that strictly adheres to the W3C Design Tokens Community Group specifications. This ensures that the extracted data—including color hex codes, font-stack hierarchies, and spacing scales—is interoperable with modern design tools like Figma, Style Dictionary, and various CSS-in-JS libraries.

2. Automated Token Category Extraction: The tool employs advanced heuristic analysis to identify and categorize specific design primitives. This includes:

• Colors: Capture of primary, secondary, and neutral palettes, including dark mode variants via the --dark-mode flag.
• Typography: Extraction of font sizes, line heights, and weights for both headings and body text.
• Spacing & Radii: Identification of consistent padding, margin scales, and border-radius values.
• Shadows & Effects: Detailed mapping of box-shadow values including offsets, blur radii, and RGBA transparency.
• Button States: Detection of interactive transformations, specifically mapping transitions from default to hover and active states.

3. Framework Detection and Responsive Breakpoint Mapping: Dembrandt analyzes the underlying technical stack of a target URL, identifying frameworks such as React, Next.js, and Tailwind CSS. Simultaneously, it extracts responsive breakpoints (e.g., sm: 640px, md: 768px, lg: 1024px, xl: 1280px), allowing developers to replicate the exact responsive behavior of a live application without manual viewport resizing.

4. Local Visual Explorer UI: Beyond the CLI, Dembrandt provides a "Local UI" feature. This is a visual interface that runs locally on the user's machine, allowing for a browseable, graphic representation of the extracted tokens. Users can visually audit colors, typography, and logos in a consolidated dashboard, making the raw JSON data accessible to non-technical stakeholders.

Problems Solved

1. Pain Point: Manual Style Inspection. Traditionally, designers and developers spend 1–3 hours per website manually recording styles via browser inspectors. Dembrandt reduces this "UI Audit" time to under 0.8 seconds per site, eliminating human error in value recording.

2. Target Audience:

• Front-end Developers: Who need instant token references for colors and spacing when Figma documentation is missing.
• UI/UX Designers: Who are performing competitive research or building moodboards based on existing web implementations.
• Design System Engineers: Who are tasked with documenting legacy applications or migrating hard-coded CSS to a tokenized system.
• Brand Auditors: Professionals ensuring cross-site consistency and WCAG accessibility compliance across various digital properties.

3. Use Cases:

• Documentation Kickstart: Generating an initial design-system.json for an undocumented product.
• Competitive Benchmarking: Side-by-side comparison of design scales and color palettes of market competitors.
• Legacy Migration: Extracting tokens from an old jQuery or vanilla CSS site to rebuild it using a modern Tailwind or React workflow.
• Fast Prototyping: Rapidly gathering visual specs to create high-fidelity prototypes that match an existing brand's identity.

Unique Advantages

1. Differentiation: Unlike SaaS-based design tools that require account creation, cloud syncing, and subscription fees, Dembrandt is 100% local and privacy-focused. There is no login required, and all processing happens on the user's hardware. Furthermore, while most "CSS rippers" only extract raw code, Dembrandt structures the data into the W3C DTCG format, making it immediately usable in professional design-dev pipelines.

2. Key Innovation: The tool's primary innovation lies in its "one-command" extraction of complex interactive states and framework-specific logic. By detecting the "visual intent" behind CSS—such as recognizing that a specific set of utility classes represents a spacing scale or that a color shift represents a button's active state—it provides a level of semantic intelligence that standard scrapers lack.

Frequently Asked Questions (FAQ)

1. How do I install Dembrandt and what are the system requirements? Dembrandt is distributed via npm and requires a Node.js environment. You can install it globally using the command: npm i -g dembrandt. Once installed, it runs in any standard terminal (macOS, Windows, or Linux) and requires an active internet connection only to fetch the target URL's data.

2. Is Dembrandt compatible with Figma or other design tools? Yes. By using the --dtcg flag, Dembrandt generates a standard W3C design token JSON file. This format is designed for compatibility with the Figma Variables API and plugins like "Tokens Studio," allowing for a seamless sync between live websites and design canvases.

3. Can Dembrandt extract design systems from password-protected or local sites? Currently, Dembrandt works best on public URLs. However, because it is a local CLI tool, it can access local development servers (e.g., http://localhost:3000) provided the site is rendered in a way that the tool's headless engine can parse.

4. Does Dembrandt collect any data from the websites I analyze? No. Dembrandt is an open-source, MIT-licensed tool that prioritizes privacy. The extraction process is 100% local. While the tool uses Google Analytics on its own landing page to improve user experience, the CLI tool itself does not transmit your extracted design data to external servers.

5. What frameworks can Dembrandt identify? Dembrandt has built-in detection for popular modern web stacks including React, Next.js, and Tailwind CSS. It analyzes class naming conventions and DOM structures to provide developers with context regarding how the original site was constructed.