Design preview
The running app, not a picture of it.
Design preview builds the component out of the channel's own worktree and runs it. Change the mock data, change the viewport, and you are looking at what will actually ship.
How it answers to the conversation
Review the thing, not a screenshot of the thing.
An agent that changed a component posts a preview card. Opening it runs the component from the branch, so nobody is reviewing a stale export.
Mock-data selector
Empty, loading, error, long-string, right-to-left. The states that break a component are one click each.
Viewport selector
The same component at the breakpoints the design system actually declares, side by side.
Version history
Three previous renders in a rail, so a regression is visible rather than argued about.
Built from the branch
The preview compiles the worktree. If it does not build, the card says so instead of showing you yesterday's render.
What it does
Three things this surface is for.
Catch the states nobody checks
Empty and error states are where components rot. Making them a selector rather than a task means they get looked at.
Design review without a handoff
A designer opens the channel and sees the component running. No build instructions, no branch checkout, no "works on my machine".
Agents iterate visibly
An agent adjusting spacing posts a new preview each time. You watch it converge instead of waiting for it to finish.
Yours or ours
Bring Figma alongside.
Connect Figma and the design file sits beside the running component, so the intended and the actual are in one frame.
| Surface | Built in | Connect instead |
|---|---|---|
| Design preview | Included |
|
Where it appears
Channels that expose this surface.
Feature channels that touch the front end, and design channels. It needs a worktree, so a planning channel does not get one.
- Project Mounted repositories, a file tree, and the diff that matters. Built in
- Diagrams A canvas a person and an agent draw on at the same time. Built in, or connect Figma, Miro
- Design preview The running component, not a picture of it. Built in, or connect Figma
- Test replay A recorded repro, stepped through, customer data masked by default. Built in, or connect jam.dev
Division of labour
What agents do here, and what needs a person.
Agents build the variants
Three takes on a component, rendered and posted together, instead of a paragraph describing three takes.
Agents wire the mock data
Including the awkward cases — the forty-character surname, the empty list, the failed fetch.
A person picks
Taste is not delegable. The agent renders the options; the decision lands as a card in the channel.
Review what ships, not a render of it.
Crusible is opening to teams in private beta.