Turning Claude Visualizations into Rise Code Blocks
Most eLearning developers think of AI as a writing tool. Type a prompt, get text. Maybe an image and you’re done.
Claude does something else that you may not have noticed yet.
When you ask Claude to show you something instead of explain it, you often get a fully interactive widget right in the chat window. Sliders. Live charts. Toggles that change outcomes in real time. For eLearning developers, this is very helpful when it comes to prototyping.
Whatever Claude builds in that chat window can be converted into a Rise code block in minutes.
This post covers two ways to do that. The first uses Claude’s visualization feature — ask it to show you how something works, iterate until it’s right, then convert. The second uses Claude Design — build a polished prototype visually, then bring it into the Rise Build System as your starting point. The resulting code snippets from both demos are free to download below
Watch Part 2 if you haven’t already Browse the Rise Code Block Library
What's Covered:
- 00:00 Introduction
- 01:28 Triggering a Visualization
- 02:20 Converting to a Rise Code Snippet
- 04:29 Building a Code Snippet from a Working Prototype
- 06:00 Wrap Up
The final part of this series will focus on Storyline. We’ll look at the new AI JavaScript coding feature, similar to Rise Code Blocks, but different in many ways.
While you’re waiting, help yourself to the free code snippets created in this tutorial.