تقسيم المهام الكبيرة إلى خطوات
فكّك الميزة إلى أجزاء يمكن توجيه AI لتنفيذها
تقسيم المهام الكبيرة إلى خطوات درس مجاني في Vibe Coding على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vibe Coding، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vibe Coding 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Big Tasks Break AI
Ask AI to "build me a todo app with login, a database, and dark mode" in one prompt and you'll often get a tangled mess — half-finished, buggy, impossible to review. AI, like people, does its best work on one clear thing at a time.
The skill in this lesson is decomposition: breaking a big feature into small, promptable chunks you build and verify one by one.
Why Small Steps Win
Building in small steps with AI gives you huge advantages:
- Reviewable — you can actually read 20 lines, not 500.
- Testable — run each piece and confirm it works before moving on.
- Recoverable — if step 3 breaks, steps 1–2 are still safe.
- Steerable — you correct course early, not after a giant mess.
Small steps are how pros ship reliable apps with AI.
Plan First, Then Prompt
Before writing code, have the AI help you plan. Ask it to break your feature into a numbered list of steps. You're not building yet — you're getting a roadmap you can follow and reorder.
This planning prompt costs one message and saves you from building the wrong thing.
You are a senior engineer. Don't write code yet. I want to build a 'save favorite articles' feature for my web app. Break this into a numbered list of small, buildable steps, from simplest to most complete. Keep each step to one clear task.A Good Decomposition
A solid plan turns one scary feature into a checklist. For our "favorites" feature, the AI might return:
- 1. Add a star button to each article card.
- 2. Toggle the star's filled/empty state on click.
- 3. Store the favorited IDs in the browser.
- 4. Load saved favorites when the page opens.
- 5. Add a "My Favorites" view that filters the list.
Now each line is its own small prompt.
Prompt One Step at a Time
With the plan in hand, build step 1 only. Tell the AI explicitly to stop there. This keeps the output small and focused.
Notice the constraint: only this step. That prevents the AI from racing ahead and writing the whole feature in one unreviewable blob.
We're following our plan. Build ONLY step 1: add a star button to each article card. Use vanilla JS and HTML. Don't implement saving or toggling yet — just render the button. Return only the code for this step.Verify Before You Continue
After each step, run it and check. Does the button appear? Good — move on. Broken? Fix this step before adding more. Stacking new code on a broken foundation is how vibe-coded apps fall apart.
Here's a tiny, self-contained piece of step 2 logic — toggling a saved state — that you could verify on its own.
// Step 2 logic, tested in isolation
function toggleFavorite(savedIds, id) {
if (savedIds.includes(id)) {
return savedIds.filter((x) => x !== id);
}
return [...savedIds, id];
}
let ids = [];
ids = toggleFavorite(ids, 7);
console.log(ids);
ids = toggleFavorite(ids, 7);
console.log(ids);Carry Context Between Steps
Each new step depends on the last. When you prompt for step 2, remind the AI what step 1 produced — paste the relevant code or describe it. In agentic tools like Claude Code or Cursor, the AI can see your files, so just point at them.
Without this context, the AI may invent different names and break the connection between steps.
Now build step 2: toggle the star when clicked. Here is the button from step 1 so you match its class and structure:
<button class="star-btn" data-id="42">☆</button>
Write the click handler that switches between ☆ and ★. Return only the JS for this step.The Vertical Slice Approach
Another way to decompose: build one tiny end-to-end slice first, then widen it. Instead of building the whole UI, then the whole backend, make ONE feature work all the way through — then add the rest.
- Slice 1: favorite a single hard-coded article, save it, reload it.
- Then: apply that working flow to all articles.
A thin working slice beats many half-built layers.
Let's build the thinnest working version first. Make ONLY this work end-to-end: clicking a star on one article saves its id to localStorage and re-reading localStorage shows it's saved. Skip the UI polish and the favorites page for now.Decomposing in App Builders
Even in prompt-to-app tools like Bolt, v0 and Lovable, small steps win. Generate the first screen, preview it, then ask for the next change. Don't request the entire app in your opening prompt.
- Prompt 1: "A landing page with a hero and a sign-up button."
- Prompt 2: "Now add a pricing section below the hero."
- Prompt 3: "Make the sign-up button open a modal."
You build a real app through a conversation, not one giant ask.
Keep a Running Checklist
Track your steps so you and the AI stay aligned. Keep a simple checklist in your prompt or a notes file and mark progress. This becomes the shared memory of your build.
In Claude Code, a TODO.md or CLAUDE.md works great — the agent reads it and knows what's done and what's next.
Here is our progress. Continue from the first unchecked item.
[x] 1. Star button on each card
[x] 2. Toggle star on click
[ ] 3. Save favorited IDs to localStorage
[ ] 4. Load favorites on page open
[ ] 5. 'My Favorites' filter view
Build step 3 only.Knowing When to Split Further
If the AI's output for one "step" is still large or buggy, that step was too big — split it again. Signs a step needs breaking down:
- The answer is hundreds of lines.
- It touches many files at once.
- You can't tell if it works by reading it.
There's no shame in tiny steps. The smaller the step, the more control you keep.
Quick Check
You ask AI to build a whole feature at once and get 400 lines you can't follow. What's the best next move?
Recap: Build in Steps
Decomposition is how you tame big builds with AI:
- Have the AI plan the feature as a numbered list first.
- Prompt one step at a time and tell it to stop there.
- Run and verify each step before moving on.
- Carry context forward and keep a checklist.
- Prefer a thin end-to-end slice, and split further when a step gets too big.
Next: pinning the exact tech stack and style so AI builds it your way.
تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 25
- الدروس
- 100
الأسئلة الشائعة
هل درس «تقسيم المهام الكبيرة إلى خطوات» مجاني؟
نعم — نص درس «تقسيم المهام الكبيرة إلى خطوات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vibe Coding، انتقل إلى CoddyKit PRO. تتضمن دورة Vibe Coding 4 دروس في المجموع.
ماذا ستتعلم في «تقسيم المهام الكبيرة إلى خطوات»؟
فكّك الميزة إلى أجزاء يمكن توجيه AI لتنفيذها تتمرن على Vibe Coding مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vibe Coding؟
لا تُشترط خبرة سابقة. Vibe Coding على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «تقسيم المهام الكبيرة إلى خطوات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vibe Coding هذا؟
نعم. كل درس في Vibe Coding يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الأدوار والقيود
- أمثلة Few-Shot
- تقسيم المهام الكبيرة إلى خطوات
- تحديد التقنية والأسلوب