uioption

Inject design variants and inspect UI components on local dev pages — built for AI-assisted coding workflows

uioption is a developer tool for comparing UI design options live in your browser and inspecting components on local dev pages. It's built for AI-assisted coding: when your coding assistant generates multiple design variants, uioption lets you flip through them instantly — no reloads, no code editing, no devtools digging. WHY INSTALL IT Working with an AI coding assistant usually means asking for design options one at a time: generate, look, ask for another, repeat. uioption removes that loop. Ask your assistant to generate 3–4 variants at once using a simple markup convention, and a floating picker appears on your page. Switch between variants with arrow keys and pick the winner in seconds. And when you want to tell your assistant "change THIS element", the inspector gives you exactly what to paste: the component name, source file, and a usable CSS selector — copied to your clipboard with one click. UI PICKER • Wrap competing design options in data attributes (the popup includes a ready-to-copy prompt for your assistant) • A floating, draggable picker appears automatically on matching pages • Cycle through variants with arrow keys or a dropdown — only one variant is visible at a time • Two layouts: a compact bar or a card grid for feature-by-feature comparison • Auto-inject on localhost pages, or inject manually from the popup UI INSPECTOR • Hover any element to highlight it and see what it is • Detects React, Vue, Angular and Svelte components — including component names and source file locations where available • Falls back to smart CSS selectors and semantic paths for plain HTML • Click to copy everything to your clipboard, ready to paste into your assistant's chat PRIVATE BY DESIGN uioption only runs on localhost, 127.0.0.1 and local files — it never touches production websites, collects no data, and makes no network requests. Works with any AI coding assistant — or without one.