أساينمنت المحاضرة ٠٤ — Cursor | كورس Vibe Coding · أكاديمية مُترجم
assignment_04 · مشروعك في Cursor | Vibe Coding
lecture_01.html lecture_02.html lecture_03.html ● assignment_04.html ✕
student@motrjim:~/vibe-coding $ cursor . --new-project
/* assignment · lecture_04 */

سبعة عملاء على الطاولة —
إنت هتختار واحد بس

المحاضرة الرابعة فتحت لك Cursor وشرحت إزاي تشتغل جواه. الأساينمنت ده هو الامتحان الحقيقي: مشروع واحد كامل، من رسالة عميل غامضة لصفحة HTML شغّالة ومحترمة — كل ده جوه Cursor، وبمعايير محاضرتَي ٠٢ و٠٣ اللي هتتحاسب عليها بند بند.

--projects 7 · اختار 1 --ide cursor (إجباري) --output html واحد self-contained --log prompt_log.txt --level متوسط ← صعب
// ── أ · قواعد اللعب — اقراها قبل ما تفتح أي حاجة

سبع قواعد التسليم بيترفض من غيرها

مش تفاصيل شكلية — دي اللي بتفرق بين «طالب عمل تاسك» و«مترجم بيسلّم شغل لعميل».

rule_01

مشروع واحد بس — والاختيار نهائي

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

rule_02

كل الشغل جوه Cursor

ممنوع تبني الصفحة في شات وتنسخها. المطلوب تشتغل بوضع Agent، تقرا الـ diff، وتستخدم الـ Checkpoints — دي المهارة المُقيَّمة.

rule_03

ملف HTML واحد self-contained

كل الـ CSS والـ JS جوه الملف، وصفر روابط CDN خارجية. الاستثناء الوحيد: خط Cairo من Google Fonts — وأي حاجة تانية ممنوعة.

rule_04

محتوى عربي حقيقي وطويل

ممنوع «عنوان تجريبي» و«Lorem ipsum». أسماء وأسعار وعناوين واقعية من مجال المشروع نفسه — التصميم اللي بينجح مع محتوى مثالي بس تصميم فاشل.

rule_05

سجّل كل برومبت

ملف prompt_log.txt فيه كل محاولة: البرومبت، إيه اللي حصل، إيه اللي غيّرته وليه، وأنهي موديل استخدمت. ٢٠٪ من الدرجة هنا.

rule_06

المحاولة الأولى مش المطلوبة

التسليم اللي فيه برومبت واحد بيقول إنك مجرّبتش. المتوقع ٣ محاولات على الأقل، وكل محاولة أذكى من اللي قبلها.

rule_07

الفحص على 390px الأول

افتح الصفحة على عرض موبايل قبل اللابتوب. أكتر من ٨٠٪ من جمهورك بيفتح من الموبايل — والتقييم هيبدأ من هناك.

// ── ب · خطوات التنفيذ — الروتين اللي تمشي عليه

من فتح الفولدر لحد التسليم

نفس الترتيب في المشاريع السبعة. متقفزش خطوة — كل واحدة بتمنع كارثة في اللي بعدها.

افتح فولدر نضيف للمشروع

في Cursor: File → Open Folder على فولدر جديد فاضي باسم المشروع. الفولدر ده هو «عالم» الوكيل — أي حاجة برا الفولدر مش شايفها.

ثبّت نظام التصميم قبل أي كود

أول حاجة تدخلها في المحادثة هي وصفة محاضرة ٠٢ كاملة (الألوان بأكوادها، سلّم الخطوط، سلّم المسافات، الظل الواحد). لو مشروعك هيتقسم على كذا محادثة، حطها في ملف قواعد المشروع عشان تفضل ثابتة.

فكّك رسالة العميل لمواصفات — بإيدك

اقرا الرسالة مرتين: المرة الأولى تفهم اللي قاله، والتانية تلاحظ اللي مقالهوش. حوّل الأحاسيس لأكواد: «دافي» تبقى hex، «سريع» تبقى مللي ثانية، «مهم» تبقى قاعدة أولوية.

اكتب المواصفات في ملف specs.md جوه الفولدر — ده تسليم مطلوب، ومرجعك وقت المراجعة.

اطلب خطة من غير كود

برومبتك الأول: «اقرا المواصفات دي واكتبلي خطة تنفيذ من غير أي كود». اقرا الخطة، صلّح فيها، وبعدين قوله ينفذ. فصل التخطيط عن التنفيذ بيمنع نص المصايب.

نفّذ بالموديل الصح

البناء الأول ببرومبت مفصّل ← Claude، وقول له صراحةً: «نفّذ المواصفات دي حرفياً بند بند، ولو بند غامض اسألني قبل ما تفترض». الباج الغامض ← GPT بصيغة «شخّص واشرح الأول». التعديلة الصغيرة ← Auto (ببلاش) أو Composer.

اقرا الـ diff قبل ما تقبل

الأخضر هيتضاف والأحمر هيتشال. قبول من غير قراية = مشروع بيتبني في الضلمة. ولو التعديل بوّظ حاجة، ارجع بـ Restore checkpoint — دي شبكة الأمان اللي بتخليك تجرّب بجرأة.

اختبر بشراسة — بقيم شريرة

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

صقل بمعايير الجمال — وبعدين امسح

لما الوظيفة تشتغل، ادّي البرومبت الجمالي: هرمية أوضح، مسافات أسخى، CTA ذهبي واحد. وآخر خطوة: لعبة المسح — شيل أي عنصر مش بيدافع عن وجوده.

// ── ج · المشاريع — سبعة تذاكر، إنت تفتح واحدة

اختار مشروعك

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

project_01.ticket

حاسبة تسعير خدمات الترجمة

المجال: ترجمة الصعوبة: ⭐⭐⭐ الوقت: 3–4 ساعات محاولات: 2–3
أ. هبة — مكتب «نص وسياق» للترجمة

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

// tasks

  • ٤ أنواع ترجمة بسعر مختلف للكلمة (عامة / قانونية / طبية / تقنية) — اكتب أسعار واقعية من السوق المصري.
  • ٣ مستويات تسليم كنِسَب مضاعفة: عادي ×1، مستعجل ×1.5، خلال ٢٤ ساعة ×2.
  • خدمة اختيارية «مراجعة لغوية» بتزود ٢٠٪.
  • حد أدنى للطلب ١٥٠ جنيه — يتطبق بعد كل الحسابات.
  • تفصيل فاتورة سطر بسطر (الأساسي / الاستعجال / المراجعة / الإجمالي) مش رقم واحد أصم.
  • الحساب لحظي مع كل تغيير، من غير زرار «احسب».
  • زرار واتساب بيفتح المحادثة برسالة معبّاة تلقائياً بتفاصيل الطلب والسعر.

// acceptance_criteria

  • غيّر أي مدخل ← كل الأرقام بتتحدث فوراً وصح
  • الرسالة العربية في رابط wa.me بتوصل سليمة مش رموز مكسورة
  • الحد الأدنى شغال: اكتب ١٠ كلمات ← السعر ١٥٠ مش ٤ جنيه
  • مدخلات شريرة (فاضي / سالب / حروف) مبتطلعش NaN ولا بتكسر الصفحة
  • الصفحة self-contained وشغالة من غير إنترنت (غير الخط)
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك
🧨 الفخ · ترتيب العملياتالاستعجال بيتحسب على السعر الأساسي ولا على السعر بعد المراجعة؟ الفرق فلوس حقيقية. لو مانصصتش على الترتيب، الـ AI هيختار لوحده وهيختار غلط. حدد المعادلة كاملة في البرومبت.
🔍 الغموض · «أغلى طبعاً»العميلة مقالتش أرقام. شغلتك تحوّل «أغلى» لجدول أسعار مكتوب، وتراجعه معاها — الرقم اللي إنت اخترته لوحدك هو الرقم اللي هتتلام عليه.
🔗 الفخ التقني · النص العربي في الرابطالرسالة العربية لازم تعدي على encodeURIComponent قبل ما تتحط في wa.me، وإلا هتوصل مقطعة أو فاضية. جرّب بنفسك من الموبايل مش من اللابتوب بس.
starter_prompt_01.txt
اعمل صفحة HTML واحدة self-contained عربي RTL لحاسبة تسعير ترجمة. المدخلات: عدد كلمات (رقم)، نوع ترجمة (___ اكتب الأربعة بأسعارهم للكلمة)، سرعة التسليم (___ النسب)، وخانة اختيارية للمراجعة اللغوية (+20%). المعادلة بالترتيب ده حرفياً: ___ (اكتب ترتيب العمليات بنفسك). حد أدنى ___ جنيه يتطبق في الآخر. اعرض تفصيلاً سطر بسطر مع الإجمالي، والحساب لحظي بدون زرار. زرار واتساب على رقم ___ برسالة معبّأة تلقائياً بتفاصيل الطلب مع encodeURIComponent. حصّن كل المدخلات: القيم الفاضية أو السالبة أو غير الرقمية تتجاهل برسالة لطيفة بدون NaN.
project_02.ticket

صفحة حجز مواعيد لعيادة أسنان

المجال: صحة الصعوبة: ⭐⭐⭐⭐ الوقت: 5 ساعات محاولات: 3–4
د. أمينة — عيادة «سمايل» لطب الأسنان

المريض بيتصل يلاقي السكرتيرة مشغولة مع مريض تاني، فيقفل ويروح لعيادة غيرنا. عايزة صفحة المريض يحجز منها بنفسه: يختار الدكتور ونوع الكشف واليوم والساعة اللي فاضية. إحنا بنشتغل من ١٠ الصبح لـ ٨ بالليل، والجمعة إجازة. الكشف نص ساعة، التنظيف ساعة، والتقويم ٤٥ دقيقة. وياريت يشوف ملخص الحجز قدامه قبل ما يأكد لأن الناس بتغلط في اليوم كتير وبنفضل نتصل نصلّح.

// tasks

  • اختيار الطبيب من ٣ أطباء بتخصصاتهم، ونوع الخدمة بمدتها وسعرها.
  • اختيار اليوم من الأسبوع الجاي: الجمعة معطّلة، والأيام اللي فاتت معطّلة.
  • توليد المواعيد المتاحة تلقائياً حسب مدة الخدمة داخل ساعات العمل.
  • مواعيد محجوزة مسبقاً (بيانات ثابتة في الملف) تظهر معطّلة وواضح إنها محجوزة — مش مخفية.
  • بيانات المريض: الاسم مطلوب + موبايل مصري (١١ رقم يبدأ بـ 01).
  • بطاقة ملخص بتتحدث لحظياً مع كل اختيار، وزرار التأكيد مقفول لحد ما كل حاجة تكتمل.
  • بعد التأكيد: رسالة فيها كود حجز وتفاصيل الموعد، وزرار «حجز جديد».

// acceptance_criteria

  • اختار «تنظيف ساعة» ← ميعاد ٧:٣٠ م مبيظهرش لأنه هيخلص بعد الإقفال
  • الجمعة وأي يوم فات مش قابلين للاختيار خالص
  • غيّر الطبيب بعد ما تختار ميعاد ← الميعاد بيتصفّر مبيفضلش متعلّق بطبيب تاني
  • المواعيد المحجوزة ظاهرة ومعطّلة بشكل مفهوم من غير شرح
  • زرار التأكيد مبيشتغلش أبداً بحقول ناقصة، والضغط المتكرر مش بيعمل حجزين
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك
🧨 الفخ · المدة × ساعات العمل«بنشتغل لحد ٨» يعني آخر ميعاد يخلص ٨، مش يبدأ ٨. مع مدد مختلفة لكل خدمة، آخر ميعاد متاح بيتغير مع كل اختيار. البرومبت الساذج هيولّد المواعيد مرة واحدة وخلاص.
🗑️ الفخ · الحالة المتسخةالمستخدم بيختار ويرجع يغيّر. أي اختيار سابق يتغير لازم يمسح اللي اتبنى عليه — وإلا هيتأكد حجز لطبيب مش موجود في اليوم ده. اطلبها صراحةً بند مستقل.
🔍 الغموض · «المواعيد الفاضية»فاضية بالنسبة لمين؟ مفيش قاعدة بيانات ولا سيرفر. قرارك: بيانات حجوزات ثابتة داخل الملف كنموذج — واكتب ده للعميلة في رسالة التسليم بدل ما تسيبها تفتكر إن الصفحة متوصلة بجدول العيادة الحقيقي.
starter_prompt_02.txt
اعمل صفحة HTML واحدة self-contained عربي RTL لحجز مواعيد عيادة أسنان. الخطوات بالترتيب: اختيار الطبيب (___ ثلاثة بتخصصاتهم)، نوع الخدمة (___ الاسم + المدة بالدقائق + السعر)، اليوم، ثم الميعاد. ولّد المواعيد ديناميكياً من ___ صباحاً حتى ___ مساءً بحيث ينتهي آخر ميعاد قبل الإقفال بمدة الخدمة المختارة، وأعد توليدها كلما تغيّرت الخدمة. عطّل أيام الجمعة والأيام السابقة لليوم الحالي. عرّف مصفوفة حجوزات ثابتة تظهر مواعيدها معطّلة مع كلمة "محجوز". أي تغيير في اختيار سابق يصفّر كل الاختيارات المبنية عليه. حقول المريض: الاسم مطلوب ورقم موبايل مصري 11 رقم يبدأ بـ 01 برسائل خطأ عربية. بطاقة ملخص تتحدث لحظياً، وزرار تأكيد معطّل حتى اكتمال كل البيانات ولا يقبل ضغطاً مزدوجاً. طبّق نظام التصميم: ___ (الصق وصفة محاضرة ٠٢).
project_03.ticket

صفحة وصفة طبخ بمقادير قابلة للتحجيم

المجال: محتوى / طعام الصعوبة: ⭐⭐⭐ الوقت: 3–4 ساعات محاولات: 2–3
أ. نهى — قناة طبخ على يوتيوب

بحط الوصفة في وصف الفيديو، وكل يوم عندي عشرين تعليق بيسألوا نفس السؤال: «أنا بطبخ لتمن أفراد أعمل المقادير كام؟». عايزة صفحة للوصفة فيها زرار يغيّر عدد الأفراد والمقادير تتظبط لوحدها. وكمان الستات بتتوه وهي بتطبخ فبتسألني «أنا حطيت الملح ولا لأ؟» — نفسي يكون فيه حاجة يعلّموا بيها على اللي خلّصوه. والخطوات اللي فيها وقت زي «سيبيه ٢٥ دقيقة» يبقى فيها مؤقت جاهز.

// tasks

  • وصفة حقيقية كاملة: ١٢ مقدار على الأقل و٨ خطوات مكتوبة بلغة واضحة.
  • تغيير عدد الأفراد من ٢ لـ ١٢ والمقادير تتحدث فوراً.
  • تقريب معقول: مفيش «٢.٦٦٧ ملعقة» — قرّب لأقرب ربع أو نصف.
  • تحويل وحدات تلقائي: أكتر من ٣ معالق صغيرة تبقى كبيرة، وأكتر من ١٠٠٠ جم تبقى كيلو.
  • مقادير غير قابلة للتحجيم (رشة ملح / حسب الرغبة) تفضل زي ما هي.
  • تعليم على المقادير والخطوات المنجزة مع شريط تقدم، وزرار تصفير.
  • مؤقت في الخطوات الزمنية: يبدأ، يوقف، يتصفر، وينبّه بصرياً لما يخلص.

// acceptance_criteria

  • غيّر العدد ١٠ مرات ورا بعض ← كل المقادير صح ومفيش كسور مضحكة
  • «رشة ملح» فضلت رشة ملح مهما كان عدد الأفراد
  • التحويل بيحصل بعد التحجيم مش قبله — ٤ معالق صغيرة بقت «١ كبيرة + ١ صغيرة»
  • المؤقت بيقف فعلاً ومبيفضلش شغال ورا، ومؤقتين مبيتلخبطوش مع بعض
  • التعليم على الخطوات مبيضيعش لما تغيّر عدد الأفراد
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك
🧨 الفخ · الكسورثلث كوب × ٧ أفراد ÷ ٤ = رقم بأربع خانات عشرية. من غير قاعدة تقريب مكتوبة، الصفحة هتطلع مقادير مستحيل حد ينفذها. حدد: التقريب لأقرب ٠٫٢٥ وحدة، والعرض بصيغة كسور مقروءة.
🥄 الفخ الخفي · المقادير الثابتة«رشة ملح» و«زيت للقلي» و«حسب الرغبة» لو اتضربوا في معامل التحجيم هتطلع نتيجة سخيفة. كل مقدار محتاج علامة تقول: ده بيتحجّم ولا لأ. الـ AI مش هيفكر في ده لوحده.
⏱️ الفخ التقني · المؤقتات المتعددةلو المستخدم شغّل مؤقتين في خطوتين، أو خرج من الخطوة والمؤقت شغال، هتتلخبط الأرقام. اطلب إدارة صريحة: كل مؤقت مستقل بمعرّفه، وبيتلغى عند التصفير.
starter_prompt_03.txt
اعمل صفحة HTML واحدة self-contained عربي RTL لوصفة طبخ تفاعلية. البيانات: مصفوفة مقادير كل عنصر فيها (الاسم، الكمية، الوحدة، وعلامة منطقية scalable تحدد هل يتحجّم أم لا) — ___ ألصق مقاديري. الوصفة أساسها ___ أفراد. زرار تغيير عدد الأفراد من 2 إلى 12 يعيد حساب المقادير القابلة للتحجيم فقط، مع تقريب لأقرب 0.25 وحدة وعرضها ككسور مقروءة. بعد التحجيم طبّق تحويل الوحدات: أكثر من 3 ملاعق صغيرة تتحول لكبيرة، وأكثر من 1000 جرام تتحول لكيلو. خطوات الوصفة ___ مع خانة تعليم لكل مقدار وكل خطوة وشريط تقدم وزرار تصفير. الخطوات ذات المدة الزمنية لها مؤقت مستقل بمعرّف خاص (تشغيل/إيقاف/تصفير) مع تنبيه بصري عند الانتهاء، ولا يتأثر بمؤقت خطوة أخرى. طبّق نظام التصميم: ___ (الصق وصفة محاضرة ٠٢).
project_04.ticket

اختبار قواعد المرور — بمؤقت ومراجعة

المجال: تعليم الصعوبة: ⭐⭐⭐⭐ الوقت: 5 ساعات محاولات: 3–4
أ. عصام — مدرسة «الطريق» لتعليم القيادة

الطلبة بيتدربوا كويس على العربية، وبعدين يروحوا امتحان المرور ويسقطوا في الأسئلة النظرية والعلامات. عايز صفحة يتمرنوا عليها قبل الامتحان: عشر أسئلة بوقت محدد زي الامتحان بالظبط، وفي الآخر يشوف غلط في إيه والصح كان إيه وليه. وأهم حاجة الأسئلة متجيش بنفس الترتيب كل مرة، لأن الطلبة بيحفظوا الترتيب وبيبعتوا لبعض «الرابع اختار ب».

// tasks

  • ١٠ أسئلة اختيار من متعدد (٤ اختيارات) في قواعد المرور والعلامات — أسئلة واقعية.
  • سؤال واحد على الشاشة مع شريط تقدم وزراير «السابق / التالي».
  • مؤقت ١٠ دقايق للاختبار كله ظاهر باستمرار، ولما يخلص يسلّم تلقائي.
  • شاشة نتيجة: الدرجة، النسبة، وتقدير (ناجح من ٧٠٪).
  • مراجعة كاملة: كل سؤال بإجابتك والإجابة الصح وسطر تفسير.
  • زرار إعادة بيخلط ترتيب الأسئلة والاختيارات من جديد.
  • تحذير قبل التسليم لو في أسئلة من غير إجابة.

// acceptance_criteria

  • الخلط مش بيلخبط الإجابات الصح — أعِد الاختبار ٥ مرات وتأكد
  • المؤقت بيقف فعلاً بعد التسليم ومبيفضلش شغال في الخلفية
  • الرجوع لسؤال سابق بيوريك اختيارك المحفوظ مش خانة فاضية
  • ضغط «سلّم» مرتين بسرعة مش بيحسب الدرجة مرتين
  • الشاشة النهائية بطلها واحد: الدرجة — والباقي هادي
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك
🧨 الفخ · الخلط والفهرسلو الإجابة الصح متخزنة كرقم ترتيب (الاختيار رقم ٢)، أول ما تخلط الاختيارات هتبقى الإجابة الصح غلط — وأخطر حاجة إن الصفحة هتشتغل «عادي» وهي بتصحح خطأ. خزّن الإجابة كقيمة مش كترتيب، واختبرها بعد الخلط.
⏱️ الفخ · المؤقت الزومبيالمؤقت اللي مبيتلغيش بعد التسليم بيفضل شغال ويسلّم تاني وإنت في شاشة المراجعة. اطلب صراحةً إيقافه عند التسليم وعند إعادة البدء.
🔍 الغموض · «وقت زي الامتحان»وقت لكل سؤال ولا للاختبار كله؟ بيتوقف لو رجعت لسؤال سابق؟ العميل مقالش — إنت اللي تحدد وتكتب القرار في المواصفات وتبلّغه في رسالة التسليم.
starter_prompt_04.txt
اعمل صفحة HTML واحدة self-contained عربي RTL لاختبار من 10 أسئلة اختيار من متعدد في قواعد المرور. البيانات مصفوفة أسئلة، كل سؤال له: النص، 4 اختيارات، الإجابة الصحيحة مخزّنة كقيمة نصية وليس كرقم ترتيب، وسطر تفسير. اعرض سؤالاً واحداً في الشاشة مع شريط تقدم وزرار سابق/تالي يحفظ اختيارات المستخدم. مؤقت ___ دقيقة للاختبار كله يظهر باستمرار ويسلّم تلقائياً عند انتهائه، ويتوقف نهائياً عند التسليم أو إعادة البدء. عند التسليم: تحذير لو فيه أسئلة بدون إجابة، ثم شاشة نتيجة (الدرجة والنسبة والتقدير من ___%) ثم مراجعة كل سؤال بإجابة المستخدم والإجابة الصحيحة والتفسير. زرار إعادة يخلط ترتيب الأسئلة والاختيارات مع الحفاظ على صحة التصحيح. امنع الحساب المزدوج عند الضغط السريع. طبّق نظام التصميم: ___ (الصق وصفة محاضرة ٠٢).
project_05.ticket

دليل جلسات مؤتمر — بمسارات وجدول شخصي

المجال: فعاليات الصعوبة: ⭐⭐⭐⭐ الوقت: 5 ساعات محاولات: 3–4
أ. ليلى — منسّقة مؤتمر تقني

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

// tasks

  • ١٨ جلسة على الأقل: العنوان، المتحدث (بعضهم بأسماء إنجليزية)، وقت البداية والنهاية، القاعة، المسار.
  • تبويبات للأيام التلاتة.
  • فلتر بالمسار (٤ مسارات) + بحث لحظي في العنوان واسم المتحدث — يشتغلوا مع بعض.
  • زرار «أضف لجدولي» لكل جلسة، وتبويب «جدولي» بيعرض المختار مرتّب بالوقت.
  • تنبيه تعارض: لو الجلسة بتتقاطع زمنياً مع جلسة مختارة، وضّح ده قبل الإضافة.
  • عدّاد نتايج، وحالة فارغة للبحث وللجدول الشخصي برسالة مرشدة.
  • على الموبايل الجلسات كروت مقروءة، والفلاتر في متناول الإصبع.

// acceptance_criteria

  • البحث + الفلتر + التبويب شغالين مع بعض من غير ما يلغوا بعض
  • الأسماء الإنجليزية جوه السطر العربي مش بتقلب ولا بتكسر الاتجاه
  • التعارض بيتكشف في التداخل الجزئي كمان مش بس في نفس التوقيت بالظبط
  • الجلسات المضافة بتفضل مضافة بعد التنقل بين الأيام والفلاتر
  • «جدولي» وهو فاضي فيه رسالة بتقول للمستخدم يعمل إيه
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك
🧨 الفخ · منطق التعارضأغلب المحاولات بتقارن وقت البداية بس، فبتفوّت الجلسة اللي بتبدأ في نص جلسة تانية. القاعدة الصح: تعارض لو بداية الأولى أقل من نهاية التانية و بداية التانية أقل من نهاية الأولى. اكتب المعادلة دي في البرومبت حرفياً — ومتسبهاش لتقدير الوكيل.
🔤 الفخ · الأسماء الإنجليزيةاسم متحدث إنجليزي وسط سطر عربي مع وقت بالأرقام = فوضى اتجاهات. الحل أوامر صريحة: الصفحة dir="rtl" واسم المتحدث الإنجليزي في عنصر dir="ltr" محاذي مع الكارت.
🗂️ الفخ · الحالة في الـ DOMلو حالة «مضاف لجدولي» متخزنة في شكل الزرار بس، أول ما الفلتر يعيد بناء القايمة هتضيع. خزّن الاختيارات في مصفوفة مستقلة، والواجهة تُبنى منها في كل مرة.
🔍 الغموض · هل التبويب يلغي الفلتر؟العميلة مقالتش. قرارك: الفلتر والبحث يفضلوا شغالين لما تنتقل بين الأيام (أكثر توقعاً) — بس اكتب القرار وابلّغه لها.
starter_prompt_05.txt
اعمل صفحة HTML واحدة self-contained عربي RTL لدليل جلسات مؤتمر. البيانات: مصفوفة 18 جلسة كل عنصر فيها (العنوان، المتحدث، اليوم، وقت البداية، وقت النهاية، القاعة، المسار) — ___ ألصق بياناتي. تبويبات لثلاثة أيام، وفلتر بالمسار (___ الأربعة)، وبحث لحظي في العنوان واسم المتحدث، والثلاثة يعملون معاً في نفس الوقت. اسم المتحدث الإنجليزي يوضع داخل عنصر dir="ltr" محاذٍ مع الكارت. زرار "أضف لجدولي" يخزّن معرّف الجلسة في مصفوفة مستقلة تُبنى منها الواجهة (لا تخزّن الحالة في الـ DOM)، وتبويب "جدولي" يعرضها مرتبة بالوقت. اكتشف التعارض بهذه القاعدة حرفياً: تتعارض جلستان إذا كانت بداية الأولى أصغر من نهاية الثانية وبداية الثانية أصغر من نهاية الأولى — واعرض تنبيهاً واضحاً. عدّاد نتائج وحالة فارغة مرشدة للبحث وللجدول الشخصي. طبّق نظام التصميم: ___ (الصق وصفة محاضرة ٠٢).
project_06.ticket

متتبّع المصروفات الشهري

المجال: مالية شخصية الصعوبة: ⭐⭐⭐⭐⭐ الوقت: 6+ ساعات محاولات: 4+
كريم — موظف، ٢٩ سنة

بقبض أول الشهر، وميجيش يوم ٢٠ إلا وأنا بستلف. المشكلة الحقيقية إني مش عارف الفلوس راحت فين أصلاً. عايز حاجة أفتحها من الموبايل وأسجل فيها المصروف أول بأول وأنا واقف في المحل، أحط ميزانية للشهر وأشوف أكلت منها قد إيه، والأهم أعرف بيتصرف في إيه بالظبط. وطبعاً لو قفلت الصفحة وفتحتها تاني ملاقيش كل حاجة اتمسحت — لأني ساعتها هسيبها زي كل التطبيقات اللي نزّلتها ومسحتها.

// tasks

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

// acceptance_criteria

  • اقفل الصفحة وافتحها ← كل البيانات موجودة زي ما هي
  • تجاوز الميزانية بيتعرض كـ«تجاوزت بـ ١٢٠ جنيه» مش «المتبقي: -١٢٠»
  • أول فتح (صفر مصروفات) فيه حالة فارغة بترشد للخطوة الأولى مش شاشة بيضا
  • مفيش قسمة على صفر في المتوسطات في أول يوم أو آخر يوم في الشهر
  • غيّر الشهر ← المؤشرات كلها بتتحسب على الشهر المختار بس
  • على 390px كل الأرقام مقروءة من غير تكبير ولا سحب
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك
🧨 الفخ · القسمة على صفر«متوسط اليوم» و«المتاح لباقي الشهر» بيتحسبوا بقسمة على عدد أيام — وفي أول الشهر أو آخر يوم فيه، المقام بيبقى صفر والنتيجة Infinity. حدد السلوك في الحالتين كتابةً قبل ما تطلب الكود.
💾 الفخ · الحفظ المحليأي بيانات قديمة أو ناقصة في التخزين هتكسر الصفحة عند الفتح وتوريك شاشة بيضا. اطلب قراءة داخل try/catch ترجّع قائمة فاضية عند أي خطأ — دي حاجة الـ AI مبيعملهاش من نفسه.
📊 الفخ · «رسم بياني»أول ما تقول «شارت»، الوكيل هيجيب مكتبة من الإنترنت — والصفحة المفروض self-contained. اطلبها صراحةً: أشرطة نسبية بـ CSS من عرض محسوب، بدون أي مكتبة.
📱 الفخ البصري · الجدول على 390px٥ أعمدة على شاشة موبايل = كارثة، والحل مش تصغير الخط. اطلب تحويل كل صف لبطاقة تحت عرض معيّن — من الأول مش في الآخر.
starter_prompt_06.txt
اعمل صفحة HTML واحدة self-contained عربي RTL لمتتبّع مصروفات شهري. نموذج إضافة: المبلغ، التصنيف (___ ستة تصنيفات)، التاريخ، ملاحظة اختيارية، مع تحصين كامل للمدخلات (فارغ/سالب/نص) برسائل عربية. حقل ميزانية شهرية وشريط تقدم يتغير لونه عند 75% وعند التجاوز، ويعرض التجاوز بصيغة "تجاوزت بـ X" لا برقم سالب. مؤشرات: إجمالي المصروف، المتبقي، متوسط اليوم، والمتاح لكل يوم في باقي الشهر — وحدد سلوك القسمة عندما يكون المقام صفراً بحيث لا تظهر Infinity أو NaN أبداً. تقسيم بالتصنيف كأشرطة نسبية بعرض محسوب بـ CSS فقط وبدون أي مكتبة خارجية. فلتر بالتصنيف وبالشهر وترتيب بالتاريخ أو المبلغ، وتعديل وحذف بتأكيد. احفظ في localStorage واقرأ داخل try/catch يرجع مصفوفة فارغة عند أي خطأ. حالة فارغة مرشدة عند أول فتح. تحت عرض 700px حوّل صفوف الجدول إلى بطاقات. طبّق نظام التصميم: ___ (الصق وصفة محاضرة ٠٢).
project_07.ticket

مولّد عرض سعر قابل للطباعة — ورشة سيارات

المجال: خدمات / صيانة الصعوبة: ⭐⭐⭐⭐⭐ الوقت: 6+ ساعات محاولات: 4+
أ. محمود — صاحب ورشة «الأمين» لصيانة السيارات

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

// tasks

  • بيانات ثابتة للورشة، وحقول للعميل والسيارة (الموديل، سنة الصنع، رقم اللوحة، الكيلومترات).
  • رقم عرض تلقائي وتاريخ اليوم تلقائي — قابلين للتعديل.
  • إضافة/حذف بنود ديناميكي، وكل بند بنوعه (قطعة غيار / مصنعية) والوصف والكمية وسعر الوحدة وإجمالي البند.
  • إجمالي منفصل للقطع وإجمالي منفصل للمصنعية — العميل بيسأل عليهم دايماً.
  • خصم يشتغل بنسبة أو بمبلغ ثابت (اختيار)، وضريبة ١٤٪ بترتيب واضح مع الخصم.
  • ضمان المصنعية وسريان العرض (١٥ يوم) وشروط الدفع كنص ثابت.
  • وضع طباعة A4 نضيف: يخفي كل الأزرار، وحقول الإدخال تبان كنص عادي بدون إطارات، والجدول ميتقطعش نص الصف بين صفحتين.

// acceptance_criteria

  • احذف بند من نص الجدول ← الترتيب والإجماليات كلها تفضل صح
  • الأرقام بفواصل آلاف وخانتين عشريتين ثابتة في كل مكان في الصفحة
  • خصم ١٠٪ وخصم ١٠٠ جنيه بيدّوا نتيجتين مختلفتين صحيحتين كل واحد بطريقته
  • معاينة الطباعة: ورقة رسمية بدون أزرار ولا إطارات حقول ولا خلفيات داكنة بتاكل الحبر
  • عرض من ١٥ بند بيتقسم على الصفحات من غير ما يقطع صف نصين
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك
🧨 الفخ · الخصم قبل الضريبة ولا بعدهاالعميل مقالش، والفرق فلوس بتتحاسب عليها. القرار الصح محاسبياً: الخصم على الإجمالي قبل الضريبة، والضريبة على الصافي. اكتب القرار في المواصفات، واذكره للعميل في رسالة التسليم — ده اللي بيفرق المحترف.
🗑️ الفخ التقني · حذف بند من النصلو الحذف بيعتمد على ترتيب البند في المصفوفة، حذف البند رقم ٢ هيلخبط كل اللي بعده. اطلب معرّف فريد ثابت لكل بند، وإعادة حساب كاملة بعد أي تغيير.
🖨️ الفخ · الطباعةحقول الإدخال بتطبع بإطاراتها فبتطلع الورقة شكلها استمارة مش عرض سعر رسمي. ستايل الطباعة لازم يشيل الحدود والخلفيات ويمنع قطع الصفوف بين الصفحات.
🔢 الفخ · التقريباجمع بنود فيها كسور ← الإجمالي هيختلف عن جمع الأرقام الظاهرة، والعميل هيعدّها بالآلة الحاسبة. حدد: التقريب عند العرض فقط، والحساب على القيم الكاملة.
starter_prompt_07.txt
اعمل صفحة HTML واحدة self-contained عربي RTL لمولّد عرض سعر لورشة صيانة سيارات. رأس ثابت ببيانات الورشة ___ وحقول لبيانات العميل والسيارة (الموديل، سنة الصنع، رقم اللوحة، الكيلومترات)، ورقم عرض تلقائي وتاريخ اليوم قابلان للتعديل. جدول بنود ديناميكي (إضافة/حذف) وكل بند له: معرّف فريد ثابت لا يعتمد على الترتيب، النوع (قطعة غيار / مصنعية)، الوصف، الكمية، سعر الوحدة، إجمالي البند. اعرض إجمالياً منفصلاً للقطع وآخر للمصنعية. ثم احسب بالترتيب ده حرفياً: مجموع البنود ← ناقص الخصم (نسبة أو مبلغ حسب اختيار المستخدم) ← الصافي ← ضريبة 14% ← الإجمالي النهائي. كل الأرقام بفواصل آلاف وخانتين عشريتين مع الحساب على القيم غير المقرّبة. أضف نص ضمان المصنعية وسريان العرض وشروط الدفع. بلوك @media print مستقل: يخفي كل الأزرار، ويحوّل حقول الإدخال لنص بلا حدود ولا خلفيات، ويمنع قطع صفوف الجدول بين الصفحات، وينسّق الورقة A4. طبّق نظام التصميم: ___ (الصق وصفة محاضرة ٠٢).
// ── د · المعايير — إزاي هيتحسب عليك

مفيش «الصفحة اشتغلت» — في ٥ محاور

التقييم من ١٠٠. ولاحظ الوزن: سجل برومبتاتك لوحده أتقل من التصميم — لأن دي المهارة اللي هتفضل معاك لما الأدوات تتغير.

المحوربنقيس إيه بالظبطالدرجة
التنفيذ الوظيفي كل مهمة في التذكرة اتنفذت فعلاً، ومعايير القبول متحققة بند بند، والحسابات صحيحة. 30
معايير الجمال
(محاضرة ٠٢)		 بطل واحد في كل شاشة · تباين WCAG AA · محاذاة على grid · قاعدة 60-30-10 · خط واحد بسلّم ثابت · مسافات بمضاعفات 8 · radius وظل موحّدين · حركة عند التفاعل بس · صفر تدرجات وصفر إيموجي في الواجهة · لعبة المسح اتلعبت. 25
التحصين والحالات الحدية خانة فاضية · قيمة سالبة · حروف مكان أرقام · محتوى عربي طويل جداً · حالة فارغة برسالة مفيدة · ضغط متكرر سريع · صفر NaN وصفر انهيار. 15
رحلة البرومبتات
(محاضرة ٠٣)		 هل المحاولة التالتة أذكى من الأولى؟ · فصلت التخطيط عن التنفيذ؟ · اخترت الموديل حسب المهمة وكتبت ليه؟ · عرفت إمتى تكمل في نفس المحادثة وإمتى تبدأ محادثة جديدة؟ · قريت الـ diff واستخدمت checkpoint؟ 20
التسليم والتوثيق ملف واحد self-contained شغّال من غير إنترنت · specs.md فيه ترجمتك لكلام العميل · رسالة تسليم مهنية بتشرح القرارات اللي أخدتها والغموض اللي حسمته. 10
الإجمالي — والنجاح من ٧٠ 100

تشيك ليست الجمال — محاضرة ٠٢

تشيك ليست الشغل في Cursor — محاضرة ٠٣

// ── هـ · التسليم

خمس حاجات — فولدر واحد باسمك

اضغط الفولدر vibe04_اسمك وارفعه في مكان التسليم قبل المحاضرة الجاية.

[1]
ملف المشروعملف HTML واحد باسم المشروع (مثلاً project_03.html) — self-contained وشغّال بالدبل كليك.
[2]
specs.mdترجمتك لرسالة العميل: الألوان بأكوادها، القواعد بأولوياتها، الغموض اللي حسمته وليه، والقرارات اللي أخدتها بدل العميل.
[3]
prompt_log.txtكل برومبت جربته بالترتيب + الموديل اللي استخدمته + إيه اللي طلع + إيه اللي غيّرته في اللي بعده. ده أثمن ملف في التسليم.
[4]
رسالة التسليم للعميلفقرة أو اتنين بعربية مهنية: إيه اللي اتعمل، إيه القرارات اللي أخدتها في النقط الغامضة، وإيه اللي محتاج قرار منه. من غير مصطلحات تقنية.
[5]
سطرين انطباعإيه أصعب لحظة قابلتك في Cursor؟ وإيه الحاجة اللي لو رجعت تعملها تاني هتعملها بشكل مختلف من الأول؟

🎁 نقطتان إضافيتان — اختياري

نفّذ نفس المشروع مرة تانية في محادثة جديدة بموديل من عيلة مختلفة، وقارن في ١٠ سطور: مين اتبع المواصفات أكتر؟ مين احتاج تصحيحات أقل؟ ومين طلع تصميم أقرب لمعايير محاضرة ٠٢ من غير ما تطلب؟

student@motrjim:~/vibe-coding $ git commit -m "assignment_04" — good luck

أكاديمية مُترجم الترجمة في عصر الذكاء الاصطناعي

© 2026 جميع الحقوق محفوظة

Scroll to Top