🎯 Lesson Objectives
By the end of this lesson, you will:
- Understand what a prompt is and why it matters
- See how the same AI gives wildly different results based on prompt quality
- Know the elements that make a prompt great
- Feel confident writing your own prompts
📖 What Is a Prompt?
Let's start with the most basic question:
Prompt Definition
A prompt is your message to AI — the question, task, or request you send to get a response.
Think of it as your conversation starter with AI. Just like talking to a person, HOW you ask matters as much as WHAT you ask.
┌─────────────────────────────────────────────────────────┐
│ THE PROMPT FLOW │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌───────────┐ ┌───────────┐ │
│ │ YOU │ ───▶ │ AI │ │
│ │ (Prompt) │ │(Response) │ │
│ └───────────┘ └───────────┘ │
│ │
│ "Create a "Here's a basic │
│ button" gray button..." │
│ │
└─────────────────────────────────────────────────────────┘
🎭 Same AI, Different Results
Here's the key insight that will change how you think about AI:
The same AI tool can produce wildly different results based solely on how you write your prompt.
Let's see this in action:
📊 The Prompt Quality Spectrum
Not all prompts are equal. They exist on a spectrum from terrible to excellent:
Level 1: ❌ Bad (Vague)
Make an app
Result: AI has no idea what you want. You'll get generic, useless output.
Level 2: 😐 Okay (Basic)
Make a todo list app
Result: Better, but AI might choose wrong technology, styling, or features.
Level 3: ✅ Good (Specific)
Create a todo list using HTML, CSS, and JavaScript. Include:
- Add new tasks
- Mark tasks complete
- Delete tasks
Result: AI understands the task clearly. Output will be functional.
Level 4: 🌟 Great (Professional)
You are a senior frontend developer.
Create a minimal, elegant todo list using HTML, CSS, and vanilla JavaScript.
Features:
- Add new tasks by typing and pressing Enter
- Mark tasks complete with a checkbox
- Delete tasks with an X button
- Show remaining task count at bottom
Style: Clean, modern, mobile-friendly with a blue accent color.
Result: AI delivers professional-quality code with all requirements met.
🎨 What Makes a Great Prompt?
Great prompts typically include these elements:
The 5 Elements of Great Prompts
| Element | Purpose | Example |
|---|---|---|
| Role | Who should AI be? | "You are a senior developer" |
| Task | What to do? | "Create a navigation bar" |
| Technology | What tools? | "Using HTML and CSS" |
| Features | What details? | "Include links to Home, About, Contact" |
| Style | How should it look/feel? | "Clean, modern, mobile-friendly" |
The Formula:
[Role] + [Task] + [Technology] + [Features] + [Style] = Great Prompt
🔬 Live Demo: Three Rounds
Let's watch the evolution of a prompt:
Round 1: Vague
Likely Result: A basic gray button with no style or functionality.
Round 2: Better
Likely Result: A blue button, but probably basic styling.
Round 3: Professional
💡 Tips:
- • Role specified
- • Every detail defined
- • Hover state included
- • Professional result guaranteed
Result: Exactly what you specified, every time.
🧠 Key Insight
The Prompting Truth
Better prompts = Better results = Less time wasted
The time you spend crafting a good prompt is ALWAYS less than the time you'd spend fixing a bad result.
Think of it this way:
- Bad prompt: 10 seconds to write → 30 minutes fixing problems
- Good prompt: 2 minutes to write → Works correctly first time
🤖 Try the Prompt Evaluator
Practice writing prompts and get instant AI feedback:
🤖 AI Prompt Evaluator
Powered by Gemini✨ Quick Exercise
Try this right now on your phone:
✅ Prompt Improvement Exercise
0/4✅ Lesson Summary
Key Takeaways
- A prompt is your message to AI — how you ask matters as much as what you ask
- Same AI, different results — prompt quality directly affects output quality
- Great prompts include: Role, Task, Technology, Features, Style
- Time investment pays off — 2 minutes crafting saves 30 minutes fixing
📝 Mini Quiz
📝 Check Your Understanding
1/3What is a prompt?