forge

forge

A visual workspace for iterating on UI with Claude Code — point, comment, react, and refine in real time instead of describing changes in prose.

Forge turns the usual Claude loop — "make it more compact… no, less… actually move the sidebar… wait, I meant the other sidebar…" — into something direct. Claude generates variations, you open them in a browser, click what you like, drop pins on what needs fixing, reject what doesn't work. Your clicks stream back to Claude, and the next round lands with your feedback already baked in.

Why this exists

Traditional Claude iteration on UI designs looks like this:

You:    Can you make 3 variations of a settings page?
Claude: [outputs three HTML files]
You:    I like the second one, but the toggle section is cramped,
        and the first one's sidebar is better. Can you combine them
        and also make the buttons bigger... wait, not those buttons,
        the save/cancel buttons...
Claude: [regenerates, mostly guesses what you meant]
You:    Close, but now the spacing is weird between...

It works, but you're constantly translating visual intent into prose. Forge skips the translation:

You:    /forge 3 variations of a settings page
Claude: Ready — open http://localhost:4546

[you open the browser, look at three designs side by side]
[you click "Like" on variation A's sidebar]
[you drop a pin on B's toggle section: "too cramped, more spacing"]
[you click "Reject" on variation C]

You:    /forge refine
Claude: You liked A's sidebar and flagged B's toggle spacing.
        Here's Round 2 combining both — open the browser again.

The difference: Claude gets structured feedback (selectors, positions, verdicts) instead of imprecise prose. You stay in visual flow.

Quick start

1. Install Bun (if you haven't)

curl -fsSL https://bun.sh/install | bash

2. Add the plugin to Claude Code

Add the marketplace, then install the plugin:

/plugin marketplace add mahuebel/forge
/plugin install forge@forge-marketplace

Both commands run inside Claude Code. The first pulls the marketplace manifest from github.com/mahuebel/forge; the second installs the plugin from it. No cloning required.

For real-time feedback (recommended), start Claude Code with the channel flag:

claude --dangerously-load-development-channels plugin:forge@forge-marketplace

This enables Claude Code Channels so your browser clicks arrive in Claude's session as <channel source="forge"> events the moment they happen. The --dangerously-load-development-channels flag is only needed until forge is approved for the official channel allowlist.

Without --channels, forge still works — a UserPromptSubmit hook picks up your pending browser feedback whenever you send any message in your Claude session.

git clone https://github.com/mahuebel/forge.git
# In Claude Code:
/plugin marketplace add ./forge
/plugin install forge@forge-marketplace

3. Use it

In any Claude Code session:

/forge 3 variations of a pricing page with monthly/yearly toggle

Claude starts the workspace server, writes three HTML files, and tells you the URL. Open it in your browser — the rest is clicking.

That's the whole setup. You never run the Bun server yourself.

Hands-off? Use auto mode:

/forge auto a settings page with profile, billing, and notifications sections

Claude generates variations, scores them with a judge panel, refines across multiple rounds (default 2), and hands you a ranked shortlist — no clicking required. The variations still land in the workspace so you can inspect them, and the final pick is yours: Accept one in the browser or say "go with B". Runs as a background dynamic workflow.

What you see in the browser

Grid View (for comparing components)

Three panels side by side. Each loads a variation in an iframe for full style isolation. Hover to highlight, click the header buttons to like or reject the whole variation.

┌──────────────────────────────────────────────────────────────┐
│  ⚒ forge    "3 variations of a pricing page..."  ● Live      │
├──────────────────────────────────────────────────────────────┤
│  Select  Annotate   👍 👎   |   Grid | Full                  │
├──────────────┬──────────────┬──────────────────────────────┤
│ A — Basic    │ B — Featured │ C — Side-by-side              │
│  [ iframe ]  │  [ iframe ]  │  [ iframe ]                   │
│     ✓  ✗    │     ✓  ✗    │     ✓  ✗                       │
└──────────────┴──────────────┴──────────────────────────────┘
│  Selected: 1   Annotations: 0   Rejected: 1      [ Refine ] │
└──────────────────────────────────────────────────────────────┘

Full View (for comparing full pages)