vibecoding مترجم.pptxبببببببببببببببببببببببببببببببببببببب

AbdalkreemZuod 8 views 17 slides Oct 18, 2025
Slide 1
Slide 1 of 17
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17

About This Presentation

ب3ثيب


Slide Content

Vibe Coding Abdulkareem Alzyod

المحتويات

ماذا نعني بمصطلح Vibe Coding

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

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

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

Developer Workflow

الادوات المستخدمة في Vibe Coding

Vibe Coding: دليل كتابة الأوامر 1. النية Intent ماذا تريد أن تبني؟ 2. الإحساس Vibe كيف يجب أن يُشعَر به؟ 3. النمط / القيود tyle / Constraints ما هي التقنيات، واختيارات التصميم، والميزات المطلوبة؟ 4. تنسيق المخرجات Output Format ما الشكل الذي تريد أن يُقدَّم به الناتج؟

Vibe Coding: Prompt Guide مثال على أمر Example Prompt \ أنشئ صفحة استقبال لتطبيق تأمل. يجب أن يكون الإحساس هادئًا وبسيطًا مع خلفية متدرجة ناعمة وحركات بطيئة. استخدم React و Tailwind أعِد الكود الكامل للمكوّن."

الكلمات المفتاحية Visual Motion Tone Style soft, dreamy smooth, slow, fluid playful, formal retro, brutalist cozy , warm springy, elastic gentle, sharp minimal, maximal dark, moody quick, responsive calming, bold glassy, grainy

Vibe Coding: دليل الأوامر أوامر التحسين Refinement Prompts اجعل الإحساس أخف وأكثر مرحًا." استخدم خطوط serif لإضفاء طابع كلاسيكي قديم "أضف تأثيرات عند التمرير hover تبدو ناعمة." " هل يمكنك تبسيط التصميم layout؟"

Best Practices

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

Vibe Coding: المخاطر التناقضات التكرار الغموض التنميط الهلوسة التحيز التعميم المفرط السمية

Vibe Coding: الفوائد سهولة الوصول : تُخفف من صعوبة دخول مجال تطوير البرمجيات، مما يُمكّن غير المبرمجين من إنشاء التطبيقات. الكفاءة : تُسرّع عملية التطوير من خلال أتمتة مهام البرمجة الروتينية. الإبداع : تُتيح للمطورين التركيز على التصميم والوظائف عالية المستوى.

ملخص إن برمجة coding Vibe ليست نهاية البرمجة - بل هي بداية لنوع جديد من التعاون الإبداعي بين الإنسان والذكاء الاصطناعي.