UI Design Developement Hack with AI

, ,
1

Here are the best open-source projects similar to dembrandt — a CLI that extracts design systems (colors, typography, spacing, shadows) from live websites and outputs W3C DTCG design tokens. github

Design Token Extractors (Live Sites / DOM)

Project Description Language Input Source Output Format
css-design-tokens github Parses CSS to extract colors, font-sizes, gradients, shadows, radii into W3C spec tokens JavaScript CSS string / analyzer W3C Design Tokens JSON
csstokens github CLI that scans CSS, SCSS, JS/JSX/TS/TSX codebases for design tokens TypeScript Frontend codebases Design tokens JSON
pigmnts github Terminal CLI that generates color palettes from images (JPEG, PNG, GIF, WebP) Rust Image files Color palette (tabular)

Design Token Transformers / Build Systems

Project Description Language Input Source Output Format
Style Dictionary github Industry-standard build system: define tokens once, output to iOS, Android, CSS, JS, Sketch, HTML, and more JavaScript JSON / JS token files Multi-platform (CSS vars, Swift, Kotlin, etc.)
Theo github Salesforce OSS abstraction for transforming & formatting design tokens across platforms JavaScript YAML / JSON token files CSS, SCSS, iOS, Android
Tokenbase github GUI + CLI tool to create, manage, and distribute tokens with bulk edit, aliasing, themes, and shade generation SvelteKit Manual entry / templates CSS, SCSS, Less, JSON, Tailwind

Figma-Based Extractors

Project Description Language Input Source Output Format
figma-extractor github Go CLI using Figma REST API to extract colors, typography, spacing, and shadows Go Figma files (via API) Design token JSON
Figtree reddit Extracts design tokens from Figma files without Dev Mode or paid plugins; compatible with free accounts TypeScript Figma files Tokens (colors, spacing)

Managed / Hosted Alternatives

Project Description Key Feature
Specify specifyapp Design token engine with open-source parsers; syncs tokens from multiple sources via SDK, CLI, or GitHub integration Multi-source sync + versioning

Key Differences at a Glance

The most dembrandt-like project is css-design-tokens by Project Wallace — both parse live CSS/DOM and output W3C-compliant tokens. The key distinction is that dembrandt uses Playwright to render the full browser environment (handling SPAs, dark mode, bot detection), while css-design-tokens operates on raw CSS strings. Style Dictionary is the best choice if you already have tokens and need to transform them to multiple platforms, while Theo by Salesforce serves a similar purpose with a focus on cross-platform (iOS/Android/web) consistency. github