Een designsysteem extraheren uit elke website met één terminalcommando

Is je dit ooit overkomen—je bekijkt iemands landingspagina of webservice en denkt: "Welke lettertypen hebben ze gekozen, welke spacing gebruiken ze, wat is hun kleurenpalet?" Meestal open je dan DevTools, begin je met het eentonig doorclicken van elementen, hex-codes kopiëren en berekende stijlen bekijken. Als het project groot is, kan deze routine een paar uur duren.

Onlangs stuitte ik op dembrandt, een hulpprogramma dat dit proces tot een absurd niveau automatiseert. Je voert er een URL in, en het genereert gestructureerde design tokens: palet, typografie, spacing-grid, schaduwen, border-radius en animaties.

Wat is het en voor wie is het bedoeld

dembrandt is een command-line utility en TypeScript-bibliotheek gebouwd voor Node.js. Het start een browser-engine op via Playwright, navigeert naar de opgegeven pagina, haalt berekende stijlen uit de DOM en organiseert ze netjes.

Het hulpprogramma verwerkt meerdere toepassingsscenario's:

• Snelle audits en reverse engineering van iemands UI.
• Design tokens aanmaken voor een legacy-project dat nooit een expliciet designsysteem had.
• Style "drift" monitoren in CI/CD-pipelines.
• Context exporteren voor AI-assistenten zoals Cursor of Claude Code.

Aan de slag

Je hebt Node.js 18 of hoger nodig. Omdat het afhankelijk is van Playwright zonder gebundelde binaries, is de eerste stap het downloaden van Chromium:

npm install -g dembrandt
dembrandt install-browser
dembrandt dembrandt.com

Als je liever niet globaal installeert, werkt npx prima:

npx dembrandt install-browser
npx dembrandt example.com

De browser wordt één keer gedownload naar Playwright's gedeelde systeemcache, waarna het hulpprogramma klaar is voor gebruik.

Wat zit erin: formaten en integraties

Het hulpprogramma dumpt niet zomaar een hoop CSS-eigenschappen in de console. Het groepeert typografie op grootte en gewicht, analyseert kleurgebruiksfrequentie en berekent betrouwbaarheidsniveaus voor de regels die het ontdekt.

Tokens exporteren naar W3C- en Tailwind-standaarden

Als je Style Dictionary of Tokens Studio in Figma gebruikt, kunnen tokens worden geëxporteerd naar W3C DTCG-specificaties:

dembrandt example.com --dtcg

Voor frontend-ontwikkelaars die met modern Tailwind CSS werken, is er een --tailwind-flag die een @theme-directive genereert voor versie vier van het framework, met alleen de waarden die daadwerkelijk worden gebruikt.

WCAG-contrastcontrole

De --wcag-flag activeert een toegankelijkheidsaudit. Het hulpprogramma identificeert daadwerkelijke tekst-achtergrond-paren in de DOM en beoordeelt ze op WCAG 2.1 AA- en AAA-nalevingsniveaus. Dit is handig om snel interface-toegankelijkheid te controleren zonder logge extensies.

Stijlwijzigingen volgen in CI

Een van de meest overtuigende toepassingsscenario's is het voorkomen van onbedoelde stijlwijzigingen in pull requests. Je kunt een token-momentopname vastleggen in je repository en preview-deployments valideren in GitHub Actions:

uses: dembrandt/[email protected]
  with:
    url: https://preview.example.com
    baseline: .dembrandt/baseline.json

Als iemand per ongeluk de primaire merk kleur wijzigt of de spacing-schaal verstoort, zal de action falen en een opmerking achterlaten in de PR met de gewijzigde tokens. Voor andere CI-systemen retourneert het hulpprogramma een non-zero exit code bij vergelijking via de --compare baseline.json-flag.

Verbinden met AI-agents via MCP-protocol

De ontwikkelaars hebben Model Context Protocol (MCP)-ondersteuning toegevoegd. Dit betekent dat het hulpprogramma direct kan verbinden met Claude Code, Cursor of Windsurf:

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

Daarna krijgt het neurale netwerk een set tools (get_color_palette, get_typography, get_spacing, generate_design_md) en kan zelfstandig de interface bestuderen en code schrijven op basis van de huidige tokens van de site.

Mogelijke uitdagingen

De README beschrijft eerlijk de technische beperkingen die het waard zijn om te onthouden:

• Donkere modus detecteert zichzelf niet automatisch—je moet het forceren met de --dark-mode-flag.
• Canvas- of WebGL-gebaseerde sites kunnen niet worden geparseerd omdat er geen conventionele DOM-boom is.
• Zware SPA's gebouwd met React of Vue hebben tijd nodig om te hydrateren, dus het is het beste om de --slow-flag vooraf door te geven om timeouts te verhogen.
• Mobiele viewport wordt apart geactiveerd via de --mobile-parameter.

Afsluiting

dembrandt overbrugt de kloof tussen daadwerkelijke webcode en formele designsysteemdocumentatie. Als je rommelige stijlen in een bestaand project moet opruimen, automatische stijlcontrole in CI moet koppelen, of een AI-assistent actuele context over je frontend moet geven, is het hulpprogramma zeker het bookmarken waard. Dankzij de open-source code (MIT) is het eenvoudig in te bedden in je interne build-scripts.