lecture_03 · بيئات الشغل والتاسكات | Vibe Coding
lecture_01.html
lecture_02.html
● lecture_03.html ✕
vibe-coding · main
bash — motrjim-academy — 80×24
student@motrjim:~/vibe-coding $
✓ المتطلب السابق: محاضرة ٠١ (المفاهيم) + ٠٢ (التصميم)
✓ منصتان · ٤ تاسكات بصيغة عميل حقيقي · تدريب على المحاولات المتكررة
/* objective */

وقت الشغل الحقيقي —
من الشات لورشة الـ IDE

--ide cursor + antigravity --models 5 --tasks 4 --format client_tickets --output html
/**

ليه نسيب الشات ونروح لـ IDE؟

لحد دلوقتي كنا بنشتغل «شات»: نطلب، ناخد كود، ننسخه. الـ IDE الوكيلي (Agentic IDE) نقلة كاملة: الـ AI جواه بيشوف كل ملفات مشروعك، يعدّل فيها مباشرة، يشغّل النتيجة ويشوفها بنفسه، ويرجع في قراراته لو حصل غلط — إنت بتدير، هو بيشتغل.

وده بيغير طبيعة البرومبت نفسه: في الشات بتطلب «اكتبلي»، في الـ IDE بتطلب «اعمل» — والفرق ده هو اللي هنتدرب عليه النهاردة على ٤ تاسكات بصيغة عملاء حقيقيين، بكل غموضهم وفخاخهم.

قاعدة المحاضرة: محدش بيجيب التاسك من أول محاولة — الاحتراف مش إنك تصيب من أول مرة، الاحتراف إن محاولتك التانية تكون أذكى من الأولى.
*/
import { vocab } from './ide_terms'
٤ مصطلحات قبل ما نفتح أي IDE
Agent 🤖
الوكيل — الـ AI وهو في وضع «الشغل»: بيخطط، يعدّل ملفات، يشغّل أوامر، ويكمّل خطوات ورا بعض لوحده. ده اللي بيفرّق الـ IDE عن الشات.
Context 🧠
السياق — إيه اللي الـ AI «شايفه» وهو بيشتغل: الملفات المفتوحة، المشروع، تعليماتك السابقة. برومبت من غير سياق صح = إجابة في الفراغ.
Diff ±
الفرق — قبل ما التعديل يتطبق، الـ IDE بيوريك بالألوان: الأخضر هيتضاف والأحمر هيتشال. عادة الذهب: اقرا الـ diff قبل ما تدوس قبول.
Checkpoint ⏪
نقطة الرجوع — لقطة من مشروعك قبل كل تعديل، ترجعلها بضغطة لو الوكيل بوّظ. دي شبكة الأمان اللي بتخليك تجرّب بجرأة.
// ── أ · المنصتان — عُدّة الشغل
‹/›cursor.specIDE · المعيار الصناعي01
// Cursor — by Anysphere

Cursor — المحرر اللي غيّر اللعبة

محرر أكواد مبني على أساس VS Code (يعني شكله مألوف لأي حد شاف محرر قبل كده) لكن معاد تصميمه بالكامل حوالين الـ AI. بقى المعيار الصناعي الفعلي للـ AI coding: بيستخدم جوه أغلب شركات التقنية الكبرى، وقيمته إنه بيجمع أقوى النماذج (Claude وGPT وGemini) في مكان واحد.

أهميته ⭐
لو هتكتب «Cursor» في سيرتك الذاتية، الكلمة دي ليها وزن في السوق. إتقانه = إتقان أسلوب الشغل اللي الصناعة كلها ماشية عليه.
أدواته 🛠️
Tab (إكمال ذكي بيتوقع تعديلك الجاي) · Chat (اسأل عن مشروعك) · Agent (يعدّل ملفات متعددة لوحده) · Checkpoints للرجوع.
التكلفة 💰
خطة Hobby مجانية للتجربة (محدودة) — والخطة الفعلية Pro بحوالي 20$ شهرياً بنظام رصيد بيتصرف حسب النموذج اللي بتختاره. في تجربة Pro أسبوع مجاناً للحسابات الجديدة.
++ المميزات
  • تعدد النماذج: بتختار Claude أو GPT أو Gemini حسب المهمة — مش مقفول على نموذج واحد.
  • فهم المشروع كامل: بيبني فهرس لكل ملفاتك، فإجاباته «عارفة» مشروعك مش عامة.
  • الـ Tab الأسطوري: إكمال بيتوقع تعديلك الجاي بدقة مرعبة — إدمان حقيقي.
  • مستقر وناضج — سنين من التطوير والصقل.
-- العيوب
  • الفلوس: المجاني للتذوق بس — الشغل الجاد محتاج اشتراك، والرصيد بيتصرف أسرع مع النماذج القوية.
  • نظام الفوترة بالرصيد مربك للمبتدئين (نفس الاشتراك يخلص بسرعات مختلفة حسب النموذج).
  • واجهته «مطوّرين» — أول يوم فيه رهبة للقادم من خارج البرمجة.
‹/›antigravity.specIDE · الوكيل أولاً02
// Google Antigravity — Agent-first

Google Antigravity — منصة «الوكيل أولاً»

منصة تطوير من جوجل مبنية من الصفر على فكرة مختلفة: مش محرر بتكتب فيه والـ AI يساعدك — ده مركز قيادة لوكلاء بيشتغلوا، وإنت بتديرهم. بتوصف المهمة، والوكيل بيخطط وينفذ ويفتح متصفح جواه ويجرّب النتيجة بنفسه ويسلّمك تقرير بالإثباتات (لقطات وتسجيلات) اسمها Artifacts.

أهميته ⭐
أنضف تجسيد لفلسفة الـ vibe coding نفسها: إنت مدير والوكيل منفّذ. ولأنه مجاني في مرحلة الـ preview بحدود سخية لـ Gemini، هو أفضل نقطة بداية بصفر تكلفة.
أدواته 🛠️
Agent Manager (تدير أكتر من وكيل بالتوازي) · متصفح مدمج بيجرّب صفحتك بنفسه · Artifacts (خطط + سكرينشوتات إثبات) · أوضاع تحكم من «طيار آلي» لحد «اسألني قبل أي حاجة».
التكلفة 💰
مجاني في الـ public preview بحدود استخدام سخية على نماذج Gemini — وده وضع الـ preview، فالأسعار النهائية لسه بتتحدد.
++ المميزات
  • مجاني حالياً بحدود كريمة — صفر حاجز دخول للطالب.
  • المتصفح المدمج: الوكيل بيفتح صفحة الـ HTML بتاعتك ويشوفها بعينه ويصلح اللي باين غلط — ميزة ذهبية لتاسكات المحاضرة دي.
  • أوضاع التحكم: تبدأ بـ«راجعني قبل كل خطوة» وإنت بتتعلم، وتفتح الطيار الآلي لما تثق.
  • الـ Artifacts بتعلّمك تراجع شغل الوكيل — عادة احترافية من يوم واحد.
-- العيوب
  • لسه صغير: منتج جديد — مستخدمين بيبلغوا عن أخطاء وعدم استقرار أحياناً.
  • مقفول على نماذج Gemini — مفيش تعدد نماذج زي Cursor.
  • المنصة بتتغير بسرعة (إصدارات وأسماء أدوات بتتحدث) — الشرح ممكن يقدم بسرعة، فاتعوّد تدور بنفسك.
// diff: cursor vs antigravity
comparison.diff
CursorGoogle Antigravity
الفلسفةمحرر + AI — إنت في المقعد الأمامي والـ AI جنبكوكيل أولاً — إنت مدير والوكيل بيشتغل
النماذجمتعدد: Claude · GPT · GeminiGemini فقط
التكلفةمجاني محدود، الجاد Pro ~20$/شهرمجاني حالياً (preview) بحدود سخية
أقوى ميزةالـ Tab والنضج والاعتماد الصناعيالمتصفح المدمج والـ Artifacts
الاستقرارناضج ومستقرجديد — أخطاء واردة
مناسب لمين دلوقتياللي بيبني مسار مهني ومستعد يدفعالطالب المبتدئ — ابدأ هنا ببلاش
  • قرارنا في الكورس: الاتنين. هنبدأ التاسكات على Antigravity (مجاني + المتصفح المدمج بيساعد المبتدئ يشوف نتيجته)، وهنعيد تاسك واحد على Cursor عشان تحس بفرق الفلسفتين بإيدك.
  • المهارة الحقيقية اللي بتتعلمها مش المنصة — طريقة التفكير: اللي يتقن الاتنين دول، ينقل لأي منصة جديدة في ساعة.
// ── ب · خطواتك الأولى في كل منصة
‹/›workflow_cursor.mdcheat sheet
step_1
نزّله من cursor.com وافتح فولدر جديد فاضي للتاسك (File → Open Folder) — الفولدر ده هو «عالم» المشروع.
step_2
افتح لوحة الـ AI (Ctrl+L أو Cmd+L) واختار وضع Agent — ده اللي بيسمحله ينشئ ملفات ويعدلها.
step_3
الصق برومبت التاسك. الوكيل هيعرض خطة وتعديلات — اقرا الـ diff (الأخضر/الأحمر) قبل ما تقبل.
step_4
افتح ملف الـ HTML الناتج في المتصفح (كليك يمين → Reveal in Explorer → دبل كليك) وقيّمه بعينك بمعايير محاضرة ٠٢.
step_5
لقيت مشكلة؟ ارجع للوحة واطلب التعديل في نفس المحادثة. اتلخبط خالص؟ Restore checkpoint وابدأ برومبت أنضف.
‹/›workflow_antigravity.mdcheat sheet
step_1
نزّله من antigravity.google وسجّل بحساب جوجل. في إعداد أول مرة اختار وضع Agent-assisted (المُوصى به) — تحكم مع مساعدة.
step_2
افتح فولدر التاسك، وادخل على Agent Manager — ده مركز القيادة اللي بتوصف فيه المهمة.
step_3
الصق برومبت التاسك. الوكيل هيكتب خطة الأول — اقراها وعدّل فيها قبل التنفيذ، دي فرصتك ترخص وتوجّه.
step_4
سيبه ينفذ ويفتح المتصفح المدمج ويجرب الصفحة بنفسه. راجع الـ Artifacts: هتلاقي سكرينشوتات لنتيجته كإثبات.
step_5
علّق على اللي عايز يتغير بالظبط («الزرار مش ذهبي — استخدم #C9A961») وخلّيه يعيد الجزء ده بس.
// ── ج · موديلات الذكاء جوه Cursor — مين تندهله لإيه؟
/**

القايمة المنسدلة اللي بتحيّر الكل

أول ما تفتح Cursor هتلاقي قايمة موديلات طويلة، وكل شهور بتتغير الأسماء والأرقام. متحفظش الإصدارات — اتعلم شخصية كل «عيلة»: شخصية Claude وشخصية GPT وشخصية Gemini ثابتة نسبياً حتى لما الأرقام تتغير. ومعلومة فلوس مهمة: وضع Auto مش بيصرف من رصيدك — الرصيد بيتصرف بس لما «تثبّت» موديل مميز بنفسك، فخلّي Auto هو الافتراضي وادفع الرصيد وقت ما تحتاج عقل معين.

*/
‹/›auto.modelالافتراضي المجانيm1
💪 شاطر في
المهام الواضحة البسيطة: تعديل نص، تغيير لون، سؤال سريع. Cursor بيختارلك موديل مناسب تلقائياً من غير ما يخصم من رصيدك — يعني شغل غير محدود عملياً.
😴 ضعيف في
مفيش تحكم مين اللي بيرد عليك — فالجودة متذبذبة في المهام المركبة. لو التاسك محتاج دقة في اتباع مواصفات طويلة، Auto مش رهانك.
🗣️ اندهله بـ
طلبات قصيرة محددة: «غيّر لون الزرار لـ #C9A961 بس من غير ما تلمس أي حاجة تانية».
‹/›composer.modelموديل Cursor نفسهm2
💪 شاطر في
السرعة — ده موديل Cursor الخاص المدرّب مخصوص على الشغل جوه المحرر، وأسرع بفارق كبير (حوالي 4 أضعاف الموديلات المكافئة). ممتاز للحلقة التفاعلية: عدّل → شوف → عدّل تاني، والتعديلات المتوسطة على كذا ملف.
😴 ضعيف في
مش أعمق عقل في القايمة — المشاكل المعقدة والغامضة والقرارات المعمارية مش ملعبه. سريع ≠ حكيم.
🗣️ اندهله بـ
تعديلات محددة الملفات والنطاق: «في task_02.html: خلّي كروت الحلويات نفس ستايل كروت المشاوي بالظبط».
‹/›claude.modelAnthropic · Sonnet / Opusm3
💪 شاطر في
الالتزام الدقيق بالتعليمات المركبة — إجماع المجتمع البرمجي إنه الخيار الأول للشغل اليومي الجاد: بتديله مواصفات من 12 بند فبينفذهم بند بند، والشغل الطويل متعدد الملفات، وذوق كود نضيف. وده تحديداً المهم لتاسكاتنا: برومبتاتك المفصلة (RTL، ألوان hex، قواعد التقدير) محتاجة موديل بياخد التفاصيل بجدية. النسخة الأقوى Opus للمشاكل اللي وقفت قدامها.
😴 ضعيف في
الفلوس والسرعة: بيحرق الرصيد أسرع من غيره (نفس الاشتراك بيديك طلبات Claude أقل من طلبات Gemini)، وأبطأ من Composer. متندهلوش لتعديل لون.
🗣️ اندهله بـ
التاسك الكامل من البرومبت المفصل: «نفّذ المواصفات دي حرفياً بند بند، ولو بند مش واضح اسألني قبل ما تفترض» — الجملة الأخيرة دي بيحترمها فعلاً.
‹/›gpt.modelOpenAI · GPT-5.xm4
💪 شاطر في
التفكير التشخيصي — الباج الغامض اللي «المفروض يشتغل بس مش شغال»، والمنطق المعقد (زي تعارض قواعد تاسك حاسبة النتيجة). قوي في إنه يفكر بصوت عالي ويطلع بفرضيات عن سبب المشكلة.
😴 ضعيف في
ميله المعروف لـ«الفلسفة»: أحياناً بيطوّل، ويعيد هيكلة حاجات إنت مطلبتش تتلمس، ويضيف تحسينات من عنده. لازم تلجمه بحدود صريحة في الطلب.
🗣️ اندهله بـ
التشخيص قبل العلاج: «العداد بيظهر NaN لما الخانة فاضية — شخّص السبب واشرحهولي الأول، ومتعدلش أي حاجة غير الباج ده تحديداً».
‹/›gemini.modelGoogle · Gemini 3.xm5
💪 شاطر في
السياق الضخم — بيبلع مشروع كامل بكل ملفاته في نفَس واحد، فهو ملك «اقرا كل حاجة الأول وبعدين اتصرف». سريع ورصيده أرخص نسبياً، وقطاع من مطوري الواجهات بيفضلوه للفرونت إند والشغل البصري السريع.
😴 ضعيف في
في السلاسل الطويلة من التعليمات الدقيقة ممكن «يفلت» من بند أو اتنين في السكة — راجع مخرجاته على قايمة مواصفاتك بند بند.
🗣️ اندهله بـ
مهام القراءة الشاملة: «اقرا الأربع ملفات دول كلهم، لخصلي إيه المشترك في الستايل بينهم، وبعدين وحّد الألوان في كلهم».

وهتلاقي في القايمة غيرهم (DeepSeek وموديلات بتضاف باستمرار) — نفس المنهج معاهم كلهم: جرّب على تاسك صغير الأول قبل ما تأمّنه على تاسك عميل.

model_router.map — مين تندهله في كل خطوة بناء
خطوة البناءاندهلهصيغة الطلب اللي بيتنفذ بيها أحسن
1 · فهم وتخطيط التاسكClaude أو GPT«اقرا المتطلبات دي واكتبلي خطة تنفيذ من غير أي كود — عشان أراجعها الأول» — فصل التخطيط عن التنفيذ بيمنع نص المصايب.
2 · البناء الأول (الصفحة كاملة)Claude Sonnet«نفّذ المواصفات دي حرفياً بند بند، ولو بند غامض اسألني قبل ما تفترض» — أقصى استفادة من التزامه بالتفاصيل.
3 · باج منطقي غامضGPT (Opus لو استعصى)«شخّص واشرح السبب الأول، وبعدين صلّح الباج ده تحديداً من غير ما تلمس غيره» — التشخيص قبل العلاج + لجام التعديلات.
4 · التجميل والتفاصيل البصريةClaude أو Gemini«طبّق المعايير دي: [الصق وصفة محاضرة ٠٢]» — الجمال بيطلع من مواصفاتك، الموديل منفّذ.
5 · تعديلات صغيرة سريعةComposer أو Auto«غيّر X لـ Y بس» — طلب واحد محدد، سرعة، وصفر رصيد مع Auto.
6 · قراءة شاملة لكذا ملفGemini«اقرا الملفات دي كلها الأول، لخصلي فهمك، وبعدين نفّذ» — استغلال السياق الضخم مع فحص الفهم قبل التنفيذ.
  • استراتيجية الرصيد للطالب: Auto للصغائر (ببلاش) → Composer للتعديلات المتوسطة → ثبّت Claude للبناء الجاد والبرومبتات المفصلة → GPT للباج العنيد. كده الـ 20$ بتعيش الشهر.
  • حيلة التحكيم: واقف قدام مشكلة والموديل مصمم على حل مش عاجبك؟ افتح محادثة جديدة بموديل من عيلة تانية واعرض عليه نفس المشكلة — اختلاف «الشخصيتين» كتير بيفتح الباب.
  • غيّرت الموديل في نص المحادثة؟ أعد لصق المواصفات — الموديل الجديد شايف المحادثة لكن التزامه ببنودها بيبدأ من طلبك الجاي.
/**

قواعد اللعب في التاسكات

اقرا رسالة العميل مرتين. المرة الأولى هتفهم اللي قاله — المرة التانية هتلاحظ اللي مقالهوش. الفخ دايماً في التانية.

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

قاعدة المحاولات: التحسين والإصلاح ← كمّل في نفس المحادثة. الوكيل تاه أو النتيجة اتلخبطت خالص ← محادثة جديدة ببرومبت أذكى مستفيد من كل اللي اتعلمته. الرجوع مش فشل — الرجوع بمعلومات هو التقدم نفسه.

سجّل برومبتاتك. في كل تاسك، احتفظ بملف prompt_log.txt فيه كل برومبت جربته وإيه اللي حصل — ده جزء من تسليمك، وهو أثمن حاجة هتخرج بيها من المحاضرة.

التقييم مش على «الصفحة اشتغلت» — التقييم على رحلة برومبتاتك: هل المحاولة التالتة كانت أذكى من الأولى؟
*/
// ── ج · التاسكات — ٤ عملاء مستنيينك
task_01.ticket — صفحة «قريباً»
العميل: مكتب الأمانة للترجمة المعتمدةالتسليم: ملف HTML واحدالصعوبة: ⭐⭐محاولات متوقعة: 2–3
// acceptance_criteria
[ ]عداد تنازلي حقيقي (أيام/ساعات/دقايق/ثواني) لتاريخ 1 سبتمبر 2026 وبيتحدث كل ثانية
[ ]الصفحة تشتغل 100% من غير إنترنت — افصل الواي فاي وافتحها وجرّب
[ ]ألوان زيتوني/بيج فعلية ومتناسقة (مش أخضر فاقع) + RTL كامل
[ ]رقم الواتساب قابل للضغط (يفتح المحادثة) — لأن الزائر من الموبايل
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك الأول
🧨 الفخ
جملة «من غير إنترنت» بتفجّر البرومبت الساذج: الـ AI افتراضياً هيحط خط Google Fonts من الإنترنت — الصفحة هتفتح من غير نت بس بخط مكسور. لازم تطلب صراحةً: خطوط النظام فقط أو خط مضمّن، وصفر روابط CDN خارجية.
🔍 الغموض
«أخضر زيتوني وبيج» مش مواصفات — دي أحاسيس. شغلتك تترجمها لأكواد وتثبتها: مثلاً زيتوني #4A5D3A وبيج #F2EAD9. لو سبتها للـ AI هيجيب أخضر مختلف في كل محاولة.
⏰ فخ ثاني
«١ سبتمبر الجاي» — أنهي سنة؟ وبأنهي توقيت (مصر UTC+2)؟ العداد الغلط في التوقيت هيبان مظبوط عندك وغلط عند العميل. ثبّت التاريخ كاملاً في البرومبت.
trial_1
برومبت مباشر بكل المواصفات. المتوقع يبوظ: خط من الإنترنت + درجة الأخضر مش عاجباك.
trial_2
في نفس المحادثة: «شيل أي رابط خارجي، استخدم خطوط النظام، وغيّر الأخضر لـ #4A5D3A». اختبر: افصل النت وافتح الصفحة.
trial_3
صقل نهائي بمعايير محاضرة ٠٢: مسافات أسخى، هرمية العداد أوضح، زرار الواتساب هو الـ CTA الوحيد.
starter_template_01.txt
اعمل صفحة HTML واحدة self-contained بالكامل (بدون أي روابط خارجية أو CDN — خطوط النظام فقط) لصفحة «قريباً» لمكتب ترجمة، عربي RTL. عداد تنازلي بيتحدث كل ثانية حتى تاريخ ___ (التاريخ كامل + التوقيت). الألوان: ___ (كود الزيتوني) و___ (كود البيج). زرار واتساب قابل للضغط برقم ___ بصيغة wa.me. طبّق: بطل واحد في الشاشة (العداد)، تباين عالي، وخط واحد.
task_02.ticket — منيو ثنائي اللغة
العميل: مطعم بيت الشامالتسليم: ملف HTML واحدالصعوبة: ⭐⭐⭐⭐محاولات متوقعة: 3–4
// acceptance_criteria
[ ]كل صنف: عربي فوق + إنجليزي تحته + السعر — والتلاتة متحاذيين صح بدون تكسير اتجاهات
[ ]زرار تبديل العملة بيغير كل الأسعار فوراً (÷90 للدولار، بخانتين عشريتين)
[ ]الأرقام والعلامة ($/ل.س) في مكانها الصح في الحالتين — مفيش «$25» بقت «25$» بالغلط
[ ]3 أقسام × 4 أصناف بأسماء أكلات حقيقية، وإحساس «تراثي دافي» فعلاً
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك الأول
🧨 الفخ
ده وحش الـ Bidi (النص ثنائي الاتجاه) — أصعب مشكلة في صفحات العربي: سطر عربي RTL وتحته سطر إنجليزي LTR وجنبهم رقم وعلامة عملة. البرومبت الساذج هيطلع علامات في أول السطر بدل آخره وأرقام مقلوبة. الحل: اطلب صراحةً dir="rtl" للصفحة، وdir="ltr" لسطر الإنجليزي تحديداً، وغلاف span منفصل للسعر.
🔍 الغموض
«تراثي دافي مو مودرن بارد» — إحساس مش مواصفات. ترجمتها: ألوان ترابية دافية (نبيتي/ذهبي/كريمي غامق)، زخرفة خفيفة في الفواصل، خط عربي كلاسيكي الطابع. اكتب الترجمة دي في البرومبت بدل ما تنقل كلام العميل زي ما هو.
🧮 المنطق
التقسيم على 90 بيطلع كسور طويلة (25000÷90 = 277.777…) — لو منصصتش على التقريب، الأسعار هتطلع مضحكة. حدد: خانتين عشريتين للدولار، والليرة أرقام صحيحة بفواصل آلاف.
trial_1
برومبت كامل. المتوقع يبوظ: علامة $ في الناحية الغلط وسطر الإنجليزي محاذاته ملخبطة.
trial_2
صلّح الـ bidi بأوامر صريحة: «سطر الإنجليزي جواه dir=ltr ومحاذي يمين مع باقي الكارت، والسعر في span مستقل». المتوقع يبوظ: كسور الدولار.
trial_3
ثبّت التقريب والفواصل. اختبر بشراسة: بدّل العملة عشر مرات ورا بعض — في أصناف بتبوظ بعد التبديل المتكرر؟
trial_4
اللمسة التراثية: لو طلعت «بلاستيك»، اطلب مرجعية محددة: «زي منيوهات المطاعم الدمشقية القديمة — ورقي دافي مش لامع».
starter_template_02.txt
اعمل صفحة HTML واحدة لمنيو مطعم شامي، عربي RTL. كل صنف: الاسم عربي، وتحته الاسم إنجليزي داخل عنصر dir="ltr" لكن محاذي مع الكارت، والسعر في span مستقل. زرار يبدّل العملة: ليرة (أرقام صحيحة بفاصلة آلاف) ⇄ دولار (القسمة على ___ وتقريب لخانتين). الأقسام والأصناف: ___ (اكتبهم بنفسك بالعربي والإنجليزي). الطابع: ___ (ترجمتك لكلمة «تراثي دافي» بألوان hex).
task_03.ticket — حاسبة النتيجة
العميل: أ. منى — مدرّسة لغاتالتسليم: ملف HTML واحدالصعوبة: ⭐⭐⭐⭐محاولات متوقعة: 3–4
// acceptance_criteria
[ ]الحساب لحظي مع الكتابة (بدون زرار «احسب») — مجموع + نسبة + تقدير
[ ]قاعدة «راسب في مادة = راسب في الكل» شغالة، والمادة الراسبة بتتلون أحمر فوراً
[ ]الحالات الحدية آمنة: خانة فاضية، درجة 150، درجة سالبة، حروف بدل أرقام — مفيش NaN ولا انهيار
[ ]زرار «طالب جديد» بيمسح كل حاجة ويرجع الألوان لطبيعتها
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك الأول
🧨 الفخ
فخّان: (1) تعارض القواعد — طالب مجموعه 88% بس واخد 40 في مادة: النسبة بتقول امتياز والقاعدة بتقول راسب. لو مانصصتش إن قاعدة الرسوب بتكسب، الـ AI هيختار لوحده وغالباً غلط. (2) الحالات الحدية — أول ما أ. منى هتسيب خانة فاضية هيظهرلها «NaN%» وهتفقد الثقة في الأداة كلها.
🔍 الترجمة
كلام العميلة فيه جدول قرار مخفي — استخرجه واكتبه صريح في البرومبت: 85–100 امتياز، 75–84.99 جيد جداً… إلخ، وحدود كل شريحة (هل الـ 75 بالظبط جيد جداً؟). الغموض في الحدود = نتايج متقلبة.
trial_1
برومبت بالقواعد كاملة. اختبر فوراً بالقيم الشريرة: خانة فاضية، 150، -5، «abc». المتوقع: حاجة منهم هتكسر الصفحة.
trial_2
اطلب التحصين: «أي إدخال غير صالح يتجاهل من الحساب وتظهر رسالة تنبيه صغيرة تحت الخانة، والدرجة محصورة 0–100».
trial_3
اختبر التعارض: 5 مواد فيهم واحدة 40 والباقي 95+. لازم «راسب» بوضوح مع تلوين المادة. لو لأ — نصّص القاعدة تاني بصيغة أقوى: «قاعدة الرسوب لها الأولوية المطلقة على النسبة».
trial_4
جمّل بمعايير ٠٢: التقدير النهائي هو بطل الشاشة، والأحمر للرسوب بس مش مفروش.
starter_template_03.txt
اعمل صفحة HTML واحدة عربي RTL: اسم طالب + 5 مواد (___ سمّيهم) كل درجة من 100. الحساب لحظي: المجموع، النسبة، والتقدير حسب الجدول: ___ (اكتب الشرائح بحدودها الدقيقة). قاعدة حاسمة لها الأولوية المطلقة: أي مادة أقل من 50 ⇒ التقدير «راسب» مهما كانت النسبة، وخانة المادة تتلون أحمر. حصّن الإدخال: القيم خارج 0–100 أو غير الرقمية تُرفض برسالة لطيفة بدون كسر الحساب. زرار «طالب جديد» يمسح كل شيء.
task_04.ticket — صفحة العرض المحدود
العميل: كابتن شريف — مدرب لياقةالتسليم: HTML + رسالة رد على العميلالصعوبة: ⭐⭐⭐⭐⭐محاولات متوقعة: 4+
// acceptance_criteria
[ ]hero قوي بعنوان ضخم + عداد عرض + فورم (اسم/واتساب) بـ validation ورسالة شكر بعد الإرسال
[ ]«صور العضلات» اتحلت من غير صور خارجية (الصفحة self-contained) — فكّر: SVG/أشكال/تدرج hero واحد
[ ]أساسيات السيو المنطقية موجودة: title وmeta description وعناوين هرمية بكلمات البحث
[ ]رسالة رد مهنية على الكابتن بتشرح بلطف حقيقة «الأول على جوجل» — دي جزء من التسليم
🔐 افتح التحليل — بعد ما تحاول تفكك الطلب بنفسك الأول
🧨 الفخ
أخطر فخ في الشغل الحر كله: الطلب المستحيل المتغلف في حماس. «الأولى على جوجل» مش خاصية بتتكتب في برومبت — دي نتيجة شهور من السيو والمحتوى والمنافسة. المحترف مش بينفذها ولا بيتجاهلها: بيديرها — ينفذ الممكن (أساسيات السيو في الصفحة) ويشرح للعميل الباقي بلغة تحافظ على حماسه.
🔍 الترجمة
«تكسر الدنيا زي الأجانب» = هرمية عدوانية (عنوان ضخم جداً)، عد تنازلي، ألوان جريئة عالية التباين، CTA صارخ واحد. ترجمها كده — متبعتش للـ AI كلمة «تكسر الدنيا» وتستنى معجزة. و«صور العضلات» من غير صور حقيقية = قرارك الإبداعي: silhouette بـ SVG أو أرقام إنجازات ضخمة بدل الصور.
⚖️ الدرس
التاسك ده بيعلمك إن في طلبات مش برومبتات — محادثات. جزء من التسليم رسالة للعميل: إيه اللي اتعمل، وإيه اللي محتاج شغل من نوع تاني. صياغة الرسالة دي مهارة مترجم أصيلة.
trial_1
جرّب تبعت كلام الكابتن زي ما هو للـ AI. اتفرج على الكارثة (صور مكسورة من النت، تصميم عشوائي) — التجربة دي مقصودة: شوف بعينك ليه الترجمة لمواصفات هي شغلتك.
trial_2
محادثة جديدة ببرومبت مُترجَم: مواصفات الـ hero والعداد والفورم والبديل البصري للصور. المتوقع يبوظ: الـ validation ورسالة الشكر.
trial_3
حصّن الفورم (رقم واتساب مصري 11 رقم يبدأ بـ 01، الاسم مطلوب) ورسالة الشكر تستبدل الفورم مش تظهر تحته.
trial_4
أساسيات السيو + اكتب رسالة الرد على الكابتن بنفسك (مش بالـ AI الأول — جرّب صياغتك، بعدين حسّنها بيه).
starter_template_04.txt
اعمل landing page عربي RTL بملف HTML واحد self-contained لعرض اشتراك تدريب لياقة: hero بعنوان ضخم ___ (اكتب العنوان بنفسك) وعداد تنازلي لنهاية العرض ___ (التاريخ)، بديل بصري للصور: ___ (قرارك: SVG silhouette / أرقام إنجازات). فورم: الاسم مطلوب + واتساب مصري (11 رقم يبدأ 01) مع رسائل خطأ عربية، وعند الإرسال تستبدل الفورم رسالة شكر. ضمّن أساسيات SEO: title وmeta description بكلمات ___ (كلمات البحث المستهدفة).
// what to submit
deliverables.md — تسليمك
[1]٤ ملفات HTML — كل تاسك ملف باسمه (task_01.html …)
[2]ملف prompt_log.txt لكل تاسك: كل برومبت جربته + إيه اللي حصل + إيه اللي غيرته وليه
[3]رسالة الرد على كابتن شريف (تاسك ٤) — نص عربي مهني
[4]سطرين انطباع: إيه الفرق اللي حسيته بين Antigravity وCursor؟
student@motrjim:~/vibe-coding $ exit — Process finished with exit code 0
كورس Vibe Coding · المحاضرة ٠٣: بيئات الشغل والتاسكات الأولى
أكاديمية مُترجم الترجمة في عصر الذكاء الاصطناعي

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

Scroll to Top