// Case Study 05 -- AI Storyboard Converter

Seven ID models. One storyboard generator.

Select a course topic and an instructional design model. Get a complete storyboard -- narration scripts, visual specs, interaction types, and design rationale -- for every screen.

Storyboard Input

Course Topic *

ID Model *

ADDIE

Phase-gated: Analyse → Design → Develop → Implement → Evaluate

Bloom's Taxonomy

Cognitive levels: Remember → Understand → Apply → Analyse → Evaluate → Create

Gagné's 9 Events

Gain attention → state objectives → recall → present → guide → practice → feedback → assess → transfer

SAM

Successive Approximation: iterative rapid prototyping model

Merrill's First Principles

Problem-centred, activation, demonstration, application, integration

4C/ID Model

Learning tasks, supportive info, procedural info, part-task practice

Kirkpatrick Model

Backward design from L4 Results to L1 Reaction

28 pre-built storyboards -- 4 topics × 7 ID models. Select and explore instantly.

⬡

Your storyboard will appear here

Fill in the details on the left and hit Generate

Generating storyboard…

How I Built This

✓ Real & Accurate

28 hand-authored storyboards -- 4 topics × 7 ID models, every screen written by an instructional designer (me), not generated randomly
Each ID model produces structurally distinct output -- ADDIE phases, Bloom cognitive levels, Gagné's 9 Events are all genuinely different
Narration scripts, visual descriptions, interaction types, and design rationale are all real ID deliverables -- written to the standard I'd submit to a client
The ID Model Analysis panel accurately maps each screen to its model phase -- that mapping is genuine, not decorative

~ Simulated / Simplified

Topic selection is fixed to 4 pre-built scenarios -- a production tool would accept any free-text topic and generate via API
A Cloudflare Worker proxy is already built and deployed -- the switch to live Claude API generation requires only adding API credits
The ~1 second loading delay is intentional -- it simulates real generation latency

→ In Production

Any topic ──▶ Cloudflare Worker ──▶ Claude API
│
└──▶ Storyboard JSON ──▶ DOCX export (Storyline-ready)
                     ──▶ Google Slides via API
                     ──▶ SME review workflow

Demo 05 · AI + Instructional Design

Seven ID models. One generator. Pick your model, get your storyboard.

An AI-assisted storyboard generator that applies the correct instructional design model to any topic. Choose ADDIE, SAM, Bloom's, Gagne, Merrill, 4C/ID, or Kirkpatrick — the output adapts the structure accordingly.

AI-Assisted7 ID ModelsStoryboard OutputInstructional Design

Demo 05 — AI Storyboard Converter

Interactive demo loads here

The full interactive experience runs in the editorial view — click below to launch it.

Seven ID models. One storyboard generator.

Storyboard Input

ID Model Analysis -- Model breakdown

How I Built This

Seven ID models. One generator. Pick your model, get your storyboard.