इस प्रोजेक्ट के बारे में

designlang (repository manavarya09/design-extract, npm package designlang) एक खुला-स्रोत CLI है, MIT-लाइसेंस वाला, जिसके लिए Node 20+ की आवश्यकता है। यह हेडलेस ब्राउज़र का उपयोग करके किसी भी live URL से डिज़ाइन सिस्टम निकालता है। यह ./design-extract-output में 17+ फ़ाइलें उत्पन्न करता है, जिनमें 19-खंडों वाला डिज़ाइन-भाषा मार्कडाउन, W3C DTCG डिज़ाइन टोकन (primitive, semantic और composite परतों सहित), Tailwind कॉन्फ़िगरेशन, shadcn/ui थीम चर, Figma Variables JSON, CSS custom properties, टाइप्ड React कंपोनेंट एनाटॉमी स्टब्स, मोशन टोकन, ब्रांड वॉइस JSON, और v0, Lovable, Cursor और Claude Artifacts के लिए पेस्ट-रेडी प्रॉम्प्ट शामिल हैं। यह MCP सर्वर पेलोड भी लिखता है और MCP सर्वर के रूप में चलाया जा सकता है। सिंगल-पेज टोकन extraction के परे, यह लेआउट सिस्टम कैप्चर (ग्रिड, फ्लेक्स, कंटेनर चौड़ाई, गैप्स), चार ब्रेकपॉइंट पर रिस्पॉन्सिव क्रॉलिंग, इंटरैक्शन-स्टेट कैप्चर (hover/focus/active), document.getAnimations() के माध्यम से रनटाइम मोशन कैप्चर (duration, choreography/stagger, स्क्रॉल रेसिपी), multi-page क्रॉलिंग (shared versus route-specific टोकन reconcilation), WCAG 2.1 कंट्रास्ट स्कोरिंग (remediation palette सुझाव सहित), z-index मैप्स, 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), और reusable कंपोनेंट clustering प्रदान करता है। कमांड: designlang URL (पूर्ण extraction); site (संपूर्ण साइट canonical सिस्टम और consistency grade); grade (शेयर करने योग्य HTML रिपोर्ट कार्ड और SVG बैज); battle (head-to-head grading); remix (brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial जैसी vocabulary में restyling); pack (outputs bundle); theme-swap (OKLCH hue rotation किसी नए primary के चारों ओर); brand (13-अध्याय वाला ब्रांड-गाइडलाइन्स बुक); pair (दो डिज़ाइन को fuse करना); dna (30-फ़ीचर स्पेस में डिज़ाइन को position करना); dna-corpus (कस्टम reference corpus बनाना); fidelity (clone को मूल के साथ visual और motion में score करना); gallery (static gallery बनाना); clone (Next.js starter generate करना); apply (tokens को detected framework में लिखना); drift, lint, और visual-diff (CI-ready checks); sync, history, watch, और diff (monitoring और comparison)। Multi-platform emitters से iOS SwiftUI, Android Compose, Flutter, और WordPress outputs मिलते हैं। एक Chrome एक्सटेंशन (MV3, activeTab) एक-क्लिक हanded-off प्रदान करता है। इसे npm से globally install किया जा सकता है या agent skill के रूप में जोड़ा जा सकता है, और Claude Code प्लगइन के रूप में slash commands के साथ आता है। वैकल्पिक --smart classification Atlas Cloud या मौजूदा OpenAI/Anthropic keys का उपयोग कर सकता है। README deterministic, मुफ्त core operation की घोषणा करती है। यह एक डिज़ाइन-टूल्स और डेवलपर-टूल्स प्रोजेक्ट है जो design-system audits, token generation, accessibility review, design-to-code workflows, और clone fidelity measurement के लिए उपयोगी है।