Cheval Studio is where I prototype in the product's own code. An iteration takes about 23 minutes instead of half a day, and every version keeps who changed it and why.
Cheval Studio, my own prototyping tool
Image: The Landing's canvas zoomed out: briefs, then rows of versions at desktop, tablet and phone widths
How might we keep every iteration, and the reason behind it, without slowing down?
This year I moved my whole process from Figma into code. An AI agent in Cursor writes most of it, and Cheval, the design system I build my products on, is the source of truth. In late September I started a folder of prototypes next to Cheval, to see the work, compare it and hand it off in one place. It grew into Cheval Studio, the tool I design every page in, this portfolio included.
Moving into code fixed the handoff and lost the trail. Every AI tool I tried, Cursor, v0, Lovable and Figma Make, edits a design inside a chat, one change on top of the last. What I tried, and why I dropped it, lives in that chat's context, and the next chat starts without it. So my iterations, and the reasons behind them, got lost.
Where a design can live, from fast to try to real to ship. The studio is the one place that's both.
Six tools, and each one stops at the same wall
I gave the tools people kept recommending the same brief: three directions for one landing section, in the product's own design system. None kept the directions side by side in the real code.
Then the kits closest to what the studio does. DialKit tunes a component's values live, and the studio's Dials runs on it. Agentation pins notes on elements for an agent. Each covers one need well. None keeps the iterations.
Compared on: Tune values live, Notes for the agent, Variants side by side, Every version kept, The product's own system, Works for a team.
From my own use of each, in October 2026. A half mark covers some of the need.
Prototyping was fine. Keeping track was the problem.
I talked to eight designers from my circle, about half an hour each, and read eight Reddit threads and the public reviews of the tools above. Every note went on one FigJam board and got sorted until the piles stopped moving.
Interview guide, semi-structured
Image: The FigJam card sort: twenty notes from interviews, Reddit and reviews in five piles, from 'The build never matches the design' to 'Sharing a code prototype is hard'
The guide I used for every interview, on the board the notes were sorted on.
Two piles were about the code: it never matches, and the AI tools don't use the system. The other three were about keeping track: comparing directions, remembering why, and showing someone else. Nobody I spoke to had a tool for that second half.
A studio that runs the product's design system, so a prototype hands off as a diff
Feedback on a variant becomes its next version, set beside the one before it. The live page is the latest version, and the older ones still render.
Cheval's inbox on v12, with the version menu open. Point at an older version to see it on the stage.
The studio reads Cheval, the design system, from the same CSS variables the product does. A screen can't drift from the system, because there's nowhere else for it to get a colour.
Cheval's Design Lab: tokens, 245 icons, motion, 24 components, whole sections and 29 loaders, all in one place the studio reads from.
Point at a token to outline every part of the card that reads it.
Guides checks the alignment, Dials change values while the page runs, and Edit pins a note on the element I mean. Open in Cursor hands the view and its notes to the agent.
Edit on the inbox: a thread and the Important folder picked, and the note going to the agent.
Some things that I removed
Most of what I added stayed. Three things didn't. Each one worked, and each one cost the studio something it needed more.
Everyone works in their own folder, and the history knows whose change it was
Each person has a folder in the repo, and every prototype and tool in it is theirs. The studio reads who made what from the folder a commit touched, so a teammate's work is credited without anyone filling in a form.
Contributors: who's in the studio and what changed last. Maren is an example teammate.
A prototype's page lists what's live, its canvases, its views and its crits, with every commit that touched it beside them.
Cheval: Inbox, with v12 live, eleven older versions folded away, and the commits behind them.
Tools are what the team makes things with: shaders, grids, fixtures for the inbox. They live in the same folders and filter by who made them.
The Tools page, everyone's tools on one grid.
Every version is a file, and every pick is a pull request
A view is a TSX file in the repo. Its variants and versions are files beside it, and the canvas is a JSON file that lays them out. Styles are Emotion components that read Cheval's CSS variables, so a component never holds a hex.
Inbox v3 in the repo: the view, the variables it reads, and the pull request it merged as.
Every version is a frame in the canvas file. Its parent names the version before it, so the tree of versions is data, not a naming habit. Its annotation keeps the request in the asker's words. Both ship in the pull request, so the next person, or the next agent, reads why before touching anything.
The same pull request in canvases/main.json: v3 names v2 as its parent and keeps Maren's request.
The agent works from written rules and scripts: it scaffolds a variant, puts it on the canvas, opens the pull request and merges it once the checks pass. The decisions file records why, the changelog records what, and git keeps every version.
The history keeps the score
Every version in the studio is a merged pull request, so git has the dates. In the week this portfolio came together, the Landing went through 44 versions.
There's still a lot of work to do, but it has huge potential
Linking frames into a flow, with real states and data between them, is the next thing to build.
Every iteration is kept, but past a few dozen it takes too long to tell a version from a file and find the one you want.
It's built for more than one person, with folders, credit and history, but so far the only person in it is me. A real team is the next test.
A tool for designers shouldn't need one, so that's the next thing to take out.
Sharing it was a link, so anyone could open it and point at what they meant.