Designlang is a powerful CLI tool that extracts a website's complete design system, including layout patterns, responsive behavior, and interaction states, generating comprehensive output for developers and designers.

What kind of output does Designlang provide?

It generates 8 core files such as W3C Design Tokens, Tailwind/shadcn/ui/React themes, Figma variables, and an AI-optimized markdown report. It also supports multi-platform output for iOS SwiftUI, Android Compose, Flutter, and WordPress.

How is Designlang different from other design extraction tools?

Unlike other tools, Designlang captures the structural skeleton (layout), responsive changes across viewports, interaction states (hover/focus), offers live site syncing, multi-brand comparison, and AI agent integration via its MCP server.

Can Designlang help with accessibility and design quality?

Yes, Designlang provides WCAG accessibility scoring, CSS health audits, and a design system quality score. It can also detect failing contrast pairs to help improve your site's compliance.

How does Designlang integrate with AI agents?

Designlang features a built-in MCP server exposing design tokens, regions, components, and health data to AI agents like Cursor or Claude Code, enabling AI-driven analysis and code generation.

Designlang: Extract Web Design Systems & Multi-Platform Code

Designlang is a powerful CLI tool that crawls any website using a headless browser, extracting every computed style from the live DOM. It goes beyond basic color and font extraction by identifying layout patterns (grids, flexbox), capturing responsive behavior across multiple breakpoints, and recording interaction states (hover, focus, active). It generates 8 comprehensive output files, including W3C Design Tokens, Tailwind config, Figma variables, shadcn/ui themes, and React/CSS-in-JS themes, while also providing WCAG accessibility scores and CSS health audits. Designlang also features a built-in MCP server for seamless integration with AI agents like Claude Code and Cursor, enabling multi-platform output for iOS SwiftUI, Android Compose, Flutter, and WordPress.

주요 기능

01Extracts comprehensive design systems, including DTCG tokens, Figma variables, Tailwind, shadcn/ui, and React themes.

02Analyzes layout patterns, responsive behaviors, and interaction states across multiple viewports.

03Generates multi-platform output for iOS SwiftUI, Android Compose, Flutter, and WordPress block themes.

04Integrates with AI agents via a built-in MCP server, exposing design tokens, regions, components, and health data.

05Provides WCAG accessibility scoring, CSS health audits, design system quality scoring, and live site syncing capabilities.

061,002 GitHub stars

사용 사례

01Automate design token synchronization from live websites to local development environments.

02Quickly extract and apply a website's design system to new projects or different platforms.

03Audit a website's design quality, accessibility, and CSS health with detailed reports and scoring.

04Enhance AI agent capabilities by providing real-time access to a website's design language and components.