Training Magazine Network · Building Flip Cards, Tabs, and Branching Scenarios in Claude Design
Template? Not today.
Every interaction from the session, ready to play, and the prompt guide to build your own. Each one started as a storyboard and a prompt in Claude Design.
Prompt guide 2 pages
Building interactions in Claude Design
The opening and closing blocks, templates for all five interactions in a familiar and a reimagined version, the refining prompts, and the SCORM prompt. Swap in your own details and build.
Open the handoutFlip cards
Six identical boxes became a deck dealt across a café table.
Before
The grid version
Six cards, all visible at once, all saying the same thing.
The makeover
Bexmoor Coffee House
Six coffee origins dealt one at a time. Guess the flavor, then turn the card to check.
Play it
Another flavor
Blimpy
Six myths about balloon flights, each floating in its own balloon across a dawn sky.
Play itTabs
A strip of tabs across the top became one patient’s journey through a hospital stay.
Before
Tabs across the top
Five tabs and one panel. Perfectly good, and it reads like a menu.
The makeover
Wexbourne Health
Five moments in Margaret’s stay, on a timeline that fills in as you move through it.
Play it
Another flavor
Bexmoor Coffee House
A café day on a brass espresso dial. Turn the needle and the light in the room changes.
Play itAccordions
A list of bars became boarding passes that tear open, after two attempts that didn’t work.
Before
An attempt that didn’t make it
Bars in a costume. The fix turned out to be structure, not decoration.
The makeover
Blimpy
Six flight day questions as boarding passes. Open one and the stub tears away.
Play it
Another flavor
Halverow
A steel safety locker. Each drawer slides out to show when you need that piece of gear.
Play itBranching scenarios
Three buttons on a slide became a live chat with a customer who’s about to leave.
No before this time. You already know what three buttons on a slide look like.
The makeover
Varney
Dana’s bill jumped from $45 to $79. Pick each reply and watch her mood change.
Play it
Another flavor
Wexbourne Health
A very long Monday. A lookalike email, a fake IT chat, and a risk meter heading for Breach.
Play itDrag and drop
Labels dragged into boxes became a pallet you stack, wrap, and watch wobble.
Before
Labels into boxes
Six carton names, three boxes, and a Submit button.
The makeover
Halverow
Stack six cartons onto a pallet, press Wrap it, and see if it holds. Works with tap and keyboard too.
Play it
Another flavor
Varney
Route five callers on a vintage switchboard by plugging in patch cables.
Play itThe finale
Margaret’s night
Wexbourne Health Turn your sound on
Five small moments between 11:40 at night and first light, told in Margaret’s own voice. Listen, choose what would help, and watch the room warm when you get it right.
Play itStart here on Monday
Three lines worth keeping.
The line that changes everything
This is a [flip card] interaction, but it must not look like [a grid of flip cards].
End every revision with this
Keep everything else exactly as it is.
Run this before you publish
Review this design against Section 508 and WCAG 2.1 AA, including keyboard access, focus order, contrast, screen reader labels, and alternatives to dragging, and fix what you find.
Go deeper
Today was about the interactions. The GenAI Workflow for Instructional Designers takes a single project through the whole workflow, from a messy pile of source material to a finished course, one stage at a time and at your own pace.
Early bird $104.30 instead of $149, applied automatically.
Questions after the session? Write to me at pooja@dlnook.com.