Design Rev 1: Going Wide
The initial ask was to explore a range of what "Loom for vibe coding" could look like. Using our product requirements as a foundation, I guided Claude to shape two design specs – a blue-sky exploration that would test the boundaries of current tech, and a fully-feasible MVP anchored on quick execution. I then fed the design specs into Figma Make to create interactive demos to show in leadership updates.
Figma Make: Blue-Sky Demo
The blue-sky demo explored the idea of seeing your vibe code update the actual UI in near real-time. For example, a UX designer could start recording a Loom over their product, and then dictate their desired UI changes. AI would then code the UI changes in a staging layer and display them on-screen, visible in the recording but leaving any actual code untouched until a post-record approval process.
While fascinating and bold, the technological investment required would far exceed our resources, and in a world where AI capabilities are progressing at lightspeed, we wanted to keep time-to-value at a minimum. That brings us to the feasible MVP.
Figma Make: MVP Demo
To get around the heavy investment of displaying real-time code updates, I explored the concept of capturing the user's dictated commands and on-screen context (URLs, cursor gestures, key screenshots). Package it all up after recording, and it's a viable prompt for Atlassian's own AI coding tool (Rovo Dev) to execute. At this stage, leadership was pushing for us to build primarily with Rovo Dev in mind.
The MVP concept seemed promising, but as I squinted at it further, it seemed to fall short of three key fundamentals:
- It should be compatible with any AI tool
Focusing just on Atlassian's own Rovo Dev would hamstring Loom's potential as a ubiquitous way to interact with AI tooling. - It should be triggerable from within any AI tool
To maximize reach and minimize friction, I imagined this tool as an AI command accessible from any AI text input. Loom's existing post-record experience (a suite of video-editing and document-generation features) also felt optional for the use case at hand. In my eyes, if a user starts up Loom from Claude, they should end back in Claude, ready to execute. - The end result should feel like magic
Even though the final result is a supercharged AI prompt, the prompt itself ends up heavy and hard-to-parse. I began to explore ways for it to feel less like a dense block of text and more like a simple, powerful artifact.
To address these goals, I dove back into Figma Make to experiment with a third option: the Context Engine.
Figma Make: Context Engine
This demo expands upon the MVP in some important ways:
- It starts and ends inside an AI agent
A simple "loom context capture" from the command line starts the process. Once the user hits "stop record," they return to the command line instead of Loom's share page, straight back into where work happens. - The output is an intuitive attachment that can be executed anywhere
I prompted Figma Make to redesign the dense AI prompt into the style of a smart attachment. The captured metadata could still be easily scanned if needed, and the entire file could be copied or uploaded into any AI tool. Most importantly, it represented the magic of the context capture in an approachable way. - The end result comes into view
Every demo needs to tell a story. Why would someone use this context capturing tool? What actually happens after it executes? By displaying the agent visually executing on the work, the true value of this tool becomes that much more tangible.
My favorite aspect of this exploration actually isn't even in the demo: Loom as a context engine wouldn't be limited to tech use cases. My starting point of "how might I vibe code with Loom" had evolved into "how might I accomplish more with AI through Loom?"
