Prompting: The Core Skill

The quality of your vibe coding output is directly determined by the quality of your prompts. A vague prompt gets vague code. A precise prompt gets working code on the first try.

This lesson teaches the techniques that separate frustrating vibe coding (“it keeps breaking”) from productive vibe coding (“it just works”).

🔄 Quick Recall: In the previous lesson, you set up your vibe coding tool and built a simple portfolio page. Now you’ll learn the prompting techniques that make every build faster and more reliable.

The Specificity Spectrum

Compare these prompts for the same feature:

Vague (will need many iterations):

“Add user authentication”

Specific (likely works first try):

“Add email/password authentication using Supabase Auth. Create a signup page at /signup with email and password fields. Create a login page at /login. After login, redirect to /dashboard. Add a logout button in the header. Protect /dashboard so unauthenticated users are redirected to /login.”

The specific prompt includes: technology choice, page routes, form fields, behavior after auth, navigation elements, and access control rules. The AI builds exactly what you described.

The Prompt Checklist

For every feature request, include:

• What it does (the behavior)
• Where it goes (page, component, section)
• How it looks (styling, layout)
• What technology to use (if you have a preference)
• Edge cases (what happens when something goes wrong)

✅ Quick Check: You want a search bar on your app. What details should your prompt include beyond “add a search bar”? (Answer: Where it goes (header? dedicated page?), what it searches (product names? all content?), how results display (dropdown? separate page?), debounce behavior (search as you type or on enter?), and empty state (what shows when no results match).)

Technique 1: Context Layering

Start your prompt by telling the AI about your project’s context before making your request:

My project is a task management app built with Next.js 14, TypeScript,
Tailwind CSS, and Supabase. The app has a dashboard at /dashboard that
shows a list of tasks in a table. Each task has a title, status, priority,
and due date.

Now: Add a filter bar above the task table that lets users filter by
status (all/todo/in-progress/done) and priority (all/low/medium/high).
Filters should update the table in real time without page reload.

The context paragraph prevents the AI from guessing your tech stack, file structure, or naming conventions.

Technique 2: Stepwise Prompting

Don’t ask for an entire app in one prompt. Build feature by feature:

Step 1: "Create a landing page with a hero section, features grid, and footer"
→ Test it, verify it works

Step 2: "Add a signup form that collects name, email, and password"
→ Test it, verify it works

Step 3: "Connect the signup form to Supabase Auth"
→ Test it, verify it works

Step 4: "Create a dashboard page that only authenticated users can access"
→ Test it, verify it works

Each step produces a quick win you can verify before moving on. If step 3 breaks something, you know exactly where the problem is.

Rule: Test after every step. Don’t batch 5 features into one prompt — if something breaks, you won’t know which change caused it.

Technique 3: Research-Plan-Implement

For complex changes to existing code, use three separate prompts:

Prompt 1 — Research:

“Look at my codebase. Summarize how the authentication system works, which files are involved, and how user data flows from login to the dashboard.”

Prompt 2 — Plan:

“I want to add role-based access (admin vs regular user). Based on your understanding of the codebase, create a step-by-step plan. List the files you’ll modify and what changes you’ll make in each.”

Prompt 3 — Implement:

“The plan looks good. Implement step 1 — add the role field to the user table and update the signup flow.”

This three-step pattern prevents the AI from making changes it doesn’t fully understand. You review the plan before any code is written.

✅ Quick Check: Why should you review the AI’s plan before letting it implement? (Answer: The AI might misunderstand your codebase’s architecture or propose changes that break existing features. By reviewing the plan, you catch problems before code is written — much easier than debugging after implementation.)

Technique 4: Role Setting

Tell the AI who it is before making requests:

“Act as a senior full-stack engineer specializing in Next.js and Supabase. You prioritize clean code, type safety, and error handling.”

Role setting focuses the AI’s output. Without it, you get generic code. With it, you get code that follows the patterns a senior engineer would use.

Managing Context

Your AI’s context window — the information it can reason about at once — is limited. Keep it clean:

Do:

• Start new conversations for new features
• Include only relevant files when asking about specific code
• Use rules files for persistent project context

Don’t:

• Keep adding to one long conversation indefinitely
• Include your entire codebase when fixing one function
• Ignore when responses start degrading (context poisoning)

Context poisoning is the most common vibe coding frustration. The AI makes an error early in the conversation, then references that error in every subsequent response. The fix: start a fresh conversation with clean context.

Common Prompt Patterns

Practice Exercise

1. Choose a small app idea (recipe saver, habit tracker, bookmark manager)
2. Write a detailed prompt using the specificity checklist (what, where, how, technology, edge cases)
3. Build the first version with one prompt
4. Use stepwise prompting to add 3 features, one at a time
5. If something breaks, start a fresh conversation instead of continuing

Key Takeaways

• Specific prompts produce working code — include what, where, how, technology, and edge cases
• Context layering: describe your project before making requests
• Stepwise prompting: one feature at a time, test between each
• Research-Plan-Implement: for complex changes, plan before coding
• Start fresh conversations when context degrades (context poisoning)
• Role setting focuses the AI on the quality level you want

Up Next

In the next lesson, you’ll build a complete application from scratch — applying every prompting technique to create something real.