أفضل الممارسات

​

أفضل ممارسات كتابة الأوامر

​

1. إتقان هندسة الأوامر للحصول على نتائج أفضل:

• الوضوح والإسهاب: الأوامر الواضحة والمفصلة تؤدي إلى نتائج فائقة. كن محددًا، واذكر الصفحات الدقيقة (مثل /dashboard) والسلوكيات المتوقعة. استخدم لغة طبيعية لطلباتك، مثل

أريد أن يتمكن المستخدمون الذين لديهم دور "مستثمر" من الوصول إلى هذا المكون، ولكن ليس المسؤولون.

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

لا تقم بتعديل /shared/Layout.tsx.

• التكرار للحفظ: قد تكون ذاكرة الذكاء الاصطناعي محدودة، لذا كرر التعليمات المهمة عبر الأوامر إذا لزم الأمر.
• تقسيم المهام المعقدة: تجنب محاولة تنفيذ أشياء متعددة في وقت واحد. قسّم عملك إلى أجزاء أصغر قابلة للاختبار. استخدم وضع المناقشة (Discuss Mode) بين كل خطوة للتحقق قبل المتابعة. يتضمن القالب المفيد لتقسيم الميزات ما يلي:

إنشاء الصفحة الجديدة، إضافة تخطيط واجهة المستخدم، ربط البيانات، إضافة المنطق + الحالات الخاصة، الاختبار لكل دور.

• تعليمات خاصة بالأدوار: إذا كان تطبيقك يدعم أدوار مستخدمين متعددة، حدد دائمًا الدور الذي ينطبق عليه الأمر. يساعد هذا في منع الأخطاء الناتجة عن المنطق أو المكونات المشتركة. على سبيل المثال:

بصفتي مستثمرًا، أريد عرض لوحة تحكم الشركة، ولكن لا ينبغي أن أكون قادرًا على تعديلها. يرجى عزل هذه الميزة لدور المستثمر فقط.

​

2. استخدم وضع المناقشة (Discuss Mode) بشكل متكرر

• متى تستخدمه: انتقل إلى وضع المناقشة بعد 2-3 محاولات فاشلة لـ “محاولة الإصلاح”، عند تصحيح أخطاء المنطق المعقد أو مشكلات قاعدة البيانات، أو عند التخطيط لميزات جديدة. يمكنك أن تطلب منه

"اقترح 3 طرق لتنفيذ X".

• توصية بسير العمل: يجد بعض المستخدمين أنه من الفعال قضاء 60-70% من وقتهم في وضع المناقشة، والنقر على “تنفيذ الخطة” فقط بعد الرضا التام. يعزز هذا النهج اتساق المخرجات ويمنع التعديلات غير المقصودة.
• التفاعل المتحكم فيه: لتجنب تنفيذ الكود غير المرغوب فيه، استخدم أوامر مثل “تحقق ولكن لا تكتب كودًا بعد” أو “اقترح 3 طرق لحل هذا دون تغيير أي شيء”. هذا يبقي السيطرة في يديك.
• الخروج من حلقات الذكاء الاصطناعي: إذا دخل الذكاء الاصطناعي في “حلقة” من ترقيع الكود المعطل، فانتقل إلى وضع المناقشة، والصق لقطة شاشة للخطأ، واكتب الأمر:

"يرجى التحقق من هذا دون تعطيل الميزات الأخرى. إذا لزم الأمر، ارجع إلى آخر إصدار يعمل وقم بالإصلاح من هناك".

​

3. إعادة المزج (Remix) كحل أخير.

• ماذا تفعل إعادة المزج (Remixing): تنشئ إعادة المزج نسخة نظيفة من مشروعك عند T=0. يمكنك بعد ذلك إعادة البناء بأوامر محسنة ومعرفة أوضح، باستخدام مشروعك القديم كمرجع فقط.
• متى تقوم بإعادة المزج: يكون هذا مفيدًا إذا كنت عالقًا في حلقة مليئة بالأخطاء، أو ترغب في البدء من جديد بشكل نظيف مع الحفاظ على السجل، أو تحتاج إلى فصل خدمة قاعدة بيانات مثل Supabase وتجربة نهج جديد.

​

4. تحلَّ بالصبر والهدوء

• القاعدة الذهبية: خذ وقتك في كتابة الأوامر، وأعد فحص كل شيء، وقسّم العمل إلى كتل صغيرة قابلة للاختبار. ترتبط الدقة في مدخلاتك ارتباطًا مباشرًا بجودة مخرجاتك.

​

5. نصائح إضافية لتحسين سير العمل

• نمط “أنا محبط…”: استخدم نمط الأمر “أنا محبط…” لمساعدة الذكاء الاصطناعي على التركيز بشكل أفضل.
• فحوصات ما بعد التعديل: بعد أي تعديل كبير، أعد دائمًا فحص الأدوار المتعددة وسلوكياتها، خاصة بالنسبة للمنطق الشرطي.
• الإصدارات الاحتياطية: قم بتخزين الإصدارات المستقرة كنسخ احتياطية لتصحيح الأخطاء بسرعة.
• مكونات خاصة بالأدوار: لتجنب الأخطاء الناتجة عن المنطق العام جدًا، اطلب من الذكاء الاصطناعي

"إنشاء مكون مخصص لـ [الدور X] وعدم إعادة استخدام المكونات المشتركة ما لم يتم تحديد نطاقها بوضوح".

​

مكتبة الأوامر – استراتيجيات وأمثلة

1. بدء المشاريع

• متى تستخدمها: في بداية المشروع لمساعدة الذكاء الاصطناعي على فهم المتطلبات عالية المستوى وبناء الأساس. تعمل كملخص أولي لمشروعك.
• كيفية استخدامها: حدد نوع التطبيق، والتقنيات الرئيسية (الواجهة الأمامية، الواجهة الخلفية، الخدمات)، والميزات الأساسية. وجه الذكاء الاصطناعي إلى أين يبدأ، عادةً الصفحة الرئيسية أو ميزة حاسمة.

"أحتاج إلى تطبيق لإدارة المهام بالمواصفات التالية: - حزمة التقنيات: واجهة أمامية Next.js، و Tailwind CSS للتصميم، و Supabase للمصادقة وقاعدة البيانات. - الميزات الأساسية: إنشاء المشاريع والمهام، وتعيين المهام للمستخدمين، وتذكيرات بمواعيد الاستحقاق، ونظرة عامة على لوحة التحكم. ابدأ ببناء صفحة لوحة التحكم الرئيسية، التي تحتوي على: - ترويسة مع شريط تنقل، - قائمة بالمشاريع وحالتها، - وزر لإنشاء مشروع جديد. قدم بيانات وهمية في الوقت الحالي، وتأكد من أن التصميم نظيف ومتجاوب".

2. تحسينات تصميم واجهة المستخدم/تجربة المستخدم

• متى تستخدمها: لصقل المظهر المرئي لتطبيقك دون تغيير وظائفه. يشمل ذلك تحسين واجهة المستخدم، أو تعديل التخطيطات، أو تنفيذ نمط تصميم معين.
• كيفية استخدامها: حدد بوضوح نطاق تغييرات التصميم وأكد على أن الوظائف يجب أن تظل كما هي. وجه الذكاء الاصطناعي بشأن الجمالية المرغوبة (مثل، حديث، بسيط). عالج التغييرات المتعددة واحدًا تلو الآخر واذكر أي أجزاء من واجهة المستخدم لا ينبغي تغيير منطقها.

"يجب تحسين واجهة مستخدم التطبيق، دون تغيير أي وظيفة. - حافظ على كل المنطق الحالي وإدارة الحالة كما هي. - تحسينات بصرية: قم بتحديث تصميم صفحة لوحة التحكم: استخدم تصميم بطاقة حديث لكل قائمة مشروع، وحسّن نظام الألوان لتباين أفضل، وزد الحشوة لتخطيط أنظف. - تأكد من أن هذه التغييرات لا تعطل أي وظيفة أو تدفق بيانات. الهدف: تحسينات تجميلية بحتة لمظهر أكثر صقلاً، مع بقاء سلوك التطبيق كما كان من قبل.

3. ضمان الاستجابة

• متى تستخدمها: عندما يحتاج تطبيقك إلى تكييف تخطيطه عبر أحجام الشاشات المختلفة (الجوال، الجهاز اللوحي، سطح المكتب). مثالية كخطوة أخيرة في المهام التي تركز على واجهة المستخدم.
• كيفية استخدامها: أكد على نهج “الجوال أولاً” وأصدر تعليمات للذكاء الاصطناعي لضمان الاستجابة عبر نقاط التوقف القياسية. اذكر إرشادات إطار عمل CSS محددة (مثل نقاط توقف sm, md, lg, xl في Tailwind) واطلب تجنب العروض الثابتة.

"يجب أن يكون تطبيقنا متجاوبًا بالكامل عبر الجوال والجهاز اللوحي وسطح المكتب. - اتبع استراتيجية "الجوال أولاً": أعط الأولوية للتخطيط للشاشات الصغيرة، ثم قم بالتعديل للشاشات الأكبر. - استخدم أفضل ممارسات واجهة المستخدم/تجربة المستخدم الحديثة للتصميم المتجاوب. (بالنسبة لـ Tailwind CSS، استخدم نقاط التوقف القياسية sm, md, lg, xl – لا تستخدم نقاط توقف مخصصة إلا عند الضرورة.) - تأكد من أن كل صفحة (خاصة لوحة التحكم وصفحات تفاصيل المشروع) تتدفق بشكل صحيح على شاشة صغيرة: يجب أن تتكدس العناصر أو يتغير حجمها حسب الحاجة، ويجب أن يظل النص قابلاً للقراءة، وألا يفيض أي محتوى خارج الشاشة. - لا تغير التصميم الأساسي أو الوظائف، فقط تأكد من أنه يتكيف بمرونة مع أحجام الشاشات المختلفة. بعد إجراء التغييرات، يرجى إعادة فحص التخطيط بأبعاد iPhone 12 وعرض سطح مكتب نموذجي.

4. إعادة هيكلة الكود

• متى تستخدمها: بشكل دوري، خاصة عندما يصبح الكود فوضويًا أو بطيئًا. تعمل إعادة الهيكلة على تحسين بنية الكود أو قابليته للقراءة أو أدائه دون تغيير سلوكه الخارجي.
• كيفية استخدامها: حدد النطاق (ملف، ميزة، أو قاعدة الكود). بالنسبة لملفات محددة، اكتب الأمر: “أعد هيكلة هذا الملف للوضوح والكفاءة، ولكن لا تغير وظائفه أو مخرجاته”. حدد مجالات التركيز مثل تقليل التكرار أو تبسيط المنطق. بالنسبة لعمليات إعادة الهيكلة الأكبر، اطلب من الذكاء الاصطناعي التخطيط على خطوات أو مراجعة الكود أولاً.

"أعد هيكلة ملف مكون ProjectList، ولكن حافظ على سلوكه وواجهة المستخدم كما هي تمامًا. الأهداف: - تحسين بنية الكود وقابليته للقراءة (تبسيط الوظائف المعقدة، وتقسيمها إلى وظائف أصغر إذا لزم الأمر). - إزالة أي متغيرات أو استيرادات غير مستخدمة. - التأكد من أن الملف يتبع أفضل الممارسات وموثق جيدًا. لا تقدم أي ميزات جديدة أو تغير كيفية عمل المكون للمستخدم – هذا مجرد تنظيف للكود من أجل الصيانة. إذا كان أي جزء من الكود غير واضح، أضف تعليقًا موجزًا للتوضيح.

5. أنواع التطبيقات وميزاتها

متجر إلكتروني: قائمة المنتجات، البحث، التصفية، عربة التسوق، الدفع، حسابات المستخدمين.

نظام إدارة المحتوى (CMS): لوحة تحكم المسؤول، إنشاء/تعديل/نشر المحتوى، نص منسق، تحميل الصور، تحسين محركات البحث (SEO).

إدارة المشاريع: لوحات المهام، القوائم، البطاقات، التعيين، مواعيد الاستحقاق، السحب والإفلات.

موجز وسائل التواصل الاجتماعي: المنشورات، التعليقات، الإعجابات، المشاركة، ملفات تعريف المستخدمين، الإشعارات، التمرير اللانهائي.

لوحة تحكم التحليلات: أنواع مختلفة من المخططات، تصفية البيانات، اختيار نطاق التاريخ، تقارير قابلة للتصدير.

بداية تطبيق SaaS: مصادقة المستخدم، إدارة الاشتراكات، الإعدادات، لوحة التحكم، الوصول القائم على الأدوار.

واجهة دردشة بالذكاء الاصطناعي: سجل المحادثات، مؤشرات الكتابة، تسلسل الرسائل، التغذية الراجعة.

أداة توليد المحتوى بالذكاء الاصطناعي: توليد محتوى بناءً على المدخلات، خيارات التحسين، الحفظ، التصدير.

مكون التوصيات: بناءً على سلوك/تفضيلات المستخدم، التغذية الراجعة، شرح التوصيات.

نظام التخصيص: واجهة مستخدم قابلة للتخصيص، توصيات المحتوى، تحكم المستخدم في التخصيص.

6. التخطيط الاستراتيجي مع الذكاء الاصطناعي

• متى تستخدمها: قبل البدء في تنفيذ معقد متعدد الخطوات، أو عندما يكون لديك ميزة كبيرة تحتاج إلى تقسيم. تتيح لك أوامر التخطيط تحديد نهج قبل كتابة الكود، مما يوفر الأرصدة ويمنع التوجيه الخاطئ.
• كيفية استخدامها: اطلب من الذكاء الاصطناعي خطة أو قائمة تحقق. على سبيل المثال، “حدد خطة خطوة بخطوة لـ X” أو “قبل البرمجة، اذكر الخطوات التي ستتخذها لتنفيذ Y”. من الأفضل القيام بذلك في وضع المناقشة لتجنب تنفيذ الكود.

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