DesignBench

The design tool you want, inside Claude, ChatGPT and Cursor.

10 November 2026 · Early preview

Apps are being built from chat now. DesignBench gives the agent you already use a design surface with your component library, every permutation of it, and a canvas to compare them side by side.

Works with
Claude·storefront localhost:7070

Give me three more takes on the pricing card. Make one playful.

variant create pricing-card soft

variant create pricing-card ink

variant create pricing-card playful

Three new directions are on the bench next to the current card, all at 1280px with the same props.

Comment on PlayfulBigger price, rounder

edit ideas/playful/component.tsx

Updated Playful. Want me to promote it?

ComponentsPricing card Compare 4 Promote

Library

Button Badge Pricing card Empty state Nav bar Toast Settings row
Currentsource
Pro$24 /moStart trial
Softvariant
Pro$24 /moStart trial
Inkvariant
PRO$24 /moStart trial
Playfulvariant
Pro$24 /moStart trial
Bigger price, rounder

Why now

A lot of software now starts as a conversation. You describe a screen to Claude or ChatGPT, it writes the code, and you look at what came out.

Design tools haven’t caught up. They live in a separate app with a separate copy of your components, and the bridge to your agent is screenshots and copy-paste. Ask for three directions and two of them are gone by the next message.

DesignBench keeps every direction. It renders your real React components, saves each variant as a file next to the original, and lays them out on one canvas. What you compare is what ships.

Every permutation, on one bench

Designs are the different takes on a component. States are the situations it has to handle, like hover, loading and disabled. Properties are the knobs you’d find in an inspector. DesignBench crosses all three, so you see every combination and spot the ones nobody designed.

PropertiesButton

Try it. Each cell is the same button, and every property applies to all sixteen.

How it works

  1. Ask your agent to set it up.

    It installs DesignBench, finds your components and writes previews with realistic props.

    npx designbench init

  2. Ask for directions.

    “Five takes on the empty state, one of them weird.” Each variant is a copy of the source file under .design-workbench/ideas, so your app stays untouched.

  3. Compare on the canvas.

    Every direction renders with the same props, state and viewport, at 375, 768 or 1280 px. Point at what you like, leave a note, and go another round.

  4. Promote the one you pick.

    One command shows the diff against your source. Add --apply to write it, with a backup kept beside the variant.

    npx designbench variant promote empty-state weird --apply

What is available

DesignBench 0.3 is an early preview for React projects. It runs as a local workbench next to your app. Claude Code, Codex and Cursor drive it through a small CLI and an AGENT.md guide it writes into your repo.

You get a searchable component library, saved variants, side-by-side comparison, editable properties and states, links that reopen an exact selection, and guarded promotion back into your source.

What is next

The bench inside the chat. We’re bringing the canvas into Claude and ChatGPT conversations as an app, so you can point at a variant and ask for changes without leaving the thread.

After that comes Pattern Garden, a library of real components from across the web that you can start new variants from.

What it costs

DesignBench is free and MIT licensed. There’s no account and no model API key. Your agent does the coding on the plan you already have.

Start in your agent

Pick your agent and how you’d like to install. The quickest start is a prompt. Paste it, and your agent installs DesignBench, builds previews for your components, and sends you a link.

Set up DesignBench with Claude Code

Open your project in Claude Code, in a terminal, your editor or the Code tab of the Claude desktop app, and paste this.

Set up DesignBench in this project so we can design its components together.
1. Install the preview: `npm install --save-dev https://github.com/nicolaerusan/design-workbench/releases/download/v0.3.0/designbench-0.3.0.tgz`
2. Run `npx designbench init`, then read .design-workbench/AGENT.md.
3. Run `npx designbench scan --write` and add finished previews for our main components, with realistic props and states.
4. Start it with `npx designbench dev` and send me the link.
Don’t change application source files.

Works today with DesignBench 0.3.