توليد الواجهات بالـ AI ونقدها

الحقيقة اللي محدش بيقولها

أدوات توليد الواجهات بقت مبهرة: تكتب وصف وتاخد شاشة كاملة شكلها احترافي. والمفاجأة؟ ده خلّى عين المصمم أغلى مش أرخص. لما الكل يقدر يولّد شاشة "حلوة"، القيمة بقت في اللي يعرف ليه الشاشة دي مش صح: الهرمية الغلط، الـ flow الناقص، الحالة المنسية.

الدرس ده مش عن الأدوات — عن سير العمل اللي بيخليك مصمم بيستخدم أدوات، مش مشغّل أدوات.

خريطة الأدوات (مين بيعمل إيه)

• Google Stitch — وصف أو سكتش ← تصميم شاشات نظيف، بيتصدّر لـ Figma. مجاني، وأسرع نقطة بداية
• v0 — وصف ← كومبوننت React/Tailwind حقيقي بكود نظيف. لما المخرج المطلوب كود مش صورة
• Figma AI / Make — التوليد جوه بيئة شغلك الأساسية وبأصول ملفك
• Lovable وBolt — مش شاشة واحدة: تطبيق كامل بصفحاته (دول موضوع درس الـ vibe coding الجاي)
• Motiff — توليد واعي بنظام تصميمك: بيعيد استخدام كومبوننتاتك انت

سير العمل: ولّد ← انقد ← وجّه ← كرر

المرحلة ١: التوليد الواسع

ابدأ بـبرومبت بالطبقات الخمسة واطلب تنوع مقصود: "٣ اتجاهات مختلفة فعلاً: واحد minimal، واحد جريء، واحد كثيف بالمعلومات". الهدف في المرحلة دي استكشاف الفضاء مش إيجاد الإجابة.

المرحلة ٢: النقد المنهجي (قلب الدرس)

قدام كل شاشة متولدة، شغّل الشيك ليست دي — هي عينك المدربة على شكل أسئلة:

1. الهرمية: فين أول مكان بتقع عليه العين؟ هو ده فعلاً أهم عنصر في الشاشة؟
2. الـ flow: الشاشة دي جاية منين ورايحة فين؟ المولدات بتصمم شاشات معزولة — التدفق مسؤوليتك
3. الحالات الناقصة: فين الـ empty state؟ الـ loading؟ الخطأ؟ النص الطويل اللي بيكسر التخطيط؟ (المولدات دايماً بتنسى دول)
4. الواقعية: البيانات المعروضة منطقية ولا lorem مقنّع؟ "أحمد محمد — ٩٩٩ رسالة" مش بيانات حقيقية
5. العربي: لو منتجك عربي — هل التوليد فهم الـ RTL فعلاً ولا قلب النص وخلاص؟ (راجع درس الواجهات العربية)
6. القابلية للتنفيذ: الكومبوننتس دي موجودة في نظام تصميمكم ولا الشاشة بتخترع لغة جديدة؟

المرحلة ٣: التوجيه الجراحي

بعد النقد، وجّه بتعديلات محددة — واحدة واحدة، بمفردات تصميم دقيقة. "ارفع تباين الـ CTA الرئيسي وقلل الـ secondary لـ ghost button" مش "خليها أوضح".

المرحلة ٤: الخروج من الأداة

المولّد بيوصلك ٧٠٪. الـ ٣٠٪ الباقية — الضبط على الجريد، توحيد المسافات مع نظامك، الحالات، والـ micro-interactions — دي شغلك في Figma أو في الكود. اللي بيسلّم الـ ٧٠٪ كأنها ١٠٠٪ بيتكشف من أول مراجعة جادة.

إمتى التوليد يكسب وإمتى يخسر؟

يكسب في: الاستكشاف السريع لاتجاهات، شاشات الـ MVP الأولى، الـ mockups لعروض البيع، كسر الصفحة البيضا لما تكون متقفل.

يخسر في: الأنظمة المعقدة بقواعد عمل كتير، التصميم جوه design system صارم موجود، أي حاجة محتاجة فهم عميق لسياق المستخدم — هناك التوليد بيديك سطح لامع فوق فهم غلط.

التطبيق

خد شاشة من تطبيق بتستخدمه يومياً. اكتب برومبت يوصفها لـStitch وولّدها. وبعدين حط المتولدة جنب الأصلية واعمل نقد مكتوب بالنقاط الستة: فين المولّد قصّر؟ وإيه القرارات اللي في الأصلية وفهمت دلوقتي ليه اتاخدت؟ التمرين ده بيعلمك التصميم من الاتجاهين.