Hand-coded HTML · Performance task

Prompt Lab

A hands-on lab where staff build prompts piece by piece, watch the AI reply improve, then prove the skill in three rubric-scored tasks.

Audience
Knowledge workers using AI assistants
Seat time
About 20 min
Tool
HTML / CSS / JavaScript
My role
ID, interaction designer, front-end developer
Delivery
Any browser; no live AI or API costs
Interactive preview. Works best full screen. Launch full course ↗

The challenge

Staff had access to an AI assistant but got generic, overlong or made-up answers, and blamed the tool. The gap was prompting skill, and a multiple-choice quiz about prompting would not show whether people could actually do it.

My approach

  • A builder where learners switch on role, context and format, and watch a scripted reply and quality meter change, so cause and effect is visible.
  • Colour-coded prompt parts carried through every screen, so the structure becomes a mental model.
  • Three performance tasks against a rubric shown up front: rebuild weak prompts, fix flawed outputs, and match tasks to patterns.
  • An ungraded prompt checker for learners' own prompts, and a printable cheat sheet.

Objectives and how each is assessed

Every assessment item was written before the content, and maps to exactly one objective.

Learning objectiveAssessment
Structure a prompt with role, context, task and format.Rebuild 3 weak prompts, choosing the strongest option for each part (12 points)
Refine a weak AI output with a targeted follow-up prompt.Choose the best follow-up for 3 flawed outputs (6 points)
Choose the right prompt pattern for summarising, drafting, analysing and brainstorming.Match 4 work tasks to patterns (4 points); pass mark 18 of 22

Results and reflection

Add pilot results, reviewer quotes or what you would do differently next time.

Design artefacts

← Back to all work