Vibe Coding · درس

تزويد AI بالسياق

شارك الملفات والأهداف والتقنيات ليتلاءم AI مع مشروعك

تزويد AI بالسياق درس مجاني في Vibe Coding على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vibe Coding، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vibe Coding 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Why Context Changes Everything

The same prompt can produce wildly different code depending on what the AI knows about your project. A prompt with no context makes the AI guess your framework, your style, even your file names.

Give it context, and the code drops right into your project — same conventions, same style, no rewrites. This lesson is about feeding the AI the right background.

Three Kinds of Context

Useful context comes in three flavors:

Project context — your tech stack, framework, conventions
Code context — the actual files and snippets you're working with
Goal context — the bigger 'why' behind the task

The best prompts weave in all three so the AI builds something that truly fits.

Project Context: Your Stack

Always tell the AI what you're building with. 'React with Tailwind' produces very different code than 'plain HTML and CSS'. Naming your stack stops the AI from importing libraries you don't have.

"This project uses React, TypeScript and Tailwind CSS.
 We use functional components and hooks only — no class
 components. Build a reusable <Avatar /> component that
 shows a circular user image with a fallback initial."

Code Context: Show Your Files

The biggest upgrade to any prompt is pasting the actual code you're working with. Now the AI matches your variable names, your style, and your existing structure instead of inventing new ones.

"Here's my current cart code:

  let cart = [];
  function addItem(name, price) {
    cart.push({ name, price });
  }

Add a function removeItem(name) that removes the first
matching item, and a total() function that sums the prices."

Editors Share Context Automatically

Tools like Cursor and Claude Code can read your open files and project structure for you. In Cursor you can tag files with @filename to pull them into the prompt.

This is why AI-native editors feel smarter than a plain chatbot — they already know your codebase.

In Cursor's chat:

"Look at @cart.js and @checkout.js.
 The total in checkout doesn't match the cart.
 Find why and fix it."

Goal Context: The 'Why'

Telling the AI why you're doing something helps it make smarter choices. If it knows the app is for kids, or must work offline, or needs to be ultra-fast, it adapts the code accordingly.

"This is a flashcard app for young children, so the UI must
 be large, colorful, and tappable with no small targets.
 Build the answer-reveal button with that in mind."

Context Helps the AI Match Your Style

When you show existing code, the AI mirrors your conventions. Here's a style the AI would copy if you pasted it — notice the arrow functions and naming. Asking for 'one more like this' keeps the codebase consistent.

This snippet runs on its own so you can see the pattern in action.

const formatPrice = (n) => '$' + n.toFixed(2);
const formatPercent = (n) => n.toFixed(0) + '%';

// Ask AI: "Add formatDate in this same arrow-function style."
console.log(formatPrice(12.5));
console.log(formatPercent(0.42 * 100));

A Project Context File

Pro move: keep a short context file the AI reads every time. Cursor uses .cursorrules and Claude Code uses CLAUDE.md. Put your stack, conventions and do/don't rules there once.

Now you never have to repeat yourself in every prompt.

Example CLAUDE.md:

# Project Conventions
- Stack: Next.js + Tailwind
- Use TypeScript, no 'any'
- Components in /components, one per file
- Prefer small, pure functions
- Never add a dependency without asking

Too Much Context Is Real Too

Context is powerful but not free. Dumping ten unrelated files confuses the AI and buries the part that matters. Share what's relevant to this task, not your whole project.

Aim for: the file you're changing, the file it talks to, and a one-line description of the stack.

Context Stops Hallucinations

When the AI lacks context, it sometimes invents function names, files or APIs that don't exist — called a hallucination. Giving real code grounds it in reality.

If the AI keeps referencing things you never wrote, that's a sign: it needs more context, not a better model.

Symptom of missing context:

  AI: "Just call your existing saveUser() helper."
  You: "...I don't have a saveUser() helper."

Fix: paste the real file so the AI sees what exists.

A Fully-Contextualized Prompt

Here's everything combined: stack, real code, and the goal. This is the kind of prompt that gets production-ready code that fits on the first try.

"Stack: plain HTML/CSS/JS, single index.html. (PROJECT)

Here's my current toggle code:
  const btn = document.querySelector('#theme');
  btn.onclick = () => document.body.classList.toggle('dark'); (CODE)

Goal: I want the theme choice to persist after refresh, since
 users hate re-toggling every visit. Add localStorage. (GOAL)"

Quick Check

The AI keeps suggesting you call functions and files that don't exist in your project. What's the most likely cause and fix?

Recap: Ground the AI in Your World

Context turns generic code into code that fits. Always consider sharing:

Project context — your stack and conventions
Code context — the real files (tag them in Cursor/Claude Code)
Goal context — the 'why' behind the task

Keep a CLAUDE.md or .cursorrules so you don't repeat yourself, and share only what's relevant. Next: how to iterate — refining a prompt step by step instead of starting over.

الأسئلة الشائعة

هل درس «تزويد AI بالسياق» مجاني؟

نعم — نص درس «تزويد AI بالسياق» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vibe Coding، انتقل إلى CoddyKit PRO. تتضمن دورة Vibe Coding 4 دروس في المجموع.

ماذا ستتعلم في «تزويد AI بالسياق»؟

شارك الملفات والأهداف والتقنيات ليتلاءم AI مع مشروعك تتمرن على Vibe Coding مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vibe Coding؟

لا تُشترط خبرة سابقة. Vibe Coding على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «تزويد AI بالسياق»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vibe Coding هذا؟

نعم. كل درس في Vibe Coding يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vibe Coding