About this project

designlang (repository manavarya09/design-extract, npm package designlang) is an open-source CLI, MIT-licensed, requiring Node 20+, that uses a headless browser to extract a design system from any live URL. It emits 17+ files to ./design-extract-output, including a 19-section design-language markdown, W3C DTCG design tokens with primitive, semantic, and composite layers, a Tailwind config, shadcn/ui theme variables, Figma Variables JSON, CSS custom properties, typed React component anatomy stubs, motion tokens, brand voice JSON, and paste-ready prompts for v0, Lovable, Cursor, and Claude Artifacts. It also writes an MCP server payload and can run as an MCP server. Beyond single-page token extraction, it offers layout-system capture (grids, flex, container widths, gaps), responsive crawling at four breakpoints, interaction-state capture (hover/focus/active), runtime motion capture via document.getAnimations() for durations, choreography/stagger, and scroll recipes, multi-page crawling with shared versus route-specific token reconciliation, WCAG 2.1 contrast scoring with remediation palette suggestions, z-index maps, gradient detection, SVG icon deduplication, font-file detection, image-style classification, stack fingerprinting, CSS health auditing, semantic region classification (nav, hero, pricing, testimonials, CTA, footer), and reusable component clustering. Commands include: designlang URL for full extraction; site for whole-site canonical system and consistency grade; grade for a shareable HTML report card and SVG badge; battle for head-to-head grading; remix to restyle in vocabularies such as brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial; pack to bundle outputs; theme-swap for OKLCH hue rotation around a new primary; brand for a 13-chapter brand-guidelines book; pair to fuse two designs; dna to place a design in a measured 30-feature space against a corpus; dna-corpus to build a custom reference corpus; fidelity to score a clone against the original visually and in motion with a correction plan; gallery to build a static gallery; clone to generate a Next.js starter; apply to write tokens into a detected framework; drift, lint, and visual-diff for CI-ready checks; sync, history, watch, and diff for monitoring and comparison. Multi-platform emitters add iOS SwiftUI, Android Compose, Flutter, and WordPress outputs. A Chrome extension (MV3, activeTab) provides one-click handoff. It can be installed globally via npm or added as an agent skill, and ships as a Claude Code plugin with slash commands. Optional --smart classification can use Atlas Cloud or existing OpenAI/Anthropic keys. The README notes deterministic, free core operation for site extraction and that design scoring avoids substituting missing measurements. This is a design-tooling and developer-tooling project useful for design-system audits, token generation, accessibility review, design-to-code workflows, and clone fidelity measurement.