تعلم كيفية صياغة المطالبات للحصول على واجهة مستخدم متناسقة في تطبيقات React باستخدام رموز التصميم وقواعد المكونات بحيث تتطابق الشاشات المولّدة بالذكاء الاصطناعي في المسافات والطباعة والنماذج.
يظهر عدم اتساق الواجهة عادة في تفاصيل صغيرة تشعر بأنها خاطئة أثناء التنقل. صفحة واحدة لها حشوة واسعة، وأخرى تبدو مكتظة. تتغير أحجام العناوين، تتغير أشكال الأزرار وألوانها، ويتصرف نفس الحقل بشكل مختلف حسب الشاشة.
غالباً ما يأتي الانجراف من بضعة أساسيات:
هذا شائع عندما تُولّد الشاشات من مطالبات منفصلة. كل مطالبة بمثابة بداية جديدة، فيملأ النموذج القرارات المفقودة بالتخمين. حتى "استخدم تنسيق عصري" يترك مئات الخيارات الصغيرة: فجوة 8px أم 12px، نص جسم 14px أم 16px، موعد عرض الأخطاء، كيف يبدو زر أساسي.
يمكنك تنظيف صفحتين أو ثلاث يدوياً، لكن هذا لا يتوسع. تنتهي بملاحقة تعديلات CSS لمرة واحدة، ونسخ أنماط بين الملفات، وإصلاح النماذج مراراً. القواعد في رأسك، ليست في المشروع.
تخيّل أنك تولّد شاشة تسجيل الدخول اليوم وشاشة الملف غداً. إذا عرضت إحداهما الأخطاء فقط عند الإرسال والأخرى عند فقدان التركيز، يلاحظ المستخدمون. إذا تغير ارتفاع الزر الأساسي بين الشاشات، يشعر التطبيق أنه مجمّع جزئياً.
يصبح الاتساق هو الوضع الافتراضي عندما تتبع كل شاشة نفس النظام المشترك: رموز التصميم (المسافات، الطباعة، الألوان) بالإضافة إلى مجموعة صغيرة من قواعد المكونات والنماذج.
رموز التصميم هي قيم مسماة بسيطة تعيد استخدامها عبر الواجهة. بدلاً من طلب "حشوة مريحة" في كل شاشة، تستخدم رمزاً مثل space-4. بدلاً من "قليل الانحناء" تستخدم radius-md. يظل الاسم ثابتاً حتى لو غيرت ما يشير إليه لاحقاً.
الرموز هي مجموعة القرارات التي تريد أن تشاركها كل شاشة. تزيل الذوق والتخمين، وهذا بالضبط ما يسبب الانجراف عندما تولّد أو تبني صفحات جديدة.
تشمل الرموز النموذجية المسافات، الطباعة، الألوان، الشكل، وكمية صغيرة من الارتفاع الظلي. الفائدة عملية: العنوان يستخدم دائماً نفس الحجم، البطاقة دائماً تستخدم نفس الحشوة، والزر الأساسي يحتفظ بنفس اللون ونصف القطر.
رمز الأشياء التي تؤثر على الإحساس العام عبر المنتج: مقياس المسافات، أحجام الخطوط وارتفاعاتها، الألوان الأساسية (النص، الخلفية، الأساسي، الخطر، الحدود)، ومجموعة صغيرة من أنصاف الأقطار.
احتفظ بالخيارات التي يقودها المحتوى مرنة، مثل طول النص، أي أيقونة تُستخدم، أو ما إذا كانت الحاجة لعرض قسم به بطاقتين أو ثلاث.
عند توليد الشاشات (بما في ذلك باستخدام أدوات مثل Koder.ai)، يقلل إعطاء مجموعة رموز صغيرة مقدماً من مقدار التخمين ويجعل النتيجة أكثر اتساقاً بشكل ملحوظ.
مجموعة الرموز ليست إلا قائمة قصيرة من القيم المسموح بها. الأصغر أفضل لأنها تترك مجالاً أقل للاختيارات العشوائية، لكنها لا تزال تحتاج لتغطية الأساسيات التي تجعل الشاشات تبدو خاطئة.
ابدأ بالمسافات. اختر مقياساً واحداً واستخدمه في كل مكان للحشوة، الفجوات، والتخطيط. مجموعة مثل 4، 8، 12، 16، 24، 32 تغطي معظم واجهات المستخدم. إذا طالب التصميم بقيمة 10px أو 18px، قرّبها إلى أقرب رمز بدلاً من إدخال أرقام جديدة.
ثم عرّف افتراضات الطباعة حتى تتوقف العناوين ونص الجسم عن الانجراف. لا تحتاج إلى نظام طباعة ضخم. تحتاج لخطوات واضحة وقابلة للتكرار.
مجموعة مدمجة تبقى قابلة للاستخدام دون التضخيم:
تنتمي إمكانية الوصول أيضاً إلى النظام. عرّف نمط خط تركيز (اللون، السماكة، الإزاحة) حتى يحصل مستخدمو لوحة المفاتيح على حالات تركيز متسقة. حدّد حد أدنى لهدف النقر (مثل 44x44) للهواتف. قِصّر ألوان النص إلى مجموعة صغيرة وموثوقة للحفاظ على تباين متوقع.
إذا بدت الأزرار أحياناً مكتظة، فغالباً لأن شاشة استخدمت حشوة 10 وشاشة أخرى استخدمت 12. مع الرموز، يمكنك قول: “الأزرار تستخدم paddingY=8, paddingX=16, radius=12, نمط تركيز الرموز، الحد الأدنى للارتفاع 44.” عندما تُثبّت هذه الأرقام، يتوقف المولّد عن الارتجال.
الرموز تحدد الأرقام. قواعد المكونات تحدد العادات.
اختر مجموعة صغيرة من المكونات الأساسية واجعلها كلبنات البناء الوحيدة للشاشات. اجعلها مملة وقابلة لإعادة الاستخدام: Button، Input، Select، Checkbox، Card. يمكنك إضافة TextArea و Modal، لكن يجب أن تتبع نفس النظام (تسميات، تباعد، حالات).
بعد ذلك، حدِّد المتغيرات وعرّف متى يُسمح بها. على سبيل المثال: Button له primary، secondary، و danger. يكون primary للإجراء الرئيسي في الشاشة (عادة واحد). secondary للإلغاء أو الإجراءات منخفضة الأولوية. danger فقط للإجراءات التدميرية كالحذف. إن لم يكن المتغير مبرراً، افترِض secondary.
قواعد التباعد تمنع الانجراف البسيط. عرّف الافتراضات داخل المكونات: حشوة الأزرار، ارتفاع الحقول، الفجوة بين التسمية والحقل، الفجوة القياسية بين الحقول المكدسة. أضف بعض قواعد التخطيط أيضاً: البطاقات لها حشوة داخلية ثابتة وتباعد عنوان/محتوى متسق؛ النوافذ المنبثقة (Modals) تستخدم نفس خطوات العرض ومحاذاة تذييل ثابتة.
أخيراً، اجعل الحالات غير قابلة للتفاوض لأن هنا تبدأ الواجهات غالباً أن تبدو عشوائية:
عندما تولّد شاشة ثقيلة بالنماذج مثل "إنشاء مشروع"، تمنع هذه القواعد أحجام الأزرار المختلطة، تغيّر مواضع التسميات، أو "بطاقة خاصة" تظهر في صفحة واحدة فقط.
حتى مع مظهر ثابت، تأتي الكثير من شكاوى "هذا غريب" من سلوك النماذج. إذا تعاملت كل شاشة مع التسميات، الأخطاء، والتركيز بشكل مختلف، يشعر المستخدمون بعدم الاتساق.
اختر نمط نموذج واحد واستخدمه في كل مكان: تسمية، مؤشر اختياري/إلزامي، نص مساعدة، ثم نص خطأ. احتفظ بصياغة موحدة أيضاً (مثلاً، تسميات بحالة الجملة، نص مساعدة قصير، ورسائل خطأ تبدأ بفعل).
القواعد التي تمنع معظم الانجراف:
ثبّت الحجم والتخطيط حتى لا تتنفس الشاشات بشكل مختلف. حدّد ارتفاع إدخال واحد، ارتفاع زر واحد، وعرض حقل افتراضي. على سطح المكتب، محاذاة الحقول لشبكة ثابتة وتكديس التسميات فوق الحقول. على المحمول، اجعل الحقول بعرض كامل وتجنب النماذج ذات العمودين ما لم تكن ضرورية فعلاً.
مثال بسيط: شاشة "إنشاء مشروع" قد تحتوي على Name، Region، و Description. حتى لو كان Region قائمة اختيار، عاملها مثل أي حقل آخر: نفس الارتفاع، نفس موقع التسمية، ونفس سطر الخطأ. إذا أرسل المستخدم النموذج واسم المشروع فارغ، ينتقل التركيز إلى Name، يظهر الخطأ تحتها، ويظل التخطيط ثابتاً.
إذا ولّدت الشاشات في Koder.ai، ضع هذه قواعد النماذج في مطالبتك مرة وأعد استخدامها عبر الميزات حتى يتصرف كل نموذج جديد بنفس الطريقة دون الحاجة لتنظيف متكرر.
عامل مطالبتك كعقد صغير لواجهة المستخدم. اجعلها قصيرة، محددة، وقابلة لإعادة الاستخدام حتى تلتصق كل شاشة بنفس المسافات، الطباعة، المكونات، والسلوكيات.
نمط عملي هو لصق مواصفة واجهة مدمجة في أعلى الطلب، ثم وصف الشاشة بلغة بسيطة.
UI SPEC (apply to every screen)
Tokens:
- Spacing: 4, 8, 12, 16, 24, 32
- Radius: 8
- Typography: H1 24/32, H2 18/26, Body 14/20
- Colors: text, muted, bg, primary, danger (no custom hex)
Components (must use): PageShell, Section, Card, Button, Input, Select, TextArea, FormRow, HelperText, Toast
Layout rules:
- Page padding: 24 desktop, 16 mobile
- Section spacing: 24
- Card padding: 16
- Grid: 12 cols desktop, 4 cols mobile, gap 16
Do:
- Reuse components and tokens only
- Keep labels above inputs, helper text below
Do not:
- Invent new spacing values, font sizes, or one-off CSS
- Mix different button heights or input styles
If a new component is needed:
- Extend an existing component pattern and document it in the output
- Do not create new visual styles outside tokens
بعد المواصفة، أضف بعض اختبارات القبول التي تكتشف الانجراف مبكراً:
إذا كنت تستخدم مولداً مبنياً على الدردشة، حافظ على هذه المواصفة ثابتة عبر الطلبات. تغييرها في كل مرة يفسد الغرض.
اكتب عقد واجهة المستخدم قبل توليد أي شيء: مجموعة رموز صغيرة (المسافات، الطباعة، الألوان، نصف القطر، الظلال) بالإضافة إلى جرد مكونات قصير (Button، Input، Select، Card، Modal، Table، Toast). إذا كانت رمز أو مكون مفقود، سيخترع النموذج واحداً وستنحرف واجهتك.
ثم أنشئ شاشة مرجعية واحدة تختبر القواعد. صفحة ثقيلة بالنماذج تكون اختبار ضغط جيد لأنها تشمل رؤوس، نص مساعدة، أخطاء التحقق، أزرار أولية وثانوية، وإشعار نجاح. اعتبر تلك الشاشة كأساس.
من هناك، ابنِ شاشات جديدة بتجميع ما عرّفته فعلاً. لا تطلب "تنسيق جديد". اطلب نفس Card، نفس مقياس المسافات، نفس خطوات الطباعة، ونفس نمط الحقول.
سير عمل بسيط:
إذا انتهت شاشة "بحث المستخدمين" بمسافات أضيق من المرجعية، لا تصلح الهوامش يدوياً. حدّث رموز المسافات أو قاعدة حشوة Card مرة واحدة، ثم أعد التوليد.
إذا كنت تعمل في Koder.ai، تساعد اللقطات والتراجع هنا: قفل أساس، التجريب بأمان، والتراجع بسرعة إن بدأ تغيير جديد يسبب انحرافاً.
أسرع طريق لفقدان الاتساق هو اعتبار الرموز والقواعد كاقتراحات. الاستثناءات الصغيرة تتكاثر عبر الشاشات الجديدة.
فخ شائع هو تغيير مقياس المسافات منتصف المشروع. الشاشات المبكرة تستخدم 8، 16، 24. شاشة جديدة تُدخل 10 و18 "لأنها تبدو مناسبة". الآن سُمِح بالانجراف، ولا تُحدَّث الشاشات القديمة.
مصدر انجراف آخر هو ترك المولد يخترع أنماط مكونات جديدة. إذا لم تقل "فقط هذه المتغيرات للأزرار موجودة"، قد ينشئ نصف قطر جديد أو حشوة إدخال مختلفة لشاشة واحدة.
الحالات أيضاً أخطاء متكررة. حالات التحميل، الفارغة، والأخطاء غالباً ما تغير التباعد والسلوك. إذا أضفتها في النهاية، تحصل عادة على أنماط متسرعة لا تتطابق مع الباقي.
أيضاً راقب نوعية العمومية الخاطئة: "اجعله عصرياً بظلال ناعمة" غامض، بينما قواعد السلوك مثل "الأخطاء تظهر تحت الحقل"، "الأزرار المعطلة تحتفظ بأنماط التركيز"، و "Enter يرسل فقط في الحقل الأخير" أكثر تحديداً وقابلة للتكرار.
إذا أردت كتلة إرشادية خفيفة تلصقها في المطالبات، اجعلها قصيرة:
قبل دمج شاشة مولّدة، قم بمسح سريع لمدة دقيقتين.
ابدأ بالمسافات. ابحث عن قيم عشوائية مثل 13px أو هوامش لمرة واحدة أضيفت "فقط لتناسب". إذا كنت تستخدم رموزاً، يجب أن تأتي كل فجوة من المجموعة المعتمدة، بما في ذلك جوانب الشبكة، حشوة البطاقات، والتباعد بين حقول النماذج.
ثم افحص الطباعة مقابل مقياس الخط. يجب أن تتدرج العناوين بشكل متوقع. لا ينبغي أن يبدّل نص الجسم حجمه بين أقسام مماثلة. ارتفاع السطر مهم أيضاً، خاصة في الشاشات المكدسة مثل صفحات الإعدادات.
افحص الأزرار بعد ذلك. يجب أن تتبع المتغيرات والأحجام قواعدك: primary للإجراء الرئيسي، secondary للإجراءات الأقل أهمية، danger فقط عند الحذف فعلاً. ارتفاع الزر، موضع الأيقونة، ونمط النص يجب أن تتطابق.
بالنسبة للنماذج، الاتساق يتعلق بالبنية. تبقى التسميات في مكان واحد، مؤشرات الإلزام تتبع قاعدة واحدة، نص المساعدة والأخطاء لا يتنافسان، والأخطاء تظهر في موقع ثابت.
قائمة فحص قصيرة:
أخيراً، قم بمرور سريع على المحمول. قلص العرض وتأكد أن التخطيط يتكيف دون اختراع أحجام خط أو مسافات جديدة.
تخيل تدفق تهيئة بسيط: ثلاث شاشات (Profile، Preferences، Confirm)، بالإضافة إلى صفحة إعدادات لاحقاً. تريد أن تبدو كل شاشة وكأنها خرجت من نفس المصمم، حتى لو ولّدت في جلسات منفصلة.
قبل توليد أي شيء، قدم مجموعة رموز صغيرة وقواعد مكونات قليلة:
TOKENS
- spacing: xs=4, sm=8, md=12, lg=16, xl=24
- radius: sm=8, md=12
- type: body=14/20, title=20/28, label=12/16
- layout: pageMax=960, sectionGap=24, fieldGap=12
COMPONENT RULES
- Page: max width=pageMax, padding=xl, sectionGap between blocks
- Card: padding=lg, radius=md
- Field: label above, helper below, fieldGap between fields
- Button row: primary on right, gap=sm
- Errors: shown under field, same copy style, no alerts
الآن ولّد "Profile" و "Preferences" بشكل منفصل. لأن كلا الشاشتين يجب أن تستخدم Page, Card, Field, و Button row كما عُرّفت، تأتي بنفس الهوامش، تباعد التسميات، ومكان الأزرار. خطوة Confirm تظل مناسبة، حتى لو كانت تحتوي على نص قابل للقراءة أكثر.
سلوك النماذج هو المكان الذي يتسلل منه الانجراف غالباً، لذا حدّده مرة وأعد استخدامه: الإرسال معطل حتى يصبح صالحاً، الأخطاء الداخلية تظهر فقط بعد فقدان التركيز أو الإرسال، Enter يرسل فقط في الخطوة الأخيرة، وزر Back لا يمسح القيم المدخلة سابقاً.
عند الحاجة لمكوّن واجهة جديد، لا تسمح للنموذج بالارتجال. أضف قاعدة واحدة، ثم أعد التوليد مع مراعاة إعادة الاستخدام:
حوّل الرموز والقواعد إلى مواصفة قابلة لإعادة الاستخدام تستخدمها فعلياً. إذا كانت طويلة جداً لتلصقها، فلن تُتّبع.
مواصفة عملية عادة تشمل: جدول الرموز (المسافات، الطباعة، أنصاف الأقطار، الألوان)، مجموعة قواعد مكونات قصيرة (الأزرار، المدخلات، البطاقات، العناوين)، قواعد سلوك النماذج (توقيت التحقق، الأخطاء، التعطيل/التحميل)، إعدادات التخطيط (حشوة الصفحة، العرض الأقصى، تباعد الأقسام)، وقائمة قصيرة "لا تفعل هذا" (هوامش عشوائية، أحجام خطوط مؤقتة).
ثم اجعل عادة واحدة: حدّث المواصفة أولاً، لا البكسل الفردي.
إذا كنت تستخدم Koder.ai (koder.ai)، وضع التخطيط مفيد لإعادة تصفية المواصفة قبل التوليد. عندما تريد تجربة بدائل، تساعد اللقطات والتراجع على الاستكشاف دون فقدان أساس مستقر.
لأن كل طلب إنشاء شاشة يبدأ من الصفر. إذا لم تقدم نظاماً مشتركاً، يملأ المولد التفاصيل الناقصة بتخمينات—المسافات، أحجام الخطوط، حشوة الأزرار، الظلال، وسلوك النماذج—فتتجمع الاختلافات الصغيرة عبر الصفحات.
رموز التصميم هي قيم مسماة قابلة لإعادة الاستخدام لأشياء مثل المسافات، أحجام الخطوط، الألوان ونصف قطر الزوايا.
بدلاً من قول "حشوة مريحة" تستخدم شيئاً مثل space-md. يبقى الاسم ثابتاً وتعيد كل شاشة استخدام نفس القرار، فتتوقف الواجهات عن الانجراف.
ابدأ صغيراً وغطِّ فقط ما يسبب الانجراف المرئي:
إذا احتجت قيمة "جديدة"، قرّبها إلى أقرب رمز بدل اختراع 10px أو 18px.
ضع كتلة مواصفات واجهة صغيرة في أعلى كل طلب واعتبرها عقداً:
ثم صفّ الشاشة أسفله. المفتاح هو الحفاظ على المواصفة ثابتة عبر الشاشات.
الرموز تحدد الأرقام؛ قواعد المكونات تحدد العادات. قواعد مفيدة تشمل:
القاعدة الافتراضية: إذا لم تبرر المتغير، عد إلى المتغير القياسي.
اختر نمطاً واحداً ولا تكسره:
هذا يتجنب التناقض الشائع: شاشة تتحقق عند فقدان التركيز وأخرى فقط عند الإرسال.
حدد بعض قواعد الحالة غير القابلة للتفاوض:
إذا لم تحدد حالات، سيخترع كل شاشة نمطها الخاص.
لا تدعها تُبدع مظهراً جديداً. أضفها كتمديد موثَّق لنمط موجود:
إن لم تستطع وصفه بالرموز، فهو غالباً مخصص جداً وسيسبب انحرافاً.
أنشئ شاشة "مرجعية" واحدة تُجرب النظام (صفحة كثيفة بالنماذج تعمل جيداً)، ثم أعد استخدام نفس المواصفة لكل شاشة جديدة.
في Koder.ai، استخدم وضع التخطيط لتكرار المواصفة قبل الإنشاء، واستفد من اللقطات والتراجع للحفاظ على قاعدة مستقرة أثناء التجريب.
مراجعة سريعة قبل قبول الشاشة:
إن كان شيء غير صحيح، حدّث المواصفة/الرموز وأعِد التوليد—لا تُصلِح الهوامش لمرة واحدة.