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 a complete design system from any live website. It eliminates the manual effort of recreating styles, tokens, and layouts by programmatically reading the DOM to generate developer-ready assets like Tailwind configs, Figma variables, and React component stubs.

How it works

The tool uses a headless browser (Chromium) to analyze a URL's live DOM. It extracts colors, typography, spacing, and motion, and can crawl multiple pages to synthesize a canonical, de-duplicated design system. It also analyzes layout patterns, responsive behavior across four breakpoints, and interaction states (hover/focus/active).

Who it’s for

Frontend developers, UI/UX designers, and AI coding agents who need to clone, replicate, or analyze the design language of existing websites to jumpstart development or ensure visual fidelity.

Highlights

  • Comprehensive Output: Emits over 17 files, including W3C DTCG tokens, Tailwind configs, shadcn themes, and Figma variables.
  • Fidelity Measurement: Compares a clone against an original site using pixel-diffs and motion analysis to provide a 0-100 score and a ranked correction plan.
  • 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.
  • AI Integration: Ships as a Claude Code plugin and an MCP server, allowing AI agents to access design tokens and components directly.
  • Advanced Extraction: Captures runtime motion (stagger, choreography, scroll recipes) and WCAG contrast scoring for accessibility.
  • Whole-Site Synthesis: Crawls multiple pages to separate site-wide tokens from page-local choices based on coverage.

Related

  • 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
    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
    boyang-hu/website-rebuild-skill

    A system for AI agents to perform line-by-line, pixel-perfect reconstruction of websites, transforming obfuscated production code into a provably identical, human-readable source project.

  • Project
    0xMassi/webclaw

    A web extraction tool that converts websites into clean Markdown, JSON, and LLM-ready context for AI agents and RAG pipelines.

  • Project
    browserwing/browserwing

    A browser automation platform that turns websites into structured data using a visual recorder, a CLI for AI agents, and native support for MCP and Skills protocols.