इस प्रोजेक्ट के बारे में
Dembrandt एक ओपन-सोर्स कमांड लाइन टूल है जो लाइव वेबसाइट से डिज़ाइन-टोकन सेट बनाता है। यह playwright-core के ज़रिए Chromium को चलाकर पेज रेंडर करता है, DOM से कंप्यूटेड स्टाइल्स पढ़ता है, रंगों की उपयोग और कॉन्फिडेंस का विश्लेषण करता है, समान टाइपोग्राफी को ग्रुप करता है, स्पेसिंग पैटर्न खोजता है, और टोकन वापस करता है।
इंस्टॉल और पहली रन: npm install -g dembrandt, फिर dembrandt install-browser, फिर dembrandt dembrandt.com. अलग ब्राउज़र स्टेप ज़रूरी है क्योंकि playwright-core में कोई ब्राउज़र बाइनरी नहीं होती; इसे छोड़ने पर "browser engine not available" का एरर आएगा। npx dembrandt भी काम करता है, और चूंकि ब्राउज़र्स शेर्ड Playwright कैश में आते हैं, यह स्टेप सिर्फ एक बार करना होता है। Node.js 18 या उससे नया चाहिए।
जो निकाला जाता है: रंग (सेमैंटिक, पैलेट, CSS वेरिएबल्स, ग्रेडिएंट), टाइपोग्राफी (फ़ॉन्ट्स, साइज़, वेइट्स, सोurces, फ़ॉन्ट फ़ाइल URLs), मार्जिन और पैडिंग के लिए स्पेसिंग स्केल्स, बॉर्डर्स (रेडियस, विधास, स्टाइल्स, रंग), शैडो, मोशन (ड्यूरेशन स्केल, ईज़िंग कार्व्स, हर कंपोनेंट टाइप के लिए hover पैटर्न), कंपोनेंट्स (बटन, बैज, इनपुट, लिंक्स), ब्रेकपॉइंट्स, और पहचानी गई आइकन और फ्रेमवर्क्स।
आम फ्लैग: save-output JSON को output/domain/TIMESTAMP.json के तहत सहेजता है; dtcg Style Dictionary या Tokens Studio के लिए W3C Design Tokens निर्यात करता है; design-md AI एजेंट्स के लिए DESIGN.md बनाता है; tailwind Tailwind v4 थीम CSS उत्पन्न करता है जो केवल प्रेक्षित मानों का उपयोग करता है; wcag WCAG 2.1 कॉन्ट्रास्ट रिपोर्ट करता है जो वास्तविक DOM जोड़ों से AA और AAA ग्रेड के साथ; crawl page count के साथ कई पेज को एक आउटपुट में मर्ज करता है और क्रॉस-पेज कॉन्फिडेंस बढ़ाता है; slow JavaScript-भारी साइट्स के लिए टाइमआउट को तीन गुना करता है। डिफ़ॉल्ट रूप से केवल फॉर्मेटेड टर्मिनल आउटपुट उत्पन्न होता है।
CI drift चेक: एक GitHub Action url और baseline इनपुट लेती है, PR पर drift वाले टोकन एनोटेट करती है, और जब टोकन बदलते हैं तो job fail कर देती है। दूसरे runner पर यह same gate exit code plus JSON के रूप में होती है, जहां baseline के साथ json-only आउटपुट के साथ तुलना करने पर drift पर exit 1 मिलता है और per-token changes प्रिंट होते हैं। डॉक्युमेंटेशन Action inputs, platform-neutral gate, और exit code table कवर करती है।
MCP के ज़रिए AI एजेंट इंटीग्रेशन: dembrandt-mcp सर्वर Claude Code, Cursor, Windsurf या किसी भी MCP-compatible क्लाइंट के साथ register किया जा सकता है, ताकि एक एजेंट का request जैसे color palette extract करना स्वचालित रूप से handle हो। एक्सपोज्ड टूल्स में get_design_tokens, get_color_palette, get_typography, get_component_styles, get_surfaces, get_spacing और get_brand_identity शामिल हैं, plus analysis tools (compute_drift, get_findings, export_dtcg, generate_design_md, render_report) और job-control tools। Extractions एक job_id देती हैं जिसे get_job_status के साथ poll किया जाता है और फिर analysis tools के साथ reuse किया जाता है। Extraction options में slow, mobile, darkMode, wcag, cookie और header (authenticated pages के लिए), userAgent, noSandbox (Docker और ज्यादातर CI containers के लिए), page count, explicit paths और sitemap discovery शामिल हैं। एक companion skills package extracted tokens के ऊपर UX analysis add करता है।
बीटा में एक hosted app drift tracking, baseline pinning, visual diffs, snapshot timeline, side-by-side comparison और token copying देती है; local use के लिए login की ज़रूरत नहीं है।
सीमाएँ: dark mode flag के बिना auto-detect नहीं होता; hover और focus states CSS से आते हैं पूरे interaction से नहीं; Canvas या WebGL rendered sites का विश्लेषण नहीं हो सकता क्योंकि readable DOM नहीं होता; JavaScript-heavy sites के hydration time की ज़रूरत होती है (8 seconds initial plus 4 seconds stabilization); कुछ dynamically loaded content miss हो सकता है; डिफ़ॉल्ट viewport 1920x1080 है और mobile flag 390x844 में switch करता है।
उद्देश्य: प्रोजेक्ट publicly available CSS और computed styles को documentation, learning और design systems के analysis के लिए read करता है जिसका आप मालिक हैं या जिसका analysis करने की अनुमति है; केवल उन sites पर run करें जिनके terms automated access allow करते हैं या आपके own properties हैं; और third-party brand assets को host, redistribute या claim नहीं करता। MIT license के तहत licensed।
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.