git404hub

what is design-extract fr?

manavarya09/design-extract — explained in plain English

Analysis updated 2026-05-18

2,661JavaScriptAudience · designerComplexity · 2/5Setup · easy

tl;dr

A command-line tool that reverse-engineers any website's design system, colors, fonts, spacing, into ready-to-use tokens, Tailwind configs, and Figma imports.

vibe map

mindmap
  root((designlang))
    What it does
      Extracts design systems
      Analyzes colors and type
      Generates 17 output files
    Tech stack
      JavaScript
      Tailwind
      Figma
      MCP server
    Use cases
      Extract tokens
      Grade design quality
      Restyle a site
      Check accessibility
    Audience
      Designers
      Vibe coders
      Developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Extract a competitor site's color palette and typography into reusable design tokens.

VIBE 2

Generate a Tailwind config from an existing website's visual style.

VIBE 3

Grade a website's design quality and check its accessibility contrast.

VIBE 4

Clone a site's look into a working starter app in a different aesthetic.

what's the stack?

JavaScriptNode.jsTailwindFigmaMCP

how it stacks up fr

manavarya09/design-extractopenai/openai-quickstart-nodeyu9191/wloc
Stars2,6612,6412,754
LanguageJavaScriptJavaScriptJavaScript
Last pushed2025-09-242026-06-27
MaintenanceQuietActive
Setup difficultyeasyeasymoderate
Complexity2/52/52/5
Audiencedesignerdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

in plain english

designlang is a command-line tool that reverse-engineers the design system of any website. Point it at a URL and it automatically reads that site's visual language, colors, typography, spacing, animations, component patterns, layout grids, responsive breakpoints, and more, then produces over 17 ready-to-use files from that analysis. A design system is the underlying set of visual rules a website follows: which fonts it uses at what sizes, what its brand colors are, how much space sits between elements, how buttons look when hovered. designlang extracts all of this automatically without manual inspection. The output files are formatted for immediate use in your own projects. They include design tokens in the W3C standard format (a portable JSON specification for design values), a Tailwind configuration file, Figma variable imports (for a widely-used design tool), typed component stubs for React, brand voice notes, and paste-ready prompts for AI design tools like Lovable and Cursor. Beyond token extraction, it can grade a site's design quality with a letter score, compare two sites head-to-head, restyle a site's visual vocabulary into different aesthetic categories (like brutalist or Swiss international), generate a working starter app cloning the design, and check for accessibility problems by scoring color contrast against the WCAG standard (international guidelines for web accessibility). It also runs as an MCP server, letting AI coding assistants like Claude Code and Cursor query extracted design data directly during development. The full README is longer than what was provided.

prompts (copy fr)

prompt 1
Run designlang on [url] and export the design tokens as a Tailwind config.
prompt 2
Use designlang to grade the accessibility of [url]'s color contrast.
prompt 3
Have designlang restyle this site's design into a brutalist aesthetic.
prompt 4
Set up designlang as an MCP server so Cursor can query the extracted design data.

Frequently asked questions

what is design-extract fr?

A command-line tool that reverse-engineers any website's design system, colors, fonts, spacing, into ready-to-use tokens, Tailwind configs, and Figma imports.

What language is design-extract written in?

Mainly JavaScript. The stack also includes JavaScript, Node.js, Tailwind.

How hard is design-extract to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is design-extract for?

Mainly designer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.