ओपन सोर्स। नई संभावनाएँ।

Codex Wikimedia के लिए डिज़ाइन सिस्टम है, जो Vue 3 और CSS कंपोनेंट्स, डिज़ाइन टोकन, आइकन और एक VitePress दस्तावेज़ीकरण साइट प्रदान करता है। यह अंतर्राष्ट्रीयकरण का समर्थन करता है और WCAG 2.1 AA एक्सेसिबिलिटी मानकों को पूरा करता है।

designlang एक Playwright-आधारित CLI है जो किसी वेबसाइट के live DOM से DTCG टोकन, Tailwind config, Figma variables, shadcn theme, component anatomy, motion tokens, brand voice और WCAG contrast audits निकालता है।

डेवलपर्स के लिए डिज़ाइन सिस्टम पर आधारित बुकमार्क्स, संसाधनों, लेखों और टूल्स का एक क्यूरेटेड अंग्रेजी संग्रह, जिसमें डिज़ाइन टूल्स, डिज़ाइन टोकन, पैटर्न लाइब्रेरी, कंपोनेंट टेस्टिंग, किताबें और टॉक्स शामिल हैं।

Tinte एक डिज़ाइन सिस्टम कंपाइलर है जो एक identity config से Agent Plugin, shadcn presets और एडिटर थीम्स बनाता है। यह SKILL.md और tokens.css के माध्यम से कोडिंग एजेंटों को ऑन-ब्रांड UI लिखने में सक्षम बनाता है।

विभिन्न उद्योगों की वास्तविक वेबसाइटों से निकाले गए DESIGN.md फ़ाइलों का संग्रह। अपने प्रोजेक्ट में DESIGN.md डालें और AI कोडिंग एजेंट्स को उस ब्रांड की दृश्य पहचान, रंग, टाइपोग्राफी एवं लेआउट पैटर्न के अनुसार UI बनाने के लिए निर्देश दें।

Better Design एक ओपन-सोर्स MCP सर्वर और shadcn/ui रजिस्ट्री है जो AI कोडिंग एजेंटों को डिज़ाइन सिस्टम, CSS टोकन, UI सिद्धांत और WCAG समीक्षा नियम प्रदान करता है। यह 31 थीम के साथ Claude Code और Cursor जैसे क्लाइंट्स से जुड़ता है।

brandmd एक CLI है जो किसी वेबसाइट के डिज़ाइन सिस्टम को spec-valid DESIGN.md में निकालता है जो आधिकारिक @google/design.md linter को पास करता है, जिससे Claude Code, Cursor और अन्य कोडिंग एजेंटों को UI लिखने से पहले ब्रांड संदर्भ मिलता है।

GlassKit एक डिपेंडेंसी-मुक्त CSS कंपोनेंट लाइब्रेरी है जिसमें iOS 26 Liquid Glass से प्रेरित ग्लासमोर्फिज्म लुक है: इसमें थीम्स, डिज़ाइन टोकन, यूटिलिटी क्लासेस और Shadow DOM के लिए Constructable Stylesheet शामिल हैं।

एक Claude कौशल जो Figma डिज़ाइन सिस्टम की जाँच और निर्माण के लिए है, पढ़ने‑के‑मोड ऑडिट प्रदान करता है (WCAG, टोकन अनुपालन, इंटरैक्टिव स्टेट्स आदि) और एक बिल्ड मोड जो घटक बनाता है, स्लॉट जोड़ता है, और वैकल्पिक रूप से tokens.css और AI नियम निर्यात करता है ताकि डिज़ाइन‑से‑कोड एकीकरण सहज हो सके।

Marigold, Marigold Design System का एक React कार्यान्वयन है, जिसे react-aria और Tailwind CSS पर बनाया गया है। यह monorepo कंपोनेंट और थीम पैकेज, Storybook वर्कस्पेस, Next.js डॉक्यूमेंटेशन साइट, Vitest टेस्ट और Changesets के माध्यम से CI-ड्रिवन रिलीज़ प्रदान करता है।

Design Oracle Playwright के जरिए वेबसाइट का विश्लेषण कर उसके डिजाइन सिस्टम (रंग, टाइपोग्राफी, स्पेसिंग आदि) को निकालता है और Tailwind v4 config, React JSX, JSON टोकन या DESIGN.md रिपोर्ट एक्सपोर्ट करता है।

Panda डिज़ाइन सिस्टम के लिए एक यूनिवर्सल, टाइप-सेफ CSS-in-JS फ्रेमवर्क है। यह बिल्ड टाइम पर स्टाइल निकालता है, आधुनिक CSS आउटपुट देता है, और अधिकांश JS फ्रेमवर्क के साथ काम करता है।

Dembrandt एक Node.js CLI है जो Playwright से साइट रेंडर करके DOM स्टाइल्स पढ़ता है और रंग, टाइपोग्राफी, स्पेसिंग, बॉर्डर्स, शैडो, मोशन व कंपोनेंट्स को W3C डिज़ाइन टोकन में बदलता है।

oh-my-design एक ओपन-सोर्स CLI टूल है जो डिज़ाइन सिस्टम को AI कोडिंग एजेंट्स में इंस्टॉल करता है। एक कमांड से 440+ कंपनी डिज़ाइन रेफ़रेंस, 28 स्किल्स और 20 विशेषज्ञ रोल क्लॉड कोड, कोडेक्स, सॉरर और ओपनकोड में जुड़ जाते हैं। यह DESIGN.md फ़ाइल बनाता है जिसमें दार्शनिकता, टोकन और कॉम्पोनेंट कॉन्ट्रैक्ट्स होते हैं।

Chromatic एक बिल्ड टूल है जो डिज़ाइन-टोकन फ़ाइलों से क्रॉस-प्लेटफ़ॉर्म डिज़ाइन सिस्टम को मैनेज करता है। यह एक्सप्रेसिव टोकन एक्सप्रेशन, थीम्स, YAML/JSON इनपुट का समर्थन करता है और Sass, CSS, iOS, Android और HTML स्टाइल-गाइड आउटपुट जेनरेट करता है।

Vanilla CSS के साथ बनाया गया एक हल्का, मॉड्यूलर और कस्टमाइज़ेबल डिज़ाइन सिस्टम, जो CSS variables, मोबाइल-फर्स्ट रिस्पॉन्सिव सिद्धांतों और एक्सेसिबिलिटी प्रथाओं का उपयोग करता है।

DesignMD एक CLI टूल है जो किसी भी URL से लाइव डिज़ाइन सिस्टम — रंग, टाइपोग्राफी, स्पेसिंग, ब्रेकपॉइंट्स और इंटरैक्शन स्टेट्स — निकालकर AI कोडिंग एजेंट्स के लिए अनुकूलित DESIGN.md फ़ाइल उत्पन्न करता है।

design-md-hub में 120 ब्रांड डिज़ाइन सिस्टम का ओपन-सोर्स संग्रह है, जो AI कोडिंग एजेंट्स के लिए plain-text DESIGN.md फ़ाइलों में उपलब्ध हैं।