أداة ai-design-check بقواعدها الـ70 تخفض 266 ملاحظة تصميمية على لوحة معلومات إلى الصفر

كثيرًا ما تُعرف الواجهات التي يرسمها وكلاء الذكاء الاصطناعي للبرمجة من النظرة الأولى: أزرار متدرجة اللون، ورموز تعبيرية بدلًا من الأيقونات، وتحية «Welcome back, Alex! 👋»، وأحجام خطوط عشوائية. أطلق فريق Enmera Software أداة ai-design-check المفتوحة المصدر، وهي تكتشف هذه المواضع وتصلحها وتؤكد النتيجة بفحص ثانٍ. وبحسب المطورين، انخفض عدد الملاحظات على لوحة المعلومات التجريبية من 266 إلى 0.

تُشغَّل الأداة بأمر واحد: `npx @enmera/ai-design-check`. ولا تعتمد الحزمة على أي تبعيات.

مم تتكون المجموعة

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

الجزء الثاني هو الفاحص نفسه. يعمل دون ذكاء اصطناعي ودون مفتاح API، فهو فحص حتمي (deterministic) يضع علامة على كل مخالفة. ومن الأمثلة الواردة في الإعلان:

• مسافات لا تنسجم مع شبكة 4 px؛
• أحجام خطوط خارج المقياس المحدد؛
• أزرار بتدرج لوني؛
• رموز تعبيرية تؤدي دور الأيقونات؛
• عنوان من نوع «Welcome back, Alex! 👋»؛
• حلقة تركيز (focus ring) أُزيلت دون أن يلاحظ أحد، ما يعطّل التنقل بلوحة المفاتيح.

الجزء الثالث مهارة (skill) للوكلاء. تعدّل الشاشة على عدة جولات وتعيد تشغيل الفاحص بعد كل جولة. يُثبَّت للعمل مع Claude Code وCursor وCodex بالأمر `npx skills add enmerasoftware/ai-design-check`، وبعدها يكفي أن تكتب للوكيل «fix the design of this screen». أما الجزء الرابع فيولّد فيديو «قبل/بعد» بأمر واحد، وهكذا صُنع المقطع المرفق بالإعلان.

يعلن المطورون دعم React وNext.js وVue وSvelte وBlade وHTML العادي.

من أين جاءت القواعد

قبل الإطلاق قارن المطورون قواعدهم بـ16 لوحة معلومات حظيت بتقييم مرتفع على Dribbble وBehance. وتحوّل القاسم المشترك بين أفضل هذه الأعمال إلى فحوص:

• تُقرأ بطاقات المؤشرات بالترتيب «التسمية ← القيمة ← التغيّر»؛
• تعتمد جميع البطاقات قالب عنوان واحدًا؛
• يُسلَّط الضوء في الرسم البياني على سلسلة بيانات واحدة؛
• الأزرار مسطحة؛
• تُفصل الأسطح بالخلفية لا بالظلال الثقيلة.

وثمة ملاحظة طريفة: نحو نصف الأعمال الشائعة يبدأ بسطر «Welcome back 👋». ومع ذلك أبقى المطورون القاعدة المضادة لهذا السطر. وحجتهم أن العنوان أثمن سطر في شاشة يفتحها المستخدم كل يوم، وإنفاقه على تحية إسراف.

ما ينبغي أخذه في الحسبان

رقم «266 → 0» يعكس الامتثال لمجموعة القواعد على لوحة معلومات واحدة، وهي تجريبية فوق ذلك. وهو لا يثبت أن الواجهة صارت أفضل بمعيار موضوعي، ولا يتضمن الإعلان اختبارات مستقلة على مشاريع أخرى. وعيّنة الـ16 مرجعًا صغيرة، وتتألف من أعمال منصات عرض الأعمال، وكثيرًا ما تُحسَّن هذه الأعمال لتبدو الصورة جميلة لا لتناسب العمل اليومي مع المنتج. كما جاءت القواعد مقيِّدة من حيث الذوق: قد ترغب بعض الفرق في التدرجات اللونية أو في مقاييس خطوط مختلفة، وسيتعين عندها ضبط المجموعة.

ومع ذلك فالنهج معقول: الفاحص الحتمي رخيص ويمكن إعادة إنتاج نتائجه، ويحصل الوكيل على هدف قابل للقياس بدلًا من طلب فضفاض مثل «اجعلها أجمل». وللفرق التي تكتب واجهاتها بشكل متزايد باستخدام Claude Code أو Cursor أو Codex، هذه طريقة سريعة لفرض حد أدنى من الانضباط في التنسيق. يمكن تجربة الأداة على شاشتك في دقيقة، ثم تقرر أي القواعد الـ70 تبقيها.