designlang

Active
GitHub JavaScript MIT

Description

designlang reads the complete design system off any website in one command, emitting DTCG tokens, Tailwind, Figma variables, multi-platform component code, and an MCP server.

Key Features

  • One-command extraction - point at any URL to read the full design system off the live DOM
  • Multi-format output - emits DTCG tokens, Tailwind config, shadcn theme, Figma variables, and 17+ files
  • Responsive and state analysis - parses layout and hover/focus/active states across 4 breakpoints
  • WCAG scoring - automatically checks contrast and accessibility issues
  • MCP server - plugs into Claude Code, Cursor, and Windsurf coding agents
  • Multi-platform emitters - outputs iOS SwiftUI, Android Compose, Flutter, WordPress, and more

Use Cases

💡 Quickly replicate a reference site's design language for your own product
💡 Feed structured design tokens into design-to-code agent workflows
💡 Audit accessibility and design consistency of existing sites
💡 Generate paste-ready prompt packs for v0, Lovable, and Cursor

Tags

design-system mcp design-to-code tailwind figma

Categories

🔌 MCP Tools

Quick Start

# No install needed - extract a site's design system directly
npx designlang https://stripe.com
# Launch the visual token editor
npx designlang studio
Visit GitHub Visit Website

Related Projects