30 طلبًا لـ vibe coding يمكنك نسخها (ورقة مرجعية)

أفضل طلبات vibe coding قصيرة ومحددة وتدور حول السلوك: من يستخدم التطبيق، وماذا يستطيع أن يفعل، وما الذي يحتفظ به، وكيف يبدو. فيما يلي 30 طلبًا يمكنك نسخها ولصقها، مرتبة حسب المرحلة التي تمر بها، من البناء الأول إلى النشر. استبدل الأجزاء التي بين [أقواس] بتفاصيلك.

تعمل في أي منشئ تطبيقات بالذكاء الاصطناعي أو وكيل برمجة. وإن أردت المنطق وراءها فدليلنا الأطول كيف تكتب طلبات لمنشئات التطبيقات بالذكاء الاصطناعي يشرح المبادئ. أما هذه الصفحة فهي الورقة المرجعية.

كيف تستخدم هذه الورقة

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

طلبات البناء الأول

تحدد هذه شكل التطبيق. يسمّي كل منها المستخدمين والإجراءات والبيانات والمظهر.

1. متتبّع بسيط

ابنِ لي متتبّع [عادات]. أستطيع إضافة [عادة] باسم ولون، وتعليمها مرة في اليوم، ورؤية شبكة 30 يومًا وتتابعي الحالي. احفظ كل شيء ليبقى بعد التحديث. تصميم نظيف وبسيط يعمل على الهاتف.

2. صفحة حجز لعمل صغير

ابنِ صفحة حجز لـ[صالون الحلاقة] الخاص بي. يختار الزبائن خدمة ([قص 30 دقيقة، صبغة 90 دقيقة]) وتاريخًا وموعدًا شاغرًا بين [9:00 و18:00]، ثم يدخلون الاسم والهاتف والبريد. لا يستطيع شخصان حجز الموعد نفسه. أحتاج صفحة إدارة خاصة خلف تسجيل دخول تسرد الحجوزات القادمة حسب اليوم.

3. أداة داخلية

ابنِ أداة داخلية لفريقي لمتابعة [إعارة المعدات]. لكل قطعة اسم ورمز وحالة (متاحة، معارة، معطلة). يسجّل الموظفون الدخول ويستطيعون استعارة قطعة لأنفسهم وإرجاعها. اعرض جدولًا بمرشحات حسب الحالة وسجلًا بمن حمل كل قطعة.

4. صفحة هبوط مع قائمة انتظار

ابنِ موقعًا من صفحة واحدة لـ[منتجي: تطبيق تخطيط وجبات للآباء المشغولين]. قسم رئيسي بعنوان وعنوان فرعي من جملة واحدة وتسجيل بالبريد الإلكتروني. ثم ثلاث مزايا وقسم "كيف يعمل" مختصر وأسئلة شائعة. احفظ بريد المسجلين في قاعدة بيانات واعرض لي القائمة في صفحة إدارة خاصة.

5. بوابة عملاء

ابنِ بوابة عملاء لـ[استوديو التصميم] الخاص بي. يسجّل كل عميل الدخول ويرى مشاريعه فقط، بحالتها والملفات التي رفعتها وسلسلة تعليقات. أسجّل الدخول كمسؤول وأرى كل العملاء. يجب ألا يرى العملاء بيانات بعضهم أبدًا.

6. حاسبة أو أداة عروض أسعار

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

طلبات التخطيط

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

7. خطط قبل أن تبني

قبل أن تكتب أي كود، صف بكلمات بسيطة الشاشات التي ستبنيها والبيانات التي ستخزّنها وأي قرارات تحتاجها مني. انتظر موافقتي.

8. حوّل فكرة مشوشة إلى نسخة أولى

هذه فكرتي: [الصق الملاحظات]. اقترح أصغر نسخة أولى ما تزال مفيدة، في 5 إلى 8 نقاط. اذكر ما ستؤجله ولماذا.

9. اسأل عما ينقص

ما الأسئلة التي سيطرحها مطوّر عليّ قبل بناء هذا؟ اسألها واحدًا بعد الآخر، ثم لخّص إجاباتي في مواصفة قصيرة.

10. افحص تغييرًا كبيرًا أولًا

أريد إضافة [حسابات فرق يشترك فيها عدة أشخاص في مساحة عمل واحدة]. اشرح ما الذي يجب أن يتغير في البيانات والشاشات والصلاحيات، وما الذي قد ينكسر. لا تغيّر شيئًا بعد.

طلبات التصميم

11. حدد أسلوبًا واضحًا

أعد تنسيق التطبيق: خلفية بيضاء دافئة، نص داكن، لون مميز واحد [#1F6F50]، زوايا مستديرة، مسافات سخية، وخط حديث بلا زوائد. أبقِ التخطيط وكل الميزات كما هي تمامًا.

12. قلّد إحساس مرجع

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

13. أصلح تخطيط الهاتف

على هاتف بعرض 375 بكسل، الجدول في [صفحة الطلبات] يتمرر جانبيًا والأزرار تتداخل. حوّل كل صف إلى بطاقة مكدّسة على الشاشات الصغيرة. لا تغيّر تخطيط سطح المكتب.

14. حالات الفراغ والتحميل والخطأ

أضف حالات سليمة إلى [قائمة المشاريع]: حالة فراغ ودودة بزر لإضافة أول مشروع، وهيكل تحميل أثناء جلب البيانات، ورسالة واضحة بزر إعادة محاولة إن فشل التحميل.

15. دعم اليمين إلى اليسار

أضف نسخة عربية من الواجهة بتخطيط كامل من اليمين إلى اليسار. تنقلب الأيقونات التي تشير إلى اتجاه؛ وتستخدم الأرقام والتواريخ تنسيق اللغة. أبقِ الإنجليزية افتراضية.

طلبات البيانات والميزات

16. اجعل البيانات تبقى

الآن تختفي بياناتي عند التحديث. خزّنها في قاعدة بيانات حقيقية بدل ذلك، وأبقِ الشاشات الحالية تعمل بالطريقة نفسها.

17. أضف تسجيل الدخول

أضف تسجيل حساب وتسجيل دخول بالبريد وكلمة المرور. يجب أن يرى كل مستخدم [إدخالاته] ويعدّلها هو فقط. أظهر بريد المستخدم في الشريط العلوي مع زر تسجيل خروج.

18. أضف الأدوار

أضف دورين: مسؤول وعضو. يستطيع المسؤولون إضافة [المنتجات] وتعديلها وحذفها؛ ويستطيع الأعضاء عرضها فقط. طبّق ذلك في الخادم، لا بإخفاء الأزرار فقط.

19. أضف البحث والمرشحات

أضف مربع بحث فوق [قائمة جهات الاتصال] يطابق الاسم أو الشركة أو البريد وأنا أكتب، مع مرشح لـ[الحالة]. أبقِ ترتيب الفرز الحالي.

20. أضف رفع الملفات

اسمح للمستخدمين بإرفاق حتى [5] صور بكل [إعلان]، بحد أقصى [5 ميغابايت] للصورة. اعرض صورًا مصغرة في الإعلان وعرضًا أكبر عند النقر. صاحبه وحده يستطيع حذف صوره.

21. استيراد من جدول بيانات

أضف زر استيراد يقبل ملف CSV بالأعمدة [الاسم، البريد، الهاتف، ملاحظات]، ويعرض معاينة لأول 10 صفوف ويدعني أؤكد قبل الحفظ. تجاوز الصفوف التي بلا بريد وأخبرني كم صفًا تجاوزت.

طلبات الإصلاح

22. أبلغ عن خلل بوضوح

عندما [أنقر حفظ في نموذج التعديل] أرى "[نص الخطأ بالضبط]" ولا يُحفظ التغيير. المتوقع: يُحفظ التغيير وأعود إلى القائمة. اعرف السبب، اشرحه في جملة أو جملتين، ثم أصلحه.

23. اكسر حلقة الإصلاح

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

24. تراجع عن الآثار الجانبية

أصلح تغييرك الأخير منتقي التاريخ لكن [الشريط الجانبي] اختفى. أعد الشريط الجانبي كما كان تمامًا وأبقِ إصلاح منتقي التاريخ.

25. اشرح قبل أن تغيّر

اشرح كيف يُحسب [إجمالي الدفع] الآن خطوة بخطوة، مشيرًا إلى الملفات المعنية. لا تغيّر شيئًا.

طلبات الاختبار والمراجعة

26. الحالات الحدية

اذكر 10 طرق قد يكسر بها مستخدم حقيقي [نموذج الحجز]: حقول فارغة، نص طويل جدًا، نقرات مزدوجة، شخصان في اللحظة نفسها، مناطق زمنية خاطئة. اختبر كل واحدة وأصلح ما يفشل. أخبرني بما غيّرته.

27. لخّص التغييرات الأخيرة

لخّص كل تغيير أجريته في آخر [خمس] خطوات بكلمات بسيطة، ونبّه إلى أي شيء قد يؤثر في البيانات الموجودة.

طلبات الأمان

اجمعها مع صفحتنا عن أمان vibe coding.

28. افحص الوصول إلى البيانات

افحص كود الخادم: هل يستطيع مستخدم مسجَّل قراءة [سجلات] مستخدم آخر أو تغييرها بتغيير رقم في طلب؟ أرني أين يُفحص الوصول وأصلح أي ثغرات.

29. افحص الأسرار المكشوفة

اسرد كل مفتاح API وكلمة مرور ورمز يستخدمها هذا التطبيق وأين يُخزَّن كل منها. تأكد أن أيًا منها ليس في كود يعمل في المتصفح ولا مُودَعًا في ملفات. انقلها إلى الأسرار إن كانت كذلك.

طلبات النشر

30. مراجعة ما قبل الإطلاق

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

طلبات يجب تجنبها

بعض الطلبات تنتج نتائج أسوأ باستمرار:

• "اجعله أفضل." أفضل كيف؟ سمِّ الشاشة والتغيير.
• "أصلح كل شيء." سيغيّر الذكاء الاصطناعي الكثير ولن تعرف ما الذي تحرك.
• "استخدم [مكتبة] و[إطار عمل] و[نمطًا]." ما لم يكن لديك سبب، صف السلوك ودع الأداة تختار البنية.
• "هذا مفتاح API الخاص بي: …" لا تلصق الأسرار في محادثة أبدًا. استخدم إعدادات الأسرار في الأداة.
• عشر ميزات في رسالة واحدة. قسّمها.

اجعل الطلبات عادة

بعد بضعة مشاريع ستكون لديك نسخك الخاصة من هذه. احفظها في ملاحظة وأعد استخدام ما ينجح. وتتذكر Mythex أيضًا من أنت وكيف تعمل عبر المشاريع، فتنتقل التفضيلات التي تكررها، كأسلوبك المعتاد أو بنيتك التقنية، دون إعادة كتابتها.

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

الأسئلة