AI-Assisted Rapid Prototyping:
Audience
Responsibilities
Tools
Language
Overview
Employees completing cybersecurity awareness or compliance training.
Claude AI (Sonnet 4.6)
Visual Studio Code / HTML editor
ChatGPT
Research & Content Curation
Prompt Design
AI-Assisted Prototyping
Instructional content review & refinement
UI & Visual Design Adjustments
AI Output Evaluation & Quality assurance
English (US)
This brief concept project demonstrates how AI tools can support the rapid development of functional e-learning prototypes. The interaction presents learners with a realistic phishing email and asks them to identify five manipulation tactics through clickable hotspots.
Using Claude AI, I generated a fully functional hotspot interaction simulating a realistic phishing email (see section below for prompt design). The initial HTML-based interaction was manually refined in regards to wording, visual styling, layout and interaction flow. The final prototype includes numbered markers, immediate explanatory feedback, progress tracking and a completion message.
The goal of this project was to demonstrate how instructional designers can leverage AI tools to quickly move from learning idea to working prototype. The result is a lightweight microlearning interaction that could be used as a standalone HTML file, embedded into a course page, or adapted for LMS delivery.
Phishing Awareness Hotspot Interaction
Prompt Design
Prompt template: Exploratory Hotspot / Labeled Graphic Interaction
Role & task
You are an instructional designer and front-end prototyping assistant. Your task is to create a lightweight, self-contained HTML hotspot interaction for an e-learning context. Prioritize clear learning logic, simple usability, clean visual design, and editable structure over complex code.
Interaction Design Brief
The activity should be based on a realistic visual representation of [topic] within [learning context]. The learning objective is: learners can [identify / recognise / locate / evaluate] [specific elements] in a realistic visual context.
Place [number — recommended: 4–6] numbered markers on the visual at the following locations: [list each hotspot location and what it should highlight]. Each marker should be visually distinct, using a [color] numbered circle.
When a learner clicks a marker, a reveal panel should display:
a short title for the element
a category tag
a 2–4 sentence explanation of why this element matters and what the learner should look for in real situations
Include a progress indicator showing how many hotspots the learner has found out of the total. Once all markers are clicked, display a closing message that explains the underlying principle or mechanism behind the example — not just a generic “well done” message.
Design the layout so the visual and explanation panel are easy to view together on desktop, with a responsive layout for smaller screens. The interaction should work as a standalone HTML file that can be embedded into a course, LMS, or webpage via iframe.
All hotspot content — titles, tags, and explanation text — should be collected in a clearly labelled data block at the top of the script so the text can be edited for a different scenario without changing the interaction logic.
Do you need any further information from me to build the interaction?
To make the prototype reusable, I developed a structured prompt template that can guide the creation of similar hotspot interactions across AI tools such as ChatGPT, Claude AI, or Gemini.
Why this prompt works
1. Defines the AI’s role and output
Specifies the AI’s role, the expected deliverable, and the technical format, resulting in a more targeted and usable prototype.
2. Anchors the interaction in learning design
Connects the activity to a defined learning context, objective, and realistic scenario, ensuring the interaction supports a clear instructional purpose.
3. Specifies the learner experience
Defines the hotspot structure, feedback format, progress indicator, and completion logic to create a coherent and guided interaction flow.
4. Supports adaptation across use cases
Uses placeholders and editable content areas so the same prompt structure can be applied to different topics, scenarios, and learning contexts.
