ux-skill

لماذا بنيته

تستطيع أدوات البرمجة بالذكاء الاصطناعي أن تبني منتجا كاملا في عصر واحد، وكل ما تبنيه يخرج بالشكل نفسه. التدرج البنفسجي نفسه، والبطاقات الثلاث نفسها، والصورة الجاهزة نفسها في أعلى الصفحة، والخط نفسه. تعرف الصفحة التي بناها الذكاء الاصطناعي من آخر الغرفة.

التصميم مهنتي، وأبني بهذه الأدوات كل يوم. أردتها أن تصمم كما يصمم المصمم: تبدأ من العلامة والموجز، وترفض الأنماط التي تبدو من صنع آلة، وتفحص العمل قبل أن يصل إلى الناس. وأردت العربية والكتابة من اليمين إلى اليسار جزءا من النظام منذ أول token. أغلب الأدوات تؤجلها إلى النهاية وترقعها هناك، وهنا بالضبط تخذل الناس الذين أصمم لهم.

لذلك لا يلصق ux-skill قالبا جاهزا. يبني لغة تصميم للموجز الذي أمامه، من مواصفات علامات حقيقية يعاملها كبيانات تدريب، ومعه مدقق يرفض الرداءة.

أداة البرمجة نفسها، والطلب نفسه. حين يضع ux-skill القيود، لا تعود الصفحة نسخة مكررة.

ما الجديد في 4.0

صدر الإصدار 4.0، الأسس، في 2 تشرين الثاني 2026. تعطيه لون علامة واحدا وموجزا، فيعطيك نظام تصميم كاملا.

• تسعة أسس. اللون، والخط، والمسافات، والتخطيط، وانحناء الزوايا، والحدود، والارتفاع، والحركة، والصور. يبدأ كل أساس من القيم الأولية وينتهي بالأدوار الدلالية، ويخرج بصيغة design tokens وفق W3C وبصيغة CSS.
• خمسة أوضاع في كل دور. فاتح وداكن، وتباين عادي ومرتفع، وكثافة مريحة ومضغوطة، ومن اليسار إلى اليمين ومن اليمين إلى اليسار، وحركة كاملة ومخففة. سمة واحدة في الصفحة تبدل كل وضع منها.
• بوابة WCAG. يقيس ux-skill كل زوج ألوان للنص وعناصر التحكم وحلقة التركيز، في الوضعين الفاتح والداكن، وبالتباين العادي والمرتفع. إذا فشل النظام في الفحص لا يكتبه ux-skill، وتحدد الرسالة ما يجب تغييره.
• العربية من الأساس. في وضع اليمين إلى اليسار ينتقل النص إلى خط عربي بمقياسه وارتفاع سطره الخاصين، وتتحول المسافات إلى خصائص منطقية، وتنعكس الحركة.
• يقرأ النظام الذي تملكه أصلا. أدوات استيراد لـ design tokens وCSS وTailwind وقواعد Markdown ومتغيرات Figma. يخبرك بما ينقص ويضيفه بجانب ملفاتك دون أن يعيد كتابة أي token.
• مكونات وأقسام بعقود. 23 عقدا للمكونات و14 عقدا للأقسام تحدد أي tokens يربطها كل جزء في كل حالة، وكيف يعمل كل قسم على الهاتف.
• مدقق يشغل الصفحة. يفتح الصفحة في متصفح حقيقي بعرض شاشة الكمبيوتر وعرض الهاتف، ويفحص ما يلاحظه الإنسان: حلقات تركيز لا تظهر، وتأثير hover يتأخر في الاستجابة، وحركة تتجاهل إعداد تقليل الحركة.

كيف يعمل

نواة استدلال بلغة Python، ومعها محرك تركيب حتمي بسبعة محاور: الدفء، والتباين، والكثافة، والهندسة، والرسمية، والحركة، وشخصية الخط. يغذيه 12 ملف بيانات منظما: الأنماط، ولوحات الألوان، وأزواج الخطوط، والمكونات، والقطاعات، والرسوم البيانية، وإعدادات الحركة الجاهزة، وقوانين تجربة المستخدم، وقواعد الأنماط الرديئة، وحزم التقنيات، و160 مواصفة علامة حقيقية. المدخلات نفسها تعطي المخرجات نفسها، في كل مرة.

يصل إلى Claude Code وCursor وWindsurf وGitHub Copilot وGemini CLI وCodex و11 أداة أخرى، على شكل أوامر slash ووكلاء فرعيين وخادم MCP. يعمل دون اتصال بالكامل، ولا يستدعي أي نموذج لغوي، ولا يجمع شيئا.

بالأرقام

الإصدار	4.0.0، الأسس، 2 تشرين الثاني 2026
أدوات البرمجة بالذكاء الاصطناعي المدعومة	17
أسس التصميم	9
قواعد فحص الأنماط الرديئة	171
مواصفات علامات حقيقية	160
أدوات MCP	25
أوامر slash	18
عقود المكونات والأقسام	23 و14
لغات ملف README	17
نجوم GitHub في 9 تشرين الثاني 2026	95
الرخصة	MIT، مجاني

الحالة

حي وتستمر صيانته. ثبته بالأمر pip install uxskill، واقرأ الكود على GitHub، وشاهده على uxskill.laithjunaidy.com. وبه بنيت هذا الموقع.

أسئلة شائعة

ما هو ux-skill؟

ux-skill محرك ذكاء تصميمي مجاني ومفتوح المصدر لأدوات البرمجة بالذكاء الاصطناعي، مثل Claude Code وCursor وWindsurf. يبني أنظمة تصميم من لون علامة وموجز، ويفحص الصفحات التي يبنيها الذكاء الاصطناعي بحثا عن الأنماط التي تجعلها تبدو مكررة.

ما الجديد في ux-skill 4.0؟

يبني الإصدار 4.0، الأسس، نظام تصميم كاملا من لون علامة واحد: تسعة أسس، وخمسة أوضاع في كل دور، وبوابة تباين وفق WCAG، ودعم مدمج للعربية والكتابة من اليمين إلى اليسار، وأدوات استيراد للأنظمة الموجودة، وعقود للمكونات والأقسام.

هل يستدعي ux-skill نموذج ذكاء اصطناعي؟

لا. يعمل دون اتصال بالكامل، بمحرك حتمي وبيانات منظمة. لا يستدعي أي نموذج لغوي ولا يجمع أي بيانات استخدام. المدخلات نفسها تعطي المخرجات نفسها دائما.