DesignLang

Name: DesignLang
Availability: InStock
Author: Manavarya09

Supports UI

by Manavarya09

Extract complete design systems and visual DNA from any website into AI-optimized tokens and Tailwind configs.

0 stars

0 views

Works in:CursorWindsurf

Exposes:ToolsResources

What it does\nExtracts the structural skeleton and visual styles of any website. It captures colors, typography, spacing, and layout patterns, converting them into a comprehensive design language that AI agents can use to rebuild sites faithfully.\n\n## Tools\n- `extract-design`: Crawls a URL to generate 17+ output files including W3C design tokens and Tailwind configs.\n- `score-design`: Rates a site's design quality across 7 categories with a visual bar chart.\n- `visual-diff`: Captures side-by-side HTML reports of two URLs to compare design deltas.\n\n## Installation\nAdd to your MCP client config:\n`json\n{\n "mcpServers": {\n "designlang": {\n "command": "npx",\n "args": ["-y", "designlang"]\n }\n }\n}\n`\n\n## Supported hosts\nClaude Desktop, Cursor, Windsurf, Claude Code.

npx designlang <url>

Choose your AI client and follow the steps below.

Cursor

mcp.json entry in ~/.cursor/ or project .cursor/

Windsurf

mcp_config.json entry

Claude Desktop

{"mcpServers": {"designlang": {"command": "npx", "args": ["-y", "designlang"]}}}