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

brandmd एक कमांड-लाइन टूल है जो किसी भी लाइव वेबसाइट को मशीन-रीडेबल डिज़ाइन स्पेसिफिकेशन में बदल देता है। यह पेज को रेंडर करता है, यह देखता है कि इसे वास्तव में कैसे स्टाइल किया गया है, और परिणाम को DESIGN.md के रूप में लिखता है, जो ओपन @google/design.md spec द्वारा परिभाषित फॉर्मेट है: इसमें रंगों, टाइपोग्राफी, राउंडेड कॉर्नर्स, स्पेसिंग और कंपोनेंट्स के लिए टाइप्ड टोकन रखने वाला YAML frontmatter होता है, जिसके बाद Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components और Do's and Don'ts जैसे गद्य अनुभाग होते हैं। उत्पन्न फाइलों का उद्देश्य आधिकारिक @google/design.md lint कमांड के तहत क्लीन वैलिडेट होना है। इसका उद्देश्य यह है कि AI कोडिंग एजेंट सामान्य इंटरफेस बनाते हैं जब उनके पास प्रोजेक्ट के रंग, फोंट, स्पेसिंग और कंपोनेंट कन्वेंशन नहीं होते हैं। प्रोजेक्ट रूट में DESIGN.md रखने से Claude Code, Cursor, Gemini CLI, Codex और Google Stitch जैसे एजेंटों को वह संदर्भ पहले ही मिल जाता है। एक सिंगल इनवोकेशन, उदाहरण के लिए एक URL के खिलाफ npx brandmd चलाना और DESIGN.md लिखना पर्याप्त है; स्पेसिफिकेशन के मैनुअल लेखन की आवश्यकता नहीं है। एक्सट्रैक्शन लोकल है। टूल Playwright के माध्यम से एक हेडलेस ब्राउज़र लॉन्च करता है, लेज़ी-लोडेड कंटेंट को ट्रिगर करने के लिए स्क्रॉल करता है, कुकी बैनर और ओवरले को हटाता है, :root से CSS कस्टम प्रॉपर्टीज़ (मीडिया क्वेरीज़ सहित) पढ़ता है, और दृश्य तत्वों से कंप्यूटेड स्टाइल एकत्र करता है। इसके बाद यह समान रंगों को क्लस्टर करता है, स्पेसिंग स्केल और बेस ग्रिड यूनिट प्राप्त करता है, बॉर्डर रेडिआई और शैडो स्टाइल की पहचान करता है, और बटन, कार्ड और इनपुट जैसे कंपोनेंट पैटर्न को पहचानता है। टाइपोग्राफी डिटेक्शन रोल-अवेयर है, जो मोनोस्पेस, फॉलबैक और आइकन फोंट को छोड़कर बॉडी फोंट के ऊपर हेडिंग और हेडिंग के ऊपर डिस्प्ले फोंट को प्राथमिकता देता है। डिफॉल्ट पाथ में कोई LLM कॉल या API की शामिल नहीं है। डिफ़ॉल्ट DESIGN.md के साथ कई आउटपुट शेप दिए गए हैं: स्क्रिप्ट और टूलचेन के लिए रॉ JSON टोकन, CSS कस्टम प्रॉपर्टीज़, एक Tailwind v4 @theme ब्लॉक, और स्वाचेस, टाइप स्पेसिमेन, स्पेसिंग विज़ुअलाइज़ेशन और शैडो उदाहरणों के साथ एक सेल्फ-कंटेनड HTML ब्रांड गाइड। कई URL पास किए जा सकते हैं ताकि पेजों के बीच टोकन को मर्ज किया जा सके, जिसमें प्रति पेज फ्रीक्वेंसी को नॉर्मलाइज़ किया जाता है ताकि बटन-भारी डॉक्यूमेंटेशन पेज होमपेज पर हावी न हो सके। एक वैकल्पिक dark फ्लैग prefers-color-scheme का उपयोग करके डार्क-थीम टोकन निकालता है। एक वैकल्पिक vision फ्लैग स्क्रीनशॉट से पढ़े गए इलस्ट्रेशन स्टाइल, फोटोग्राफी मूड और कॉपीराइटिंग वॉयस क्यूज़ जोड़ने के लिए Gemini API की का उपयोग करता है। एक एजेंट फ्लैग अतिरिक्त रूप से Cursor रूल्स और स्किल फाइलों को यूनिवर्सल .agents/skills पाथ और Claude Code स्किल्स डायरेक्टरी दोनों में लिखता है, ताकि ब्रांड संदर्भ बिना मैनुअल वायरिंग के मिल सके। brandmd खुद एक इंस्टॉलेबल एजेंट स्किल के रूप में वितरित किया जाता है, और एक साथी रिपॉजिटरी Tailwind CSS, shadcn/ui, Vercel, Mintlify और Anthropic के लिए तैयार ब्रांड स्किल्स प्रदान करती है। यह टूल जानबूझकर fail-closed है। ब्लॉक पेज, एक्सेस-डिनाइड रिस्पॉन्स, लॉगिन वॉल और बहुत कम सबूत वाले पेज हर फॉर्मेट में एग्जिट कोड 2 के साथ इनकार करते हैं और कोई आर्टिफैक्ट नहीं लिखा जाता है, ताकि एक खराब कैप्चर एक अच्छे DESIGN.md को ओवरराइट न कर सके; एक ओवरराइड फ्लैग आउटपुट को फोर्स करता है लेकिन प्रत्येक फॉर्मेट में आर्टिफैक्ट को मार्क करता है। राइट्स ट्रांजेक्शनल होते हैं, जो अस्थायी फाइलों और रोलबैक के साथ रीनेम का उपयोग करते हैं। एग्जिट कोड सफलता, ऑपरेशनल या वैलिडेशन एरर, रिफ्यूज़ल, और check सबकमांड द्वारा डिटेक्ट किए गए ड्रिफ्ट के बीच अंतर करते हैं। एक check सबकमांड डिज़ाइन ड्रिफ्ट के लिए कमिटेड DESIGN.md के खिलाफ एक डिप्लॉयड पेज की तुलना करता है, रंगों की तुलना हेक्स वैल्यूज़ के अनऑर्डर्ड सेट के बजाय सिमेंटिक रोल द्वारा करता है, और खोए हुए या रिपेंटेड रोल्स और बदले हुए प्राइमरी या सेकेंडरी फोंट पर बिल्ड्स को फेल करता है। डॉक्यूमेंटेशन इसकी सीमाओं के बारे में स्पष्ट है: कंपोनेंट ड्रिफ्ट की रिपोर्ट की जाती है लेकिन यह बिल्ड को फेल नहीं करता है, सेकेंडरी फोंट परिवर्तन बिना नोटिस के पास हो सकते हैं, और गतिशील रूप से बदलने वाले पेज स्प्यूरियस मेजर चेंजेस पैदा कर सकते हैं, इसलिए भरोसा करने से पहले परिणामों को पुनरुत्पादित किया जाना चाहिए। एक अलग diff सबकमांड दो DESIGN.md फाइलों की तुलना करता है और साझा और अद्वितीय रंगों, टाइपोग्राफी, स्पेसिंग, रेडिआई और प्रति-कंपोनेंट अंतरों की एक मार्कडाउन रिपोर्ट के साथ-साथ एक what-to-copy सिंथेसिस तैयार करता है। रिपॉजिटरी में Stripe, Linear, GitHub, Vercel, Notion, Cursor, Anthropic, Figma, Supabase, Raycast और अन्य के उदाहरण आउटपुट की एक गैलरी शामिल है। प्रोजेक्ट MIT लाइसेंस प्राप्त है।