مصدر مفتوح. آفاق جديدة.

Codex هو نظام التصميم الخاص بـ Wikimedia، حيث يوفر مكونات Vue 3 وCSS، ورموز التصميم (design tokens)، وأيقونات، وموقع توثيق VitePress. كما يدعم التدويل ومعايير إمكانية الوصول WCAG 2.1 AA.

designlang هو أداة CLI مفتوحة المصدر تعتمد على Playwright لاستخراج نظام تصميم كامل من أي موقع حي، مولّدة توكنات DTCG وإعدادات Tailwind ومتغيرات Figma و shadcn و React وتوكنات الحركة وأداء WCAG مع إصدارات متعددة المنصات.

مجموعة مختارة باللغة الإنجليزية من الإشارات المرجعية والموارد والمقالات والأدوات حول أنظمة التصميم للمطورين، تغطي أدوات التصميم، وDesign tokens، ومكتبات الأنماط، واختبار المكونات، والكتب، والمحاضرات.

يقوم Tinte بتجميع نظام تصميم إلى Agent Plugin، حيث يستخرج الهوية من مرجع، ويصدر ملف SKILL.md وtokens.css، ويقوم بفحص الألوان التي تتجاوز الرموز. كما ينتج نفس الإعداد مسبقات shadcn وثيمات المحرر ومخططات ألوان الطرفية.

مجموعة مختارة بعناية من ملفات DESIGN.md المستخرجة من مواقع ويب وعلامات تجارية حقيقية. أضف ملف DESIGN.md إلى مشروعك ودع وكلاء البرمجة المدعومين بالذكاء الاصطناعي يولدون واجهة مستخدم متسقة مع الهوية البصرية للعلامة التجارية، وألوانها، وخطوطها، وأنماط تخطيطها.

Better Design هو خادم MCP مفتوح المصدر وسجل shadcn/ui يزود وكلاء البرمجة بالذكاء الاصطناعي بأنظمة التصميم، ورموز CSS الدلالية، ومبادئ واجهة المستخدم، وقواعد مراجعة WCAG، ويدعم عملاء مثل Claude Code وCursor وVS Code.

brandmd هي أداة CLI تستخرج نظام تصميم أي موقع إلكتروني إلى ملف DESIGN.md متوافق مع مواصفات @google/design.md، مما يوفر سياق العلامة التجارية لعملاء البرمجة مثل Claude Code وCursor قبل كتابة واجهة المستخدم. تعمل محلياً دون الحاجة لمفتاح API بشكل افتراضي.

GlassKit هي مكتبة مكونات CSS خالية من التبعيات تعتمد مظهر glassmorphism المستوحى من iOS 26 Liquid Glass، وتوفر سمات، ورموز تصميم، وفئات مساعدة، وConstructable Stylesheet لـ Shadow DOM.

مهارة Claude لفحص وإنشاء أنظمة تصميم Figma، توفر تدقيقات قراءة فقط (WCAG، امتثال الرموز، الحالات التفاعلية، إلخ) ووضع بناء ينشئ المكونات، يضيف فتحات، ويصدر اختياريًا ملف tokens.css وقواعد الذكاء الاصطناعي لتكامل سلس من التصميم إلى الكود。

Marigold هو تنفيذ لـ React لنظام Marigold Design System، مبني على react-aria و Tailwind CSS. يوفر المستودع حزم المكونات والسمات، ومساحة عمل Storybook، وموقع توثيق Next.js، واختبارات Vitest، وإصدارات مدفوعة بـ CI عبر Changesets.

يقوم Design Oracle بتحليل المواقع الإلكترونية باستخدام Playwright لاستخراج نظام التصميم الخاص بها، بما في ذلك الألوان والخطوط والمكونات، ثم تصديرها كإعدادات Tailwind v4 أو React JSX أو تقارير DESIGN.md، ويعمل بشكل مستقل أو كخادم MCP للوكلاء الذكيين.

Panda هو إطار عمل CSS-in-JS عالمي وآمن النوع لأنظمة التصميم. يقوم باستخراج الأنماط في وقت البناء، ويخرج CSS حديثاً مع طبقات الشلال والمتغيرات، ويدعم الوصفات والمتغيرات، ويعمل مع معظم أطر عمل JS.

ديمبراندت أداة سطر أوامر تعتمد على نود.جس ترسم الموقع عبر بلايررايت وتقرأ الأنماط المحسوبة من الـ DOM وتحوّل الألوان والخطوط والمسافات والحدود والظلال والحركة والمكونات إلى رموز تصميم W3C مع مراقبة الانحراف في بيئة CI ودعم MCP.

أداه oh-my-design تدمج أنظمة التصميم مع وكلاء البرمجة بالذكاء الاصطناعي. بب.command واحد تضيف أكثر من 440 مرجع تصميم و28 مهارة و20 دورًا متخصصًا لوكلاء مثل Claude Code وCodex وCursor وOpenCode، مع إنتاج ملف DESIGN.md محمول.

Chromatic هي أداة بناء لإدارة أنظمة التصميم متعددة المنصات من ملفات design-token. تدعم التعبيرات المرنة، والسمات (themes)، ومدخلات YAML/JSON، وتنتج مخرجات بتنسيقات Sass وCSS وiOS وAndroid ودليل أنماط HTML.

نظام تصميم خفيف الوزن، معياري وقابل للتخصيص مبني باستخدام vanilla CSS، يعتمد على متغيرات CSS ومبادئ التصميم المتجاوب مع الهواتف أولاً وممارسات إمكانية الوصول.

DesignMD هو أداة CLI تستخرج أنظمة التصميم الحية من أي عنوان URL — الألوان، الطباعة، التباعد، فواصل الاستجابة، وحالات التفاعل — وتُنتج ملف DESIGN.md المحمول المحسّن لوكلاء البرمجة بالذكاء الاصطناعي.

مجموعة من 120 ملف DESIGN.md تحتوي على مواصفات تصميم العلامات التجارية، تم استخراجها من مواقع الإنتاج الفعلية لتمكين وكلاء الذكاء الاصطناعي من توليد واجهات مستخدم متسقة مع هوية كل علامة.