Prompt Power-Ups

AI Builder Series — Workshop 1

 

 

 

 

by Brendon Thiede

Series Overview

  1. Prompt Power-Ups (today!)
  2. One Thing at a Time
  3. Save Points
  4. Team Up

We're building a quiz app across all 4 workshops.

Student Goals

  • Write clear prompts for AI
  • Check AI output against what you wanted
  • Improve prompts through iteration
  • Use Playwright MCP for visual AI feedback

Tool Check

  • VS Code — open?
  • GitHub Copilot — signed in?
  • Git — configured?
  • Playwright MCP — we'll set this up together

What Makes a Good Prompt?

A Bad Prompt

"make me a quiz"

What do you think AI will do with this?

A Better Prompt

"Create an HTML page with a trivia quiz about animals for kids. Show one question at a time with 4 multiple choice buttons. Track the score and show it at the end."

What Changed?

  • We said what kind of quiz
  • We said who it's for
  • We said how it should work
  • We said what technology to use

The 5 Parts of a Prompt

1. Role

Who should AI pretend to be?

"You are a web developer building a kids' trivia app."

2. Context

What's the background?

"This is a simple quiz about animals for students ages 10-14."

3. Task

What should AI do?

"Create an HTML page with a multiple choice quiz."

4. Constraints

What are the rules?

"Use only HTML, CSS, and JavaScript. Show one question at a time."

5. Examples

What should it look like?

"Questions look like: What is the fastest land animal?
A) Cheetah   B) Lion   C) Horse   D) Eagle"

Prompt Builder Challenge

Let's build our quiz app step by step.

Round 1: Start Vague

Type this into Copilot Chat:

"make me a quiz"

Run the code. What happened?

Round 2: Add Context

Now try adding context and constraints:

"Create a trivia quiz about animals for kids using HTML, CSS, and JavaScript in a single page"

Round 3: Add Examples

Give AI a specific example of what you want:

"Questions should look like:
What is the fastest land animal?
A) Cheetah B) Lion C) Horse D) Eagle"

Each Round

  1. Write the prompt
  2. Run the code
  3. Check: did I get what I wanted?
  4. Improve the prompt

Break

Stretch, grab water, and come back ready to build.

Think About...

Write down one thing that surprised you about AI's output.

Playwright MCP

AI can see your app!

What Is Playwright MCP?

  • AI by itself can only read and write text
  • Playwright MCP lets AI open a real browser
  • AI can see your page and suggest changes
  • Think of it as giving AI eyes

Try It!

Ask Copilot:

"Open my quiz app in the browser, take a look at it, and suggest 3 ways to improve the design."

Refine the UI

Now try prompts like:

  • "The buttons are too small to tap easily"
  • "The colors are hard to read"
  • "Make it look more fun for kids"

AI sees the actual page and makes targeted fixes.

Your Prompt Checklist

Create your own tool for writing better prompts.

Checklist Questions

  • Did I say what role AI should play?
  • Did I give enough context?
  • Did I describe the task clearly?
  • Did I set constraints?
  • Did I give examples?
  • Did I check the output?
  • What would I change next time?

System Prompts

  • A system prompt sets the "default personality" for AI
  • It runs before every conversation
  • Save one for your quiz app project

Save Your Work


git add .
git commit -m "Initial quiz app from Workshop 1"

Wrap-Up

What We Learned

  • Good prompts have 5 parts
  • Always check AI output
  • Iteration is normal and expected
  • Playwright MCP lets AI see your app

Coming Up Next

One Thing at a Time

Your quiz works, but the code is a mess.
Next time, we'll organize it so we can safely grow it.

Questions?

Thank you!