Question 1

What is designlang?

Accepted Answer

designlang is an open-source CLI tool that crawls any live website with Playwright and emits its complete design system in W3C DTCG token format, plus Tailwind, CSS variables, Figma variables, shadcn/ui theme, and native emitters for iOS SwiftUI, Android Compose, Flutter, and WordPress block themes.

Question 2

Does designlang work with AI coding agents like Claude Code and Cursor?

Accepted Answer

Yes. designlang ships a stdio MCP server (designlang mcp) that exposes extracted tokens, regions, components, CSS health, and accessibility remediation as MCP resources and tools, plus an --emit-agent-rules flag that writes .cursor/rules/designlang.mdc, .claude/skills/designlang/SKILL.md, CLAUDE.md.fragment, and agents.md.

Question 3

How is designlang different from Style Dictionary, Subframe, v0, Builder.io, and Project Wallace?

Accepted Answer

designlang extracts from a live rendered URL, not a Figma file or a manually-authored token source. It outputs strict DTCG with a semantic/primitive layering and composite tokens, ships multi-platform emitters (iOS, Android, Flutter, WordPress) from one extraction, runs a CSS health audit plus a11y remediation, classifies page regions, and detects reusable components automatically. It is open-source under MIT and runs locally as a CLI or MCP server.

Question 4

Is designlang free and open source?

Accepted Answer

Yes. designlang is MIT-licensed, free, and fully open-source. The CLI installs with npx designlang <url> and requires only Node.js 20 or later. The website at designlang.manavaryasingh.com offers a free rate-limited extraction for quick demos.

Question 5

What output formats does designlang support?

Accepted Answer

W3C DTCG JSON (primitive, semantic, composite layers), Tailwind CSS config, CSS custom properties, Figma Variables JSON, shadcn/ui theme, React / Vue / Svelte theme objects, iOS SwiftUI Color + CGFloat extensions, Android Jetpack Compose Theme.kt and colors.xml, Flutter ThemeData, and a WordPress block theme skeleton (theme.json, style.css, templates).

Extract any website’sdesign system.

Extract any website’s
design system.