أنماط UI/UX جاهزة
بلوكات جاهزة لأكثر الشاشات تكرارًا: onboarding، dashboard، auth، empty، error.
Onboarding من ثلاث خطوات
الخطوة 1: مرحبًا + سؤال «ما هدفك؟» (يخصّص الباقي). الخطوة 2: إعداد أساسيّ (اسم فريق/مشروع). الخطوة 3: أوّل عمل حقيقي (لا شاشة «هيّا نبدأ» فارغة). احفظ التقدّم بعد كل خطوة.
Dashboard احترافي
شبكة widgets ثابتة أفضل من drag-and-drop في 90% من الحالات. رأس يحتوي: تحيّة، مؤشّر التقدّم الأهم، زر الإجراء الرئيسي. الأرقام كبيرة، السياق صغير تحتها.
شاشات المصادقة
استخدم بطاقة واحدة وسطية، بعرض 360–420px، على خلفية هادئة. زر Google أعلى النموذج (لا أسفله). لا تطلب الاسم في التسجيل — اطلبه لاحقًا في onboarding.
الحالات الفارغة
لكل قائمة قابلة للفراغ، حالة فارغة بأربعة عناصر: أيقونة/رسمة صغيرة، سطر «ماذا يعني هذا»، سطر «كيف تبدأ»، زر إجراء رئيسي. لا رسائل «لا توجد بيانات» مجرّدة.
شاشات الخطأ
لا تكتب error.message للمستخدم النهائي أبدًا. صنّف: خطأ شبكة (اقترح إعادة المحاولة)، خطأ صلاحيات (اقترح تسجيل الخروج/الدخول)، خطأ داخلي (سجّله وأعرض رسالة عامّة + رقم مرجع).
- حالات فارغة مقنعةبديل عن الشاشات الفارغة يشجّع أوّل إجراء.
- هيرو تحريري لصفحة هبوطهيرو مقسّم 8/4 بدون تدرّجات، بأسلوب Stripe/Linear.
هل كان هذا المحتوى مفيداً؟
استلم أحدث الأدلّة والبرومبتات كل أسبوع
خلاصة عربية أسبوعية عن Lovable وVibe Coding — بلا سبام، إلغاء متى شئت.