معيار الجودة البصرية لأيّ منتج Lovable
قائمة تحقّق دقيقة تفصل التصاميم التي تبدو «مولّدة» عن تصاميم تبدو من فريق منتج محترف.
اللون: توكن واحد، استعمال هادئ
التصاميم التي تفشل هي التي تستخدم لونًا بارزًا في كلّ مكان — كل زر، كل عنوان، كل أيقونة. التصاميم الاحترافية تُبقي 95% من الشاشة محايدًا وتستخدم اللون البارز في نقطة القرار فقط (CTA رئيسي، حالة نشطة، رابط داخل نصّ).
الطباعة: تباعد أحرف ضيّق للعناوين، سطر مريح للنصّ
العناوين الكبيرة تحتاج tracking سالبًا (بين -0.01 و -0.03) وسطرًا مضغوطًا (leading 1.05–1.15). النصوص الطويلة تحتاج leading أوسع (1.7–1.9 للعربية) وطول سطر أقصر (44–72 حرفًا) للقراءة المريحة.
الظلال: قرّبها من الصفر
الظلال القوية علامة مميّزة للتصميم المولّد. استبدلها بحدود ناعمة (1px بلون --border)، وبمسافات كافية بين الكتل. عندما تحتاج فعلًا لظلّ، اجعله 0 1px 2px مع 4% opacity، لا أكثر.
المسافات: نظام واضح، وسخاء عمودي
التزم بمقاسات من مجموعة 4/8/12/16/24/32/48/64. المسافة العمودية بين الأقسام يجب أن تكون أكبر بكثير ممّا تظنّ (64px+ على الديسكتوب). الازدحام أوّل انطباع بالرداءة.
الحركة: 200ms و ease-out
الحركات الجيّدة قصيرة وحاسمة. تجنّب bounce وspring المبالغة. المدخل fade+translate 8px خلال 200ms، والخروج opacity فقط. أزل أيّ حركة تدور بلا سبب.
- إعداد نظام توكنز تصميم كاملتوكنز OKLCH موحّدة للألوان والمسافات والحواف والحركة.
- هيرو تحريري لصفحة هبوطهيرو مقسّم 8/4 بدون تدرّجات، بأسلوب Stripe/Linear.
- تدقيق RTL شاملمراجعة كل الواجهات لدعم العربية بشكل صحيح.
هل كان هذا المحتوى مفيداً؟
استلم أحدث الأدلّة والبرومبتات كل أسبوع
خلاصة عربية أسبوعية عن Lovable وVibe Coding — بلا سبام، إلغاء متى شئت.