تصميم · 6 دقائق قراءة · نُشر 2026-07-01
بناء نظام تصميم احترافي داخل Lovable
من الألوان إلى المكوّنات، خطوات مضمونة لتفادي مظهر الـ AI Generic ولإعطاء منتجك هويّة أصيلة.
شارك الصفحة:
الأخطاء الشائعة: خطّ Inter افتراضي، تدرّج بنفسجي على أبيض، ظلال ثقيلة، glassmorphism بلا سبب. النتيجة: كل التطبيقات تبدو متشابهة.
القواعد
1. ألوان بـ OKLCH كتوكنز في `styles.css`، ولا تكتب `bg-white` أبدًا. 2. خطّ مميّز — اختر خطًّا يعكس شخصيّة منتجك. 3. ظلال هادئة — استعن بالحدود والمسافات بدلًا من ظلال ضخمة. 4. حركة محدودة — ≤40px، ≤700ms، fade/slide فقط. 5. موبايل أوّلًا — صمّم من 375px واصعد.
راجع دليل نظام التصميم للتفاصيل الكاملة.
هل كان هذا المحتوى مفيداً؟
النشرة الأسبوعية
استلم أحدث الأدلّة والبرومبتات كل أسبوع
خلاصة عربية أسبوعية عن Lovable وVibe Coding — بلا سبام، إلغاء متى شئت.