كيف أصمم واجهات تطبيق بالذكاء الاصطناعي

بقلم فريق كيف؟

آخر تحديث: 25 أكتوبر 2026 · سياسة التحرير

v0 يرسم شاشة واحدة ثم تقرأ الكود قبل أن تلصقه في مشروعك

مثال: نموذج تواصل عربي لصفحة معرض

معرض أعمالك يحتاج خانة للاسم، وخانة للرسالة، وزر إرسال. الاتجاه من اليمين، والعنوان واضح على الجوال.

1. ارسم الخانات على ورقة: الاسم، الرسالة، الزر. اكتب ماذا يحدث بعد الضغط بجملة واحدة.
2. افتح v0 من زر هذه الصفحة وتأكد من النطاق. صف الشاشة بالعربية واذكر أن الاتجاه من اليمين.
3. انظر إلى المعاينة على عرض ضيق. إن خرج العنوان عن الحافة فاطلب تعديل هذا فقط.
4. اقرأ المكوّن الذي وُلد. احذف أي نص إنجليزي ثابت لم تطلبه إن كان يربك الزائر.
5. انسخ الناتج إلى مشروع تملكه وجرّب الكتابة في الخانات. المعاينة داخل الأداة لا تغني عن هذه التجربة.
6. لا تضف لوحة تحكم وسلة في الطلب نفسه. الشاشة التالية لها وصف مستقل.

إن أعجبك اللون وضاعت وظيفة الزر فاللون مؤجّل. أصلِح السلوك ثم عد إلى الشكل.

الواجهة ليست سلوك الخادم

لا تطلب عشرة شاشات في جملة

تطبيق كامل أو تصميم يدوي

• كيف أحول فكرتي إلى منتج رقمي

  بطاقة Lovable حين تنتقل من شاشة واحدة إلى مسار فيه أكثر من صفحة وتريد تعديل الناتج بالحوار.

• كيف أصمم واجهات المواقع والتطبيقات

  بطاقة فيغما لرسم الواجهة وتجربة الترتيب مع فريق قبل كتابة أي مكوّن.

• كيف أبرمج تطبيق React أونلاين

  بطاقة CodeSandbox لتشغيل واجهة React في المتصفح وتعديلها بيدك بعد أن حصلت على مسودة.

• افصل الشكل عن المطلوب
• أدوات الذكاء الاصطناعي