RollCage / A design workbench for real software

Design software by making software

RollCage is a workbench for product designers who make real, running software with their coding agent. Refine the smallest interface detail or shape a whole system, without stopping at mockups and handoffs.

Your design decisions stay in the repository as rules, reasoning, and checks, so they keep guiding the work as it grows.

The translation loopYour repo, the coding agent, and the designer in one loop. The agent reads the repo and translates it into RollCage, a design view of components, their states, and tokens. The designer makes changes there, and the agent writes them back into the repo as code, tests, stories, and rules.ROLLCAGECOMPONENTS · STATES · TOKENSDEFAULTLOADINGERRORTOKENSDESIGNERREADSTRANSLATESYOUR CHANGESWRITES BACK>_ CODING AGENTYOUR REPOButton.tsxButton.test.tsButton.stories.tsxtokens.cssCLAUDE.mdtickets/

What you can do

Work at the level you design

You and your coding agent make it together, in the running product. You bring the design judgment and direct the work. The agent writes the code and checks it.

Refine the details

Work on real components, states, tokens, accessibility, and interactions, not just mockups of them. Switch a page between states, like slow or failing data, and each one is checked for accessibility.

Shape the whole system

Work out flows, data, permissions, and how the parts connect, in the software itself. States that only appear partway through a flow are reached, checked, and photographed too.

The work remembers

Make decisions that keep working

A good design decision shouldn't vanish when the session ends. When a decision should last, and only when you say so, your agent writes it into the repository in your words: a rule, a check, or a ticket that keeps the why.

Ordinary files in your repository

The next session starts with the records of the prior decisions.

Any agent can follow them

Claude Code, Codex, or another agent that works in a repo reads the same record. Where it's a check, work that breaks it fails.

They stay yours

When you change your mind, the history of why stays. Nothing depends on an account with us.

Three ways in

Real enough to trust Safe enough to break

Learn with the example app

A working React app with nine states to switch between, from slow and failing to another user's view. Change it, break it, put it back.

Build on a new workbench

React, Vue, Svelte, or Angular, with every instrument already running.

Join your existing app

RollCage adds the method and lists every change. Your package.json, build, CI, and Git history stay as they were. The instruments come with a new workbench.