The design process has always evolved, but AI is driving the most radical shift yet. At Bondin, we now make a lot of coded prototypes to share with clients. Previously in Figma and other design tools, there was a canvas where clients and ourselves were able to see the design process and the versions in between, but with coded prototypes, that history disappeared from view.

That's why I made visual riffs. Now we use it in our coded prototypes, where we surface these previous versions, each with some context, like a description and any related links.

Published on npm as visual riffs. No dependencies, styles sealed in a shadow root so they can't collide with your prototype.

Install

I usually wire this up by telling the coding agent:

install visual-riffs from npm and setup AGENTS.md as per package instructions

Then I can just say things like:

add the riffs version switcher and register this as version 1

make a new riff of the current version: ‹the change I want to try›

attach this supercut.ai/share/... to the latest riff

The agent handles the rest.

Full docs, manual install, configuration, theming, search, even a full-height side panel mode, all of that lives in the package readme.