# ux-skill

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

https://laithjunaidy.com/ar/research/ux-skill
بقلم ليث الجنيدي. نُشر في: 2026-06-04. آخر تحديث: 2026-11-09.

- الحالة: الإصدار 4.0.0، الأسس، حي، برخصة MIT
- افتح المشروع: https://uxskill.laithjunaidy.com

ux-skill محرك ذكاء تصميمي مفتوح المصدر يعمل داخل Claude Code و16 أداة برمجة أخرى بالذكاء الاصطناعي، حتى لا تبدو الواجهات التي تبنيها من صنع آلة. يبني الإصدار 4.0، الأسس، نظام تصميم كاملا من لون علامة واحد وموجز، ويفحص كل زوج ألوان وفق WCAG، ولا يكتب إلا ما ينجح في الفحص. العربية والكتابة من اليمين إلى اليسار جزء منه من الأساس. يعمل دون اتصال، ولا يستدعي أي نموذج لغوي، ومجاني برخصة MIT. بناه ويصونه ليث الجنيدي في عمّان.

---

## لماذا بنيته

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

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

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

![صفحة هبوط من ux-skill: صورة حقيقية لموقع بناء تحت طبقة داكنة، وعنوان بأسلوب صحفي، ونموذج لطلب عرض سعر في أعلى الصفحة](https://laithjunaidy.com/research/ux-skill/before-after.jpg)

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

## ما الجديد في 4.0

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

![موقع ux-skill: لون علامة واحد يدخل، ونظام تصميم يخرج](https://laithjunaidy.com/research/ux-skill/cover.jpg)

- **تسعة أسس.** اللون، والخط، والمسافات، والتخطيط، وانحناء الزوايا، والحدود، والارتفاع، والحركة، والصور. يبدأ كل أساس من القيم الأولية وينتهي بالأدوار الدلالية، ويخرج بصيغة 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. يعمل دون اتصال بالكامل، ولا يستدعي أي نموذج لغوي، ولا يجمع شيئا.

![ux-skill على GitHub](https://laithjunaidy.com/research/ux-skill/github.jpg)

## بالأرقام

<table>
<tbody>
<tr><th scope="row">الإصدار</th><td>4.0.0، الأسس، 2 تشرين الثاني 2026</td></tr>
<tr><th scope="row">أدوات البرمجة بالذكاء الاصطناعي المدعومة</th><td>17</td></tr>
<tr><th scope="row">أسس التصميم</th><td>9</td></tr>
<tr><th scope="row">قواعد فحص الأنماط الرديئة</th><td>171</td></tr>
<tr><th scope="row">مواصفات علامات حقيقية</th><td>160</td></tr>
<tr><th scope="row">أدوات MCP</th><td>25</td></tr>
<tr><th scope="row">أوامر slash</th><td>18</td></tr>
<tr><th scope="row">عقود المكونات والأقسام</th><td>23 و14</td></tr>
<tr><th scope="row">لغات ملف README</th><td>17</td></tr>
<tr><th scope="row">نجوم GitHub في 9 تشرين الثاني 2026</th><td>95</td></tr>
<tr><th scope="row">الرخصة</th><td>MIT، مجاني</td></tr>
</tbody>
</table>

## الحالة

حي وتستمر صيانته. ثبته بالأمر `pip install uxskill`، واقرأ الكود على [GitHub](https://github.com/Laith0003/ux-skill)، وشاهده على [uxskill.laithjunaidy.com](https://uxskill.laithjunaidy.com). وبه بنيت هذا الموقع.

## أسئلة شائعة

### ما هو ux-skill؟

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

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

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

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

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