All the activities here were born of human-AI
collaboration.
Ideation and
direction by Shafali R. Anand;
Research, programming & SME Expertise by ChatGPT 5.
These are a few activities that I vibe-coded with ChatGPT 5. For the record, I cannot program to save my life. The following interactives were all crafted in a couple of weeks. The simpler ones took a few hours, the more complex ones, a day. While instructional design helped me in prompting and prompt-tweaking, I touched not a line of code anywhere. I've added interaction-specific information on each of the cards so that you may go through them. The general process that I followed however, remained as follows:
1. Start by setting the context, establishing the constraints, and providing ChatGPT information about the look, feel, and functionality I required.
2. After receiving the first draft, I would ask ChatGPT for the improvements.
It took us between three (for the simpler ones) and eight (for the more complex ones) feedback loops to craft something that not only looked nice, but also worked.
An Circular Menu that Spirals Out and can be used to launch 8 Sparks (ID-AI Crafted Activities)
Layout Animation/Interactivity Specifics: The use of the Archimedes Spiral/The transformation of the icons into navigational buttons.
Feedback: Mostly needed on the spiralling speed and aesthetics.
Content Generation: Entirely by ChatGPT (No human editing/intervention).
Explore shapes, lines, and angles with an elegant, interactive board.
Layout/Interactivity Specifics: The header, footer, and the corner-pulling interactivity.
Feedback: Almost no feedback was required. (I didn't pester ChatGPT for the fifth button to be centered.)
See curves come alive as parameters change in real time.
Layout/Interactivity Specifics: The header, footer, start and stop animation toggle.
Feedback: A couple of feedback loops were needed to center the entire composition.
Content Generation: Entirely by ChatGPT (None of the content is human-reviewed).
Molecules and bonds in minimalist style.
Layout/Interactivity Specifics: The header, footer, and the colors of different atoms (especially in the case of polarity).
Feedback: Feedback was almost exclusively given on the look and feel of the rendered molecules.
Content Generation: Entirely by ChatGPT (None of the content is human-reviewed).
Five Excerpts from A Midsummer Night's Dream along with their synopses and contexts.
Layout/Interactivity Specifics: The header, the logo at the right, the buttons (golden circular ones and the ones at the left)
Feedback: Feedback was required to getting the layout right, and also for building the right kind interactivity.
Content Generation: Entirely by ChatGPT (None of the content is human-reviewed).
Graphics Generation: Prompted by me but created entirely by the ChatGPT/Dall-E team (including the base, the pixie logo, and the Li'lbit logo).
A Grade 7 Math Quiz.
Layout/Interactivity Specifics: The header, the logo at the right, the buttons (golden circular ones and the ones at the left)
Feedback: Feedback was required to getting the layout right.
Content Generation: All questions, the distractors, the answers, and the functionality was generated by ChatGPT. (No human intervention/editing.)
Music Nostalgia with Hard Rock Bands.
Layout/Interactivity Specifics: The header layout with the Hard Rock Logo appearing in the middle.
Feedback: Feedback was required for getting the layout right, but ChatGPT 5 learned the new layout quickly.
Content Generation: The names of all the music band labels were suggested and categorized (as Hard Rock and non-Hard Rock) by ChatGPT 5.
Ten questions, instant scoring, and a question bank of 50 questions.
Layout/Interactivity Specifics: The feedback panel at the right needed some explaining to do.
Feedback: A few feedback loops were required for improving the question-stems and building the question bank (of 50 questions).
Content Generation: All the questions, distractors, and feedback statements were written by ChatGPT 5.
(No human editing or intervention went into it.)
Newton's Three Laws of Motion: A tab-interactive with Animations and Explanations.
Layout/Interactivity Specifics: The layout required some brainstorming (it uses four htm files) and a some degree of human ingenuity.
Feedback: About a dozen feedback loops were required for getting the layout as well as the presentation of the explanations right.
Content Generation: The animations and the explanations for all the three Newton's Laws were provided by ChatGPT 5. (No human intervention/editing.)
Graphics Generation: Newton's caricature was created using the Royalify GPT
by Kenflame.
Each Spark you see here was built in collaboration with ChatGPT — from setting constraints and shaping prompts to iterating on design and interactivity. Some came together in a few hours, others took several loops of feedback and refinement, but all were created without me writing a single line of code.
My purpose in sharing these activities is twofold: to demonstrate how generative AI can act as a rapid prototyping partner for instructional designers, and to be transparent about the process. These aren’t “AI-powered” products — they are prototypes built with AI, guided by instructional design expertise and human creativity.
This is where the real promise of AI in learning design lies. It helps us speed up processes that bring us closer to the visualized output, and enables us to improve and tweak our presentation of content beforehand. This, of course, is just one of the ways in which AI can be used creatively by instructional designers, so that they get more control and more time to concentrate on making learning great for their learners.
As instructional designers, our goal is to improve our learner's experience, and this can happen only when we go beyond the obvious, experiment with AI, and refine our methods of communicating with it.