Chapter 5: Few-Shot Prompting: Debugging in Practice Where Examples Speak Louder Than Words

In previous chapters, we learned how to interpret error messages, split files, and manage context. This chapter introduces the most advanced Prompt technique in Vibe Coding—Few-Shot Prompting.

When you find that no matter how you explain, the AI just doesn't understand the layout, animation effects, or data structure you want, this technique will be your ultimate weapon.

What is Few-Shot Prompting?

In Prompt Engineering:

Zero-Shot: Direct instructions. For example: "Help me write a beautiful button."
One-Shot: Provide one example. For example: "Help me write a button with a style like this: <button className="bg-red-500 rounded-lg p-2">Button</button>."
Few-Shot: Provide multiple examples to let the AI infer the pattern.

Why is Few-Shot so powerful? Because human language is full of ambiguity. What you call "high-tech feel" might be completely different from what the AI understands. Instead of writing 500 words to explain "high-tech feel," just show it two perfect code snippets.

Practical Scenario 1: Unifying Team UI Style

Suppose the cards in your project all follow a glassmorphism style, and you now need the AI to write a new "Contact Us" card.

❌ Bad Prompt (Zero-Shot)

Help me write a "Contact Us" card with a form. The background should have a glassmorphism style and look premium. (The AI might use backdrop-blur-sm, but your project actually uses backdrop-blur-md bg-white/10, causing the new card to look out of place.)

✅ Advanced Prompt (One-Shot)

I need a "Contact Us" form card.

[UI Style Reference] Please strictly follow the existing glassmorphism style in our project for the outermost div:
<div className="glass p-6 rounded-2xl border border-primary/20 shadow-xl backdrop-blur-md bg-background/50">
  // Content
</div>
Based on this style, implement a form for name, email, and message content.

By providing specific ClassName examples, the AI's output will perfectly match your project, saving you time tweaking Tailwind parameters.

Practical Scenario 2: Debugging Complex Data Structure Transformations

Suppose you receive flat data from the backend and need to convert it into a tree structure for a menu. The AI's algorithm keeps having bugs, sometimes missing child nodes.

❌ Bad Prompt

Your tree structure conversion function is wrong. Child nodes aren't correctly nested under parents. Please fix it. (The AI can only guess where the mistake is, potentially making it worse.)

✅ Advanced Prompt (Few-Shot)

Your buildTree function has a bug. To clarify the expected behavior, refer to the following input/output examples:

[Example 1] Input: [{ id: 1, parent_id: null }, { id: 2, parent_id: 1 }] Expected Output: [{ id: 1, children: [{ id: 2, children: [] }] }]

[Example 2 (Current Bug Scenario)] Input: [{ id: 3, parent_id: 4 }, { id: 4, parent_id: null }] Expected Output: [{ id: 4, children: [{ id: 3, children: [] }] }]

Based on these input/output examples, review and fix your code.

When the AI sees clear input/output examples, its internal reasoning engine activates. It will automatically test its code against the examples and quickly discover the bug where "child nodes appear before parent nodes in the array."

Practical Scenario 3: Teaching the AI to Use Unfamiliar Third-Party Libraries

Sometimes you want to use a very new library (e.g., the latest Framer Motion syntax or a recently updated API), but the AI's knowledge is outdated.

In such cases, leverage Cursor's @Web feature or directly paste official documentation examples.

[Task] I want to implement a scroll-triggered fade-in animation using Framer Motion.

[Official Latest Syntax Reference] Please implement it according to the latest official documentation syntax, avoiding the old useViewportScroll:
import { motion, useScroll } from "framer-motion"

function Component() {
  const { scrollYProgress } = useScroll()
  return <motion.div style={{ scaleX: scrollYProgress }} />
}
Refer to the above example to add a scroll fade-in effect to my PricingCard.

Conclusion

Stop trying to describe complex logic or visual effects using "human natural language" alone.
"Show, don't tell."

Give the AI code snippets, JSON data examples, or full error logs. When you master Few-Shot Prompting, you'll find the AI transforms from a "clueless intern" into a "senior architect who gets it immediately."

Congratulations on completing the entire Vibe Coding Core Principles and Debugging in Practice course! Armed with these skills, go conquer those complex business projects!

Chapter Summary

Understand core concepts and principles
Master implementation methods and techniques
Familiar with common issues and solutions
Able to apply in real projects

Common Debugging Scenarios

TypeScript Type Errors

// ❌ Before: Type error
export default function Page({ params }: { params: { id: string } }) {
  return <div>{params.id}</div>;
}

// ✅ After: Promise params in Next.js 15
export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  return <div>{id}</div>;
}

React State Not Updating

// ❌ Before: Common closure bug
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1); // Stale closure!
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <div>{count}</div>;
}

// ✅ After: Functional update
useEffect(() => {
  const timer = setInterval(() => {
    setCount((prev) => prev + 1); // Always correct
  }, 1000);
  return () => clearInterval(timer);
}, []);

API Call Not Working

// ❌ Before: Missing async/await
async function fetchUsers() {
  const data = fetch('/api/users'); // Returns Promise, not data!
  return data;
}

// ✅ After: Proper async handling
async function fetchUsers() {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const data = await response.json();
  return data;
}

AI Prompt Patterns for Debugging

| Pattern | Example | |---------|---------| | Describe error | "I get 'Cannot read property of undefined' when clicking the button" | | Show code | "Here's my component: [code]. Why is count always 0?" | | Share stack trace | "This error occurs after login: [stack trace]" | | State expected vs actual | "Expected users array but got: undefined" |

Debugging Prompt Template

I'm getting this error in my [framework] app:

Error: [paste error message]

Relevant code:
[paste code]

What I expect:
[describe expected behavior]

What actually happens:
[describe actual behavior]

Steps to reproduce:
1. [step 1]
2. [step 2]

Using Browser DevTools

Console Tab

| Command | Purpose | |---------|---------| | console.log() | Print values for inspection | | console.error() | Highlight errors in red | | console.warn() | Highlight warnings in yellow | | console.table() | Display arrays/objects as table | | console.time() / console.timeEnd() | Measure execution time |

Network Tab

| Feature | What to Look For | |---------|------------------| | Status codes | 200 (OK), 404 (Not Found), 500 (Server Error) | | Response time | Slow requests (>500ms) need optimization | | Request payload | Correct data being sent? | | Response body | Expected format and content? | | CORS errors | Cross-origin requests blocked? |

Summary

AI-assisted debugging combines traditional tools (DevTools, console) with AI prompts to find and fix bugs faster.

Key takeaways:

Common bugs: stale closures, async mistakes, type errors |
AI debugging prompts: error + code + expected vs actual |
Browser DevTools: Console (logs), Network (requests), Sources |
console.table() for structured data inspection |
Functional state updates prevent stale closure bugs |
Always check HTTP status codes in API responses |
Break complex problems into smaller prompts for AI |
Test fixes in isolation before integrating |

What's Next: Testing

This course continues with AI-assisted testing.