TC
ToolCompared
MCP Server

Designlang MCP Server

by Manavarya09

Extract a full design system from any live website.

CommunityTypeScriptDesign Tools
View RepositoryDocumentation

About Designlang

A powerful CLI tool that crawls any website using a headless browser, extracting every computed style from the live DOM. Generates 8 comprehensive output files including W3C Design Tokens, Tailwind config, Figma variables, shadcn/ui themes, and React/CSS-in-JS themes. Includes built-in MCP server for integration with Claude Code and Cursor, plus multi-platform output for iOS SwiftUI, Android Compose, Flutter, and WordPress.

Tags

design-tokensdesign-systemtailwindshadcn

How to install Designlang

Add the following entry to your MCP client config (e.g. claude_desktop_config.json or .mcp.json). Refer to the official repository for the exact command, package name, and required environment variables.

{
  "mcpServers": {
    "designlang": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-designlang"]
    }
  }
}

Example shape only — see the repository for the canonical install command.

Related MCP servers in Design Tools

Figma MCP
Figma

Read frames and components and convert designs to code.

Canva MCP
Canva

Generate, edit, and export Canva designs from chat.

Magic
21st.dev

Generate UI components from natural language inside your IDE.

Penpot
Penpot

Open-source design and prototyping platform with native MCP.

← Back to MCP directory