AI Changes the Instructional Designer Toolset For Good - Mockup in Figma, Content in VS Code with AI Agents

As AI has been deeply permeating the industry standard software packages that Instructional Designers have historically depended on, it has also bridged the gap between the toolset of an ID and the wider range of more powerful tools that are common in the world of web development. Real web teams create design mockups in UI tools like Figma and code in a dedicated web editor like VS Code. These are not the same.

I have long believed that the standard toolset of instructional designers – Articulate, Captivate, Camtasia – is an inferior alternative to the powerful tools that web developers and designers use to create experiences on the open web. Instructional Designers’ visual, consumer‐oriented tools have become the standard because of two main reasons:

• The fact that most IDs are educators first, designers second, and web developers last, so their tools protect them from the underlying HTML, CSS, and Javascript that powers the web experiences they build rather than supporting them to engage with it, and…
• The requirement that eLearning authoring platforms create SCORM‐compliant exports creates powerful vendor lock‐in, discouraging the kind of innovation we’ve seen in the rest of the web stack. 

AI is changing this equation dramatically. It’s now possible for non‐technical users to mock up detailed website layouts, handling much of the visual design that tools like Articulate handle for designers. Even site navigation, multi‐page layouts, and responsive design can be built from a combination of text and image‐based prompts.

Interactive Prototype Music Theory eLearning Course made in Figma Make

This course design mockup was generated in maybe 30 minutes of work in Figma Make. I am using the free version since I’m between jobs right now, but the pro version would allow me to export this layout as valid production code and start to populate it with original content.

Turning a Mockup into a Production Site – VS Code + AI Agents

I have also been approaching AI development from the other direction – not starting as a visual mockup, but starting the process in AI‐integrated code editors like Cursor and Google Antigravity, built on VS Code. These desktop code editors allow you to work with a chatbot within a directory on your desktop machine, generating files and entire website projects in code first. I generated this working website mockup with working, clickable quizzes and interactives, with just a prompt.

I had previously created a more complex version on my work machine before being suddenly laid off and losing access to those files, but not before testing the SCORM functionality I had built into the course using SCORM Cloud, where the course validated and functioned as expected!
This tells us that SCORM compliance is no longer the binding force holding instructional designers within Articulate’s ecosystem that it once was. In fact, we are now free to break out of the limitations SCORM put on our data reporting capabilities and freely move towards xAPI and CMI5’s richer data streams for more detailed analytics on learner performance.

Markdown is the Secret Sauce for Building Content with AIs

I have long been trumpeting the benefits of learning to write markdown for instructional designers as a web‐native way to organize content before we commit it to a proprietary authoring platform. I have adopted it as the main way I write any content – first in markdown, then choose the container it will ultimately live in when we present it to its audience. Doing this gives us maximum flexibility and lets us work faster. Even when my stakeholders send me their content in PowerPoint or PDF formats, I always strip it down to markdown to remove any formatting so it’s nice and clean to add into my preferred authoring tools of choice. 

Apparently, our new AI overlords agree – AI loves speaking in markdown. VS Code, Cursor, and Antigravity all work great as markdown editors where you can write and generate content in an integrated view with your AI assistant, and they let you turn a folder full of markdown‐formatted content files into a production website with just a prompt.

I for one welcome our new robot overlords

To paraphrase Kent Brockman, this newfound power is a huge step forward for instructional designers and the power we have to create rich, interactive online learning experiences without confining eLearning authoring platforms like Articulate. I am excited to continue my work moving towards this web‐native workflow with the assistance of integrated AI agents.