يعمل التصميم باستخدام الذكاء الاصطناعي بشكل أفضل كحلقة: أنت تصف، ومسودات الذكاء الاصطناعي، وتحكم وتحسن، وتكرر. الذكاء الاصطناعي سريع في إنتاج الخيارات. أنت مسؤول عن اختيار الشخص المناسب.
الخطوة 1: كتابة ملخص. قم بوصف المستخدم والمهمة والمحتوى وأي قيود. "شاشة إعدادات لتطبيق الميزانية، للأشخاص الذين يستخدمون الهواتف، مع أقسام للحساب والإشعارات والخصوصية، باستخدام المكونات الموجودة لدينا" ستعطي نتيجة أفضل بكثير من "إنشاء صفحة إعدادات".
الخطوة 2: إنشاء المسودات تقوم أدوات المطالبة بواجهة المستخدم مثل Google Stitch أو مساعد الذكاء الاصطناعي UXPin بتحويل الوصف أو الرسم إلى شاشات. اطلب عدة متغيرات وقارنها، بدلاً من قبول الخيار الأول.
الخطوة 3: التحسين في أداة التصميم. قم بإحضار أفضل مسودة إلى Figma أو Penpot أو محرر آخر. قم بإصلاح التسلسل الهرمي والتباعد والنسخ وتصميم الحالات التي يتخطىها الذكاء الاصطناعي عادة: التحميل، والفارغ، والخطأ، والتعطيل.
الخطوة 4: الاتصال بالرمز. يمكن لأدوات ترميز الذكاء الاصطناعي مثل Claude Code وCursor إنشاء الواجهة. تكون النتائج أفضل بكثير عندما يتمكنون من قراءة تصميمك من خلال خادم MCP. يحتوي كل من Figma وPenpot على واحد. بالنسبة للأجزاء التفاعلية والرسوم المتحركة، يحتوي ExodeUI، الذي نصنعه، على خادم MCP الذي يتيح للذكاء الاصطناعي إنشاء وتحرير الرسوم المتحركة مع الحالات والفيزياء الربيعية من مطالبات باللغة العادية، المخزنة في ملف .exode مفتوح يقوم تطبيقك بتشغيله.
الخطوة 5: المراجعة قبل الشحن. تحقق من استخدام لوحة المفاتيح وقارئ الشاشة، والتباين، والحركة المنخفضة، والشاشات الصغيرة والكبيرة، والنص الطويل أو المترجم. تعامل مع مخرجات الذكاء الاصطناعي مثل العمل الذي يقوم به زميل سريع ولكن جديد في الفريق: مفيد، ولكن يتم مراجعته دائمًا.