1
Open Rivet
In your project, say “Open Rivet” (or type
/rivet in Claude Code). Your agent starts Rivet’s local server and opens the browser UI.If your dev server isn’t running, Rivet can start it for you. Or start it yourself first (npm run dev or similar) and Rivet will find it.With no variants yet, the UI is empty. Variants come from your next prompt.2
Ask for variants
Describe what you want to explore and how many directions:
“Create 3 variants of the hero section. One editorial with a serif headline, one dark and brutalist, one airy and minimal.”
“Give me 2 options for the pricing cards that make the Pro tier stand out.”Your agent writes a short title and subtitle for each direction and starts the run. Each direction is built in its own isolated copy of your project, so your own files stay untouched while variants build.
3
Watch progress
The browser UI shows each direction as a card. Cards flip to live previews as they finish, and anything that fails shows why. From the terminal,
rivet status --watch shows the same thing.4
Pick a winner and commit
Compare the finished directions side by side. When one wins, commit it — from the UI, by telling your agent (“commit the brutalist one”), or with
rivet variants commit <variantId>. The winning variant becomes a normal change in your project, which you review and commit with git like anything else.Starting from zero
You don’t need an existing app. Ask for a fresh run and Rivet generates standalone pages from nothing:“I don’t have a project yet — create 3 landing page concepts for a coffee subscription, fresh.”Fresh runs are the fastest way to explore. Rivet writes the direction briefs itself, builds each one as a static preview, and saves the generated project under
.rivet/<slug>/ in your workspace. Fresh runs can also take reference images, pages, and videos directly — see Design context.
Tips
- Name the thing you care about. “The pricing cards” or even a specific file gets you sharper directions than “redesign the app.”
- Ask for range. Three directions that differ in typography, density, and mood teach you more than three shades of the same idea.
- Say how polished you want it. “Quick sketches” gets you fast, rough explorations. “Polished, pixel-perfect” routes to the strongest (and slowest) workers. The default sits in the middle.
- Refine, don’t restart. Once a direction is close, give feedback on that one (“keep the layout, make the palette warmer”). Your agent refines it in place instead of regenerating the whole set.
Next
Comparing variants
The grid view, direction cards, refinement, and history.
Design context
Ground variants in Pinterest boards, websites, and videos.