The button that made sense until I clicked it

In Figma, the panel had buttons. That’s where it started: one of the buttons was a Launch Server button. It made sense right up until I used it.

I’m building RollCage by building RollCage. What I wanted from it was a way to explore two or three design ideas at the same time, not broadly but deeply, each one a day or two of real implementation. Say I want to compare a few versions of a date picker: how days and months get selected, what it’s like to scroll back five years. Those are specific interactions that need real data behind them, and how fast they fire matters. I wanted agents and Git to give me several prototypes running at once, without writing a million-word prompt to get them to behave alike with subtle differences. With RollCage I can spin up three branches, change one thing in each, and compare them under conditions that are 98% the same and 2% different. To keep an agent organized through that, and to keep myself organized, I needed a way to see it.

So the first design was a panel listing the running workbenches, with a button to open each one.

What I found was that the agent kept getting ports mixed up. It didn’t know which branch’s Storybook was on which port, or which dev server belonged to which version, and it would lose track of which was which. Natively running a bunch of these side by side turned out to need real engineering. I had to build an interface that showed, unambiguously, what port Storybook and the dev server were occupying for which branch. Then I had to decide how you move between them. Do you put controls on them? Switch back and forth from the panel?

Then I clicked the button. It’s an Electron app, so the button opens a browser tab somewhere on my two screens, and now I’m looking back at the panel wondering: is one open? Three? None? Okay, I need tracking. And if the app opens tabs, it has to close them, and I could not figure out how to close a browser tab from an Electron app. I tried to work the design into a shape I liked without that, and couldn’t. Which left me with a button that opens a tab, and then nothing. Not a complete experience. I needed a different design.

My original assumption was that RollCage would control the dev servers: show them, hide them, know what’s shown, never show two at once, never show one from a dead branch. With up to six tabs showing different things, I did not want a browser-tab-management interface inside the panel. The designer can manage their own tabs. What’s the simplest thing that gives them what they need and gets out of the way? I didn’t want to pick the one way they could do it. In my experience it’s better to let people open and close things themselves, because it’s happening in their context; when software opens and closes things for you, it’s a little weird and harder to situate yourself.

So the buttons came out. Any button that opens or closes a tab has the potential to be wrong, and I didn’t want that in there. The only complete experience I could find was: here’s the localhost URL, here’s a copy button, roll your own. In Figma it was a button. In the running app it’s a copy-paste link.

Imagining it and interacting with it

Imagining the panel and interacting with the panel were two different activities, and they produced two different designs, which is what Schön called back talk: the situation talks back to you while you’re working on it. What’s new, at least for me, after a long time in this industry, is that I can get the back talk from the actual software in a feasible amount of time.

Before, I had to reason over the scenarios in my head, or gather resources to emulate or simulate them, while I was designing for them. Now I can be situated in the experience while I’m designing it. I can answer my own questions faster, discard options sooner, and for the ones I keep, get accurate feedback on whether the design holds up when the software has to be built.

If I don’t like what came back, I can turn the system: take a piece and bend it until it fits what’s needed. Instead of threading those moves in my head, or sticking them on a wall and walking through them, I can touch the thing. Designers have always worked with more than one sense. What’s changed is the distance, and the cost, of moving from the imagined version to the executable one.

The cost of being wrong is small if you keep accounts along the way. The agent tracks the changes we make and reconciles them against the systems they touch. It’s a finite system; every change has to be accounted for somewhere.

I spent a lot of my career making the ideal thing in Figma and then fighting for it in the room where people decide how it actually gets built. Those were blind fights.

What I’d like to see designers do is push further into the executable environment, communicate their designs in a richer way than the representations we’ve mostly been bound to, and let that environment push back. My panel got fixed down to a copy button. It was the right call, and I wouldn’t have found it in Figma.