https://github.com/plfavreau/design-variant-picker
Human-in-the-loop design variant picker for OpenCode. Pick or regenerate HTML design variants from a live browser grid, powered by your conversation's model.
https://github.com/plfavreau/design-variant-picker
design frontend human-in-the-loop opencode opencode-plugin ui
Last synced: 25 days ago
JSON representation
Human-in-the-loop design variant picker for OpenCode. Pick or regenerate HTML design variants from a live browser grid, powered by your conversation's model.
- Host: GitHub
- URL: https://github.com/plfavreau/design-variant-picker
- Owner: plfavreau
- License: mit
- Created: 2026-06-05T15:11:59.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-06-07T13:13:16.000Z (about 1 month ago)
- Last Synced: 2026-06-07T14:15:35.406Z (about 1 month ago)
- Topics: design, frontend, human-in-the-loop, opencode, opencode-plugin, ui
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/design-variant-picker
- Size: 18.1 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# design-variant-picker
A design picker for [OpenCode](https://opencode.ai) that keeps you in the loop. The agent builds HTML design variants, and you pick one (or ask for more) from a live grid in your browser. New variants are made by the model you're already chatting with, so there's **no image-generating model required**. The model just writes HTML, no extra model, no API keys.
## Demo
## Install
Add it to your `opencode.json`:
```json
{
"plugin": ["design-variant-picker"]
}
```
That's it. Restart OpenCode (the tool binds at session start, so open a **new** session).
## Use
Just ask:
> Generate 9 variants of this pricing card and let me pick.
The agent calls the `variant_picker` tool. A browser tab opens **right away** and the variants will start loading. From there you drive:
- **Click a tile** to select it.
- **Generate variants of this**: the tiles show skeletons, the agent makes a new batch based on your pick and any notes, and the **same tab updates in place**. Repeat as many times as you want.
- **Use this**: hands the chosen variant back to the agent, and the chat keeps going.
You can type notes to guide each round, and choose how many variants you want next from the **Next:** dropdown (default 9).
## How it works
```
agent ──variant_picker(variants)──▶ local picker tab (you)
▲ │
│ decision: use | regenerate | abandoned│
└────────────────────────────────────────┘
on "regenerate", the agent makes new variants of the
one you picked and shows them in the same tab
```
- To skip the first wait, the agent opens the tab with an empty batch (`open`) so the skeletons show up immediately, then fills it with the first batch.
- The tool **waits** until you act, then returns `use` (with your pick), `regenerate` (the agent makes the next batch itself), or `abandoned` (you closed the tab, so the agent never hangs).
- Variants render in sandboxed ``s. The server is bound to `127.0.0.1`.
- Closing the tab cancels cleanly (a beacon resolves the call right away).
## Remote access (optional)
To open the picker from another machine, the agent can pass `remote: true`. This serves the picker through an anonymous [Cloudflare Quick Tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/), which needs [`cloudflared`](https://github.com/cloudflare/cloudflared) on your `PATH`. If it's missing, it falls back to localhost.
## License
MIT