designlang

designlang is an open-source CLI tool that parses a URL and extracts a website's complete design system, including tokens and themes, into multiple formats.

designlang is an open-source command-line tool that points a headless Chromium browser at a website to extract its design system directly from the rendered DOM. It supports W3C DTCG tokens, Tailwind configs, CSS variables, Figma variables, shadcn/ui themes, and native code formats including iOS SwiftUI, Android Jetpack Compose, and Flutter. The tool functions as an MCP server for AI editors like Claude Code, Cursor, and Windsurf, and it generates configuration files for AI agents. Beyond extraction, it performs CSS health audits, WCAG contrast remediation, and semantic region classification. It is designed for developers who need to reverse-engineer design patterns into ready-to-use code or documentation.

designlang at a glance

Best for: Designer, Software engineer
Runs on: CLI
Pricing: Free; MIT licensed
Released: April 2026
Category: AI coding tool
Website: designlang.app

Key features

Extracts W3C DTCG tokens, Tailwind configs, and CSS variables
Generates native code for iOS, Android, Flutter, and WordPress
Provides a stdio MCP server for Claude Code, Cursor, and Windsurf
Includes CSS health audits and WCAG contrast remediation
Creates print-ready brand-book PDFs with embedded tokens
Offers a CI drift bot to detect changes in live design systems
Captures interactive states including hover, focus, and keyframes

Use it for

Reverse-engineering design systems from live websites
Integrating existing brand design systems into AI development workflows
Automating design system documentation with PDF brand-books
Monitoring design system drift in CI/CD pipelines

Alternatives to designlang

Diagram Design — Generates editorial-quality visual types matched to brand colors and typography in seconds.
Hallmark — Generates distinct web designs and avoids common AI visual clichés.
Interface Design — Stops Claude from forgetting design choices between conversations.
StyleSeed — Enforces repeatable design quality with automated code and render checks.
SlopScan — Identifies visual flaws and generates targeted implementation prompts.
Better Design — Equips your AI coding agent with design systems through one MCP server.
daidocs — It keeps code graphs as plain text for lower token costs and better accuracy.
shadcn Lint — It guides coding agents to follow design system rules and fix violations.
Libraries.dev — Prompt-based UI libraries that coding agents can install and configure directly
Magic MCP — Provides AI agents direct access to a catalog of 12,000+ React components.
UI Skills — Curated skills for building polished frontend interfaces.
Proof — Generates production-ready page designs based on real product patterns.

All designlang alternatives