Manavarya09/design-extract

Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.

What it solves

designlang is a tool that extracts the complete design system of any live website by analyzing its DOM. It solves the problem of manually recreating design tokens, layouts, and brand guidelines from a live site, providing developers and designers with a programmatic way to clone or analyze a website's visual identity.

How it works

The tool uses a headless browser (Chromium) to point at a URL and read the design system directly from the live DOM. It analyzes colors, typography, spacing, motion, and layout patterns across multiple breakpoints. It can crawl multiple pages to synthesize a canonical, de-duplicated design system and can even measure the "fidelity" of a clone against the original site using pixel-diffs and motion analysis.

Who it’s for

  • Frontend Developers: To quickly generate Tailwind configs, shadcn themes, or Next.js starters based on a live site.
  • UI/UX Designers: To extract Figma variables and brand guidelines from existing websites.
  • AI Agents: Through an MCP server or Claude Code plugin, agents can programmatically access design tokens and components to build or restyle websites.

Highlights

  • Comprehensive Extraction: Emits 17+ files including DTCG tokens, Tailwind configs, Figma variables, and typed React component anatomy.
  • Fidelity Measurement: Scores clones against originals with a 0-100 grade and a ranked correction plan for visual and motion accuracy.
  • Design DNA: Ranks a design against a corpus of other systems across five axes (color, type, space, shape, motion) to determine its relative position in the design space.
  • Whole-Site Analysis: Crawls multiple pages to separate site-wide tokens from page-local choices.
  • Agent Integration: Ships as a Claude Code plugin and an MCP server for seamless use with AI coding tools.
  • Advanced Visuals: Captures interaction states (hover/focus), WCAG contrast scoring, and complex motion choreography.

Related

  • Project
    yusukebe/ax

    A command-line tool designed for AI agents to fetch, discover, and extract structured data from the web, replacing the need for fragile parsing scripts and raw HTML dumps.

  • Project
    Railly/tinte

    A tool that compiles design systems into installable Agent Plugins, allowing AI coding agents to write on-brand UI by following a specific set of design tokens and composition rules.

  • Project
    oil-oil/draw-ui

    draw‑ui is an AI‑powered skill that helps an LLM agent design a UI from a text brief or existing screenshot and optionally output ready‑to‑use HTML/CSS or WeChat mini‑program code.

  • Project
    zanwei/design-dna

    An agent skill that extracts visual design identities from references into a machine-readable JSON "Design DNA" to ensure faithful and deterministic UI implementation.

  • Project
    nexu-io/open-design

    OpenDesign is a desktop‑first, Apache‑2.0‑licensed workspace that lets teams use any installed LLM coding agent (Claude, Codex, DeepSeek, etc.) to generate and iterate on design artefacts—web prototypes, slide decks, dashboards, images, and motion‑graphics videos. It ships with hundreds of design‑system packages and template libraries, supports 26+ agent CLIs via a simple plug‑in system, runs locally (macOS/Windows, source‑build for Linux), and can export results as HTML, PDF, PPTX, or MP4 via the open‑source HyperFrames engine.