Prompt Engineering

Comic Strip 1: The Prompt Formula

Bad prompts get you nowhere. Good prompts follow a formula: Context + Problem + What You Tried + What You Need

Bad Prompt

"My API doesn't work"

Why it fails: No context, no specifics, no information to help diagnose.

Good Prompt

"I'm getting a 404 error in my Flask app when trying to POST to /api/login. The route exists and works in Postman but fails from my React frontend. Here's the fetch call: [code]. Here's my Flask route: [code]. What's the likely issue?"

Why it works: Has context, specific error, what works vs doesn't, and code provided.

Prompt Builder Tool

Build your prompt step-by-step and see it improve in real-time!

1. I'm working with: 2. I'm getting this error: 3. I've tried:

Checking documentation Testing in isolation Adding console.logs Searching Stack Overflow

4. I need:

Your Prompt Preview:

Start filling out the fields above to see your prompt build...

Submit Your Prompt

Write a prompt for a real coding problem you're facing right now. Include all 4 parts!

Comic Strip 2: Iterate, Don't Quit

Most people give up after one bad response. Winners iterate 3-5 times.

Round 1 - Generic Prompt: You: "Explain JWT authentication"
AI: [Gives generic overview of JWTs and basic concepts]

Round 2 - Add Specifics: You: "Show me JWT auth for React + Flask that persists across page refreshes"
AI: [Gives better code with localStorage examples]

Round 3 - Refine Further: You: "This expires in 15 min. How do I implement refresh tokens to keep users logged in?"
AI: [Gives exactly what you need - refresh token implementation]

Iteration Practice Game

You got a mediocre AI response. Write follow-up prompts to improve it!

AI's Initial Response:

"Here's a basic database query in Python: cursor.execute("SELECT * FROM users"). This will get all users from your database."

Your Follow-up Prompt #1: Your Follow-up Prompt #2:

0%

Submit Your Iteration

Take the AI response from your Comic 1 prompt. Write a follow-up prompt that would get you closer to what you actually need. Explain what you added.

Comic Strip 3: Real Project Breakdown

Case Study: Overcomplicated Flask + Spring backend, messy login system

Phase 1: Understand

Prompt: "Explain how this login system works [paste code]"

Result: AI mapped the entire data flow and identified redundancies

Phase 2: Plan

Prompt: "How do I consolidate into Flask-only? What Spring functionality needs to be replicated?"

Result: Got a clear migration plan with step-by-step approach

Phase 3: Implement

Prompt: "Implement session-based auth in Flask with these requirements: [list]"

Result: Got working code that replaced the old system

Phase 4: Debug

Prompt: "React isn't maintaining Flask session. Fetch calls work first time but lose auth after. Here's my setup: [code]"

Result: AI found CORS + credentials issue immediately

Time Saved

2 weeks of reading docs → 3 days with AI

Key Lesson: Break complex problems into phases. Ask AI to explain before you start changing things.

Submit Your Project Plan

Describe a project/feature that feels overcomplicated. Break it into 3 phases. For each phase, write one AI prompt you'd use.