اوپن سورس۔ نئے امکانات۔

Marigold، Marigold Design System کا ایک React ورژن ہے، جسے react-aria اور Tailwind CSS پر بنایا گیا ہے۔ یہ monorepo کمپوننٹ اور تھیم پیکجز، Storybook، Next.js ڈاکومنٹیشن سائٹ، Vitest ٹیسٹ اور Changesets کے ذریعے CI-driven ریلیز فراہم کرتا ہے۔

Design Oracle Playwright کے ذریعے ویب سائٹ کا تجزیہ کر کے اس کا ڈیزائن سسٹم (رنگ، ٹائپوگرافی، اسپیسنگ وغیرہ) نکالتا ہے اور اسے Tailwind v4، React JSX، JSON یا DESIGN.md رپورٹ میں ایکسپورٹ کرتا ہے۔

Panda ڈیزائن سسٹمز کے لیے ایک یونیورسل، ٹائپ سیف CSS-in-JS فریم ورک ہے۔ یہ بلڈ ٹائم پر اسٹائلز نکالتا ہے، کیسکیڈ لیئرز اور ویری ایبلز کے ساتھ جدید CSS فراہم کرتا ہے، اور زیادہ تر JS فریم ورکس کے ساتھ کام کرتا ہے۔

Dembrandt ایک Node.js CLI ہے جو Playwright کے ساتھ ایک سائٹ کو رینڈر کرتا ہے، کمپیوٹڈ DOM اسٹائلز کو پڑھتا ہے، اور رنگوں، ٹائپوگرافی، اسپیسنگ، بارڈرز، شیڈوز، موشن اور اجزاء کو W3C ڈیزائن ٹوکنز میں تبدیل کرتا ہے، جس میں CI ڈرفٹ گیٹس اور MCP سپورٹ شامل ہے۔

oh-my-design AI کوڈنگ ایجنٹس میں ڈیزائن سسٹم حوالہ جات اور مہارتیں انسٹال کرتا ہے۔ ایک کمانڈ کے ذریعے 440+ کمپنی ڈیزائن حوالہ جات، 28 مہارتیں اور 20 ماہرانہ کردار Claude Code, Codex, Cursor اور OpenCode میں شامل ہوتے ہیں۔ یہ فلسفہ، ٹوکنز اور اجزاء کے معاہدوں کے ساتھ ایک پورٹیبل DESIGN.md بناتا ہے۔

Chromatic ایک ایسا بلڈ ٹول ہے جو ڈیزائن ٹوکن فائلوں کے ذریعے کراس پلیٹ فارم ڈیزائن سسٹمز کو مینیج کرتا ہے۔ یہ ٹوکن ایکسپریشنز، تھیمز، اور YAML/JSON ان پٹ کو سپورٹ کرتا ہے اور Sass، CSS، iOS، Android اور HTML اسٹائل گائیڈ آؤٹ پٹ تیار کرتا ہے۔

Vanilla CSS کے ساتھ بنایا گیا ایک ہلکا پھلکا، ماڈیولر اور قابلِ تخصیص ڈیزائن سسٹم، جو CSS variables، موبائل فرسٹ ریسپانسو ڈیزائن اور رسائی (accessibility) کے اصولوں پر مبنی ہے۔

ڈیزائنMD ایک CLI ٹول ہے جو کسی بھی URL سے لائیو ڈیزائن سسٹم — رنگ، ٹائپوگرافی، اسپیسنگ، بریک پوائنٹس، اور تعاملی حالتیں — نکالتا ہے اور AI کوڈنگ ایجنٹس کے لیے موزوں DESIGN.md فائل بناتا ہے۔

design-md-hub 120 برانڈ ڈیزائن سسٹمز کا اوپن سورس ذخیرہ ہے، جنہیں لائیو پروڈکشن سائٹس سے ریورس انجینئر کیا گیا ہے تاکہ AI کوڈنگ ایجنٹس برانڈ پر مبنی UI پیدا کر سکیں۔ ہر ایک میں رنگ، ٹائپوگرافی، کمپوننٹس، گارڈ ریلز اور پیش نظارہ HTML فائل شامل ہے۔

Codex Wikimedia کا ڈیزائن سسٹم ہے، جو Vue 3 اور CSS اجزاء، ڈیزائن ٹوکنز، آئیکنز اور VitePress ڈاکومنٹیشن سائٹ فراہم کرتا ہے۔ یہ بین الاقوامیت کی حمایت کرتا ہے اور WCAG 2.1 AA رسائی کے معیارات پر پورا اترتا ہے۔

designlang ایک اوپن سورس CLI ہے جو Playwright کی بنیاد پر کسی بھی ویب سائٹ سے ڈیزائن سسٹم نکالتا ہے: DTCG ٹوکنز، ٹیل وِنڈ کونفگ، فigma ویری ایبلز، شادcn تھیم، کمپوننٹ ایناتومی، موومنٹ ٹوکنز، برانڈ وائس، اور WCAG کنٹراسٹ آڈٹ۔

ڈویلپرز کے لیے ڈیزائن سسٹمز کے بارے میں بک مارکس، وسائل، مضامین اور ٹولز کا ایک منتخب انگریزی مجموعہ، جس میں ڈیزائن ٹولز، ڈیزائن ٹوکنز، پیٹرن لائبریریز، کمپوننٹ ٹیسٹنگ، کتابیں اور ٹاکس شامل ہیں۔

Tinte ایک ڈیزائن سسٹم کمپائلر ہے جو ایک شناخت (identity) سے Agent Plugin تیار کرتا ہے، جس میں SKILL.md اور tokens.css شامل ہیں۔ یہ shadcn presets، ایڈیٹر تھیمز اور ٹرمینل کلر اسکیمز بھی فراہم کرتا ہے۔

حقیقی ویب سائٹس اور برانڈز سے اخذ کردہ DESIGN.md فائلوں کا ایک منتخب مجموعہ۔ اپنے پروجیکٹ میں ایک DESIGN.md شامل کریں اور AI کوڈنگ ایجنٹس کو اس برانڈ کی بصری شناخت، رنگوں، ٹائپوگرافی، اور لے آؤٹ کے نمونوں کے مطابق UI بنانے دیں۔

Better Design ایک اوپن سورس MCP سرور اور shadcn/ui رجسٹری ہے جو AI کوڈنگ ایجنٹس کو ڈیزائن سسٹمز، سیمنٹک CSS ٹوکنز، UI اصولوں اور WCAG ریویو رولز فراہم کرتا ہے۔ یہ 31 تھیمز پر مشتمل ہے اور Claude Code، Cursor اور VS Code جیسے کلائنٹس سے منسلک ہوتا ہے۔

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 Code、Cursor、Codexと連携するFigmaデザインシステム管理スキル。Inspectモードはトークン適合性・WCAG・インタラクティブ状態などの6項目監査で評価スコアを生成。Buildモードは6フェーズワークフローでコンポーネント作成・スロット追加・トークンCSSエクスポートなどを実施。オンデマンドロードで軽量設計。