أدخلت أربعة موجزات، فخرج ديزاين سيستم واحد

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

يوم 25 أيلول 2026 كان الإصدار 4.0 قريبا. كان المحرك يبني أنظمة، وكل نظام ينجح في فحوصات التباين الـ324 كلها. التباين هو الفحص الذي يتأكد من وضوح النص على خلفيته. العروض حتى ذلك اليوم كانت صغيرة: المحرك يعمل على بطاقة واحدة. بطاقة واحدة لا تثبت شيئا عن البراند.

لذلك طلبت تجربته على مواقع حقيقية قبل أن أكمل. هذه التجربة في برومبت يمكنك استخدامه مع أداتك:

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

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

ما الذي خرج متشابها؟

كل شيء تقريبا.

قست الأنظمة الأربعة التي يبنيها ذلك الإصدار:

حصلت عيادة من تجاوزوا 60 على نص بحجم 16px نفسه الذي حصلت عليه أداة المهندسين. وحصل المطعم المرح على خط تطبيق المدفوعات. استخدم كل نظام خطا واحدا للعناوين والمتن. وكان أزرق الرسائل المعلوماتية اللون نفسه في الأربعة.

المشكلة كانت أسوأ مما يظهره الجدول:

• قرأ الموجز ثم تجاهله. طبع المحرك أنه لم يتعرف على «كثير منهم فوق 60»، وتجاهلها، ثم قال إن لا شيء يحتاج إلى عمل.
• الخطوط كانت أسماء فقط. سمى كل نظام خطا دون أن يوفر طريقة لتحميله، فعادت الصفحة الحقيقية إلى أي خط موجود على الجهاز. لهذا تشترك الصفحات الأربع أعلاه في خط واحد.
• تغير لون البراند. تحول برتقالي المطعم، #E85D04، إلى #BB4900 على الزر حتى ينجح النص الأبيض في فحص التباين. النص الداكن على البرتقالي الأصلي كان سينجح أيضا.

نجحت الأنظمة الأربعة في كل فحوصات التباين. كانت الفحوصات تسأل إن كان كل نظام صحيحا. لم يسأل أي منها إن كان نظامان مختلفين.

ما الحل الخطأ؟

الحل السريع جدول. المطعم يعني زوايا دائرية وخطا ودودا. العيادة تعني نصا كبيرا. أداة المطورين تعني زوايا حادة ولونا داكنا.

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

عرضت علي قائمة النتائج. كان قراري سطرا واحدا:

كل الملاحظات صحيحة. أصلحه بذكاء دون قواعد ثابتة.

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

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

كيف تختبر «الاختلاف»؟

«اجعلها مختلفة» ليست شيئا يمكن للأداة أن تنجح أو تفشل فيه. أما الرقم فيمكن اختباره.

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

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

دخل العمل على طابع الأنظمة في اليوم نفسه: 44 تغييرا بين 09:22 و16:31. واحتاج باقي الإصدار 4.0 خمسة أسابيع أخرى.

كيف تبدو الأربعة الآن؟

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

ما زال اثنان يشتركان في نص 16px وزوايا 2px: أداة قواعد البيانات وتطبيق المدفوعات. يختلفان في الخط واللون والتخطيط، لذلك تبلغ المسافة بينهما 0.46 وليست صفرا.

المسافات الست، فوق الحد الأدنى 0.20:

ما زال شيء واحد غير صحيح. زر المطعم لونه #CA5000 في 4.0.0. هو أقرب إلى لون البراند #E85D04 من لون أيلول #BB4900، لكنه ما زال مختلفا عن برتقالي البراند.

الصفحات الأربع جيدة. لا واحدة منها تجعلك تتوقف لتتأملها، وقبلت ذلك لهذا الإصدار: سميت 4.0 باسم Foundations لأنه يضع الأساس. كان للمحرك 3,315 اختبارا صباح التجربة. وصدر 4.0.0 ومعه 13,059.

هل صدر حين قلت إنه صدر؟

لم يصدر، وكان النوع نفسه من الفحص سيكشف ذلك.

وضعت وسم إصدار 4.0.0 يوم 2 تشرين الثاني. يوم 11 تشرين الثاني نظرت إلى ما يحصل عليه شخص لا يعرف المشروع حين يثبته. كان سجل الحزم العام، المكان الذي ينزل منه أمر التثبيت، ما زال يقدم 3.2.0 المنشور يوم 23 أيلول. ملاحظات الإصدار تقول 4.0. والتثبيت يقول 3.2. بقي الأمر كذلك عشرة أيام، حتى رفعت 4.0.0 يوم 12 تشرين الثاني.

إنه فشل أيلول نفسه. فحصت جانبي: الكود والوسم والملاحظات. لم أفحص ما يصل إلى الشخص. صار هذا الفحص جزءا من كل إصدار:

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

إن كنت تبني أداة تولد أشياء

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

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

ux-skill مجاني ومفتوح المصدر. في صفحة المشروع التفاصيل ورابط الكود.