بناء نظام تصميم

لماذا نظام، لا صفحات

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

التصميم الجيد ليس تراكماً لصفحات جميلة، بل نظام متماسك: مجموعة صغيرة من القرارات (الألوان، الخطوط، المسافات، الاستدارات، الظلال) تُتخذ مرة واحدة وتُعاد في كل مكان. للتماسك أثر نفسي قابل للقياس: إنه يوحي بالثقة. يشعر المستخدم — دون أن يستطيع التعبير عنه — بأن المنتج المتماسك منتج مُعتنى به، وبالتالي موثوق. ولتطبيق تأمل يطلب اشتراكاً، هذه الثقة هي حرفياً مال.

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

الـdesign tokens: قواعد لغة واجهتك

عملياً، يبدأ نظام التصميم بـdesign tokens: متغيرات مسمّاة تحمل كل قرار بصري. فبدل كتابة #4A7C6F في أربعين موضعاً، تعرّف --color-primary: #4A7C6F مرة واحدة وتُحيل إلى المتغير في كل مكان. ويوم يريد العميل أخضر أعمق، تغيّر سطراً واحداً فتتبعه الواجهة كلها.

تغطي الـtokens عادة خمس عائلات: الألوان، والخطوط (العائلات، الأحجام، السماكات، ارتفاعات الأسطر)، والمسافات، واستدارات الحواف، والظلال. في CSS، يتسع كل هذا في كتلة :root من نحو خمسين سطراً. هذه الكتلة هي ما ستطلب من الذكاء الاصطناعي توليده — ثم ستعيد حقنها في كل موجّه من موجّهات المشروع.

:root {
  /* الألوان — أدوار، لا درجات */
  --color-primary: #4A7C6F;      /* أخضر ميرمية: الإجراءات الرئيسية */
  --color-primary-hover: #3D685D;
  --color-accent: #E8A87C;       /* خوخي ناعم: إبرازات موضعية */
  --color-surface: #FAF8F5;      /* خلفية كريمية دافئة */
  --color-surface-raised: #FFFFFF;
  --color-text: #2D3A36;         /* تباين 11.2:1 على surface */
  --color-text-muted: #5C6B66;   /* تباين 5.1:1 — يجتاز AA */
  --color-success: #4A7C5F;
  --color-error: #B5544D;

  /* الخطوط — سلّم 1.25 (الثالثة الكبرى) */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --leading-tight: 1.2;
  --leading-body: 1.6;

  /* المسافات — أساس 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* الاستدارات والظلال */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 2px 12px rgba(45, 58, 54, 0.06);
  --shadow-raised: 0 8px 28px rgba(45, 58, 54, 0.10);
}

الألوان: أدوار، لا درجات

لاحظ كيف سُمّيت tokens الألوان أعلاه: primary وsurface وtext-muted — أدوار وظيفية، وليست درجات لونية أبداً (--vert-1، --beige). الفارق جوهري. الدور يصف الاستخدام: «لون الإجراءات الرئيسية»، «خلفية البطاقات المرتفعة». إذا غيّرت اللوحة، تبقى الأسماء صالحة. والأهم: الذكاء الاصطناعي يفهم الأدوار: «استخدم --color-accent فقط للإبرازات الموضعية» تعليمة سيحترمها شاشة بعد شاشة.

في التركيب، تبقى القاعدة التجريبية 60-30-10 ضابطاً ممتازاً: نحو 60% من الشاشة بلون السطح (surface)، و30% بألوان النص والبنية، و10% فقط للون التمييز (accent). هذا التوازن هو ما يجعل لون التمييز مؤثراً — فاللون المستخدم في كل مكان لم يعد يميّز شيئاً. النتيجة «الاصطناعية العامة» تُشبع الشاشة بالألوان غالباً؛ أما نظامك فيفرض ضبط النفس.

أنشئ نظام تصميم لتطبيق تأمل، أجواء هادئة وفاخرة (الموجز: سخاء المساحة، نعومة الألوان، حدّة الخطوط):
- 8 ألوان بأدوار وظيفية (primary، primary-hover، accent، surface، surface-raised، text، text-muted، error) كمتغيرات CSS
- تباينات متاحة: AA كحد أدنى لكل النصوص، مع ذكر النسبة لكل تركيبة نص/خلفية
- سلّم خطوط بنسبة 1.25، من small إلى h1، مع ارتفاعات الأسطر
- سلّم مسافات بأساس 4px (من 4 إلى 96)
- 3 استدارات حواف وظلّان خفيفان
قدّم كل شيء في كتلة :root { } CSS مع تعليقات، ثم اشرح في 3 جمل خياراتك اللونية.

التباين والإتاحة: غير قابلة للتفاوض

لنتحدث عن الموضوع الذي تُنسيه «الجمالية» في كثير من الأحيان: الإتاحة (accessibility). يُقاس التباين بين النص وخلفيته بنسبة تمتد من 1:1 (غير مرئي) إلى 21:1 (أسود على أبيض). تحدد معايير WCAG عتبتين: AA تتطلب 4.5:1 للنص العادي (و3:1 للعناوين الكبيرة)، وAAA ترفعها إلى 7:1. AA هي حدّك الأدنى المطلق — ليست هدفاً، بل أرضية.

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

الخطوط: سلّم، لا أحجام عشوائية

تحمل الخطوط وحدها نصف الانطباع «الفاخر». قراران يبنيان كل شيء: اختيار العائلات (واحدة للعناوين، وواحدة للنص العادي — نادراً أكثر من اثنتين) وسلّم الأحجام. فبدل اختيار كل حجم بالإحساس، تُشتق كل الأحجام من نسبة ثابتة: كل مستوى أكبر بـ1.25 مرة من سابقه مثلاً. تخلق هذه النسبة تناغماً رياضياً تدركه العين دون أن تفهمه — تماماً كالفواصل الموسيقية.

نسبة معتدلة (1.2 – 1.25) تعطي تسلسلاً هرمياً ناعماً يناسب الواجهات الكثيفة؛ ونسبة قوية (1.333 – 1.5) تصنع عناوين مهيبة، مثالية لصفحة هبوط يجب أن تفرض قسم الـhero حضوره فيها. لـSereno، نسبة 1.25 مع خط serif أنيق للعناوين (دفء، إنسانية) وsans-serif محايد للنص (مقروئية) تترجم «الهدوء الفاخر» جيداً. ولا تنسَ ارتفاعات الأسطر: 1.5 إلى 1.6 لنص المتن، وأضيق (1.1 – 1.2) للعناوين الكبيرة، وإلا بدت طافية.

المسافات: الإيقاع الخفي

المسافة هي المعامل الأكثر خفاءً والأكثر حسماً في أي واجهة. الصفحة «التي تتنفس» والصفحة «المكدّسة» تستخدمان غالباً المكوّنات نفسها — المسافات وحدها هي ما يختلف. المبدأ: سلّم ثابت بأساس 4px (4، 8، 12، 16، 24، 32، 48، 64، 96) لا نخرج عنه أبداً. لا هامش بـ17px ولا بـ23px: كل مسافة مضاعف مختار من السلّم.

هذا القيد يُنتج الإيقاع الرأسي: انتظام الفواصل يخلق شبكة خفية تريح العين. وهو يستثمر أيضاً قانون التقارب: العناصر المتقاربة تُدرَك كمترابطة، والمتباعدة كمنفصلة. لذا يجب أن يكون العنوان أقرب إلى الفقرة التي يقدّمها منه إلى القسم الذي يختمه — قاعدة بسيطة، تنتهكها نصف صفحات الويب. وأخيراً، كن سخياً بين الأقسام: 96px من الفراغ على الشاشات الكبيرة ليست فراغاً، بل علامة ترقيم. العمومية تكدّس؛ والفخامة تتنفس.

من الـtoken إلى الشاشات: إحياء النظام

بعد تحديد الـtokens، يتبع النظام منطق الريّ: الـtokens تغذّي المكوّنات (الأزرار، البطاقات، حقول النماذج)، والمكوّنات تركّب الشاشات. عند كل توليد جديد، اطلب من الذكاء الاصطناعي صراحةً إعادة استخدام المتغيرات الموجودة بدل اختراع قيم: «استخدم حصرياً الـtokens المقدَّمة؛ وإذا لم تغطِّ حاجةً ما، فاقترح token جديداً بدل قيمة صلبة (hard-coded)».

flowchart TD
  T["الـtokens: ألوان + خطوط + مسافات"] --> CP["المكوّنات: أزرار، بطاقات، نماذج"]
  CP --> E1["صفحة الهبوط"]
  CP --> E2["صفحة الأسعار"]
  CP --> E3["الشاشات التالية"]

هذه التعليمة الأخيرة — اقتراح token بدل قيمة صلبة — ثمينة: فهي تجعل نظامك ينمو بشكل مضبوط. مع تقدم المشروع، سترى حاجات لم تغطّها النسخة الأولى (لون حدود، مسافة وسيطة). كل إضافة تمرّ عبرك، وتُسمّى، وتُوثَّق، وتنضم إلى الملف المرجعي. يبقى النظام مصدر الحقيقة الوحيد.