Item logo image for uioption

uioption

Item media 1 (screenshot) for uioption

Overview

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.

Details

  • Version
    1.0.0
  • Updated
    July 4, 2026
  • Offered by
    kilic
  • Size
    24.53KiB
  • Languages
    English
  • Developer
    Email
    extensions@muhammedkilic.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, visit the developer's support site

Related

Impeccable

4.9

Detect common UI anti-patterns in any web page

Design Extractor

0.0

Extract and analyze website design systems using AI

Modify — Visual CSS Editor for AI Coding Agents

5.0

Edit live webpages with a visual CSS editor, then copy exact changes as a structured prompt for terminal AI coding agents.

Vibe Annotations - Visual Feedback for AI Coding Agents

5.0

Visual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP.

LoupeKit — Web Tech & AI Vibe-Code Inspector

5.0

Inspect web tech stacks, extract design tokens, and audit AI vibe-coded sites with actionable refactoring guides.

VisualDNA – Design System Extractor

5.0

Extract the complete visual design system of any site. Get colors, typography, components, and generate AI-ready prompts instantly.

ProjectX

0.0

Capture any UI element from the web, extract its code, and generate AI-ready prompts

MarkIt — 圈选元素,自动生成 AI 修改指令

4.8

你一眼看出页面哪里不对,但跟 AI 说清楚得花十分钟。直接在页面上圈选并截图,MarkIt 自动补充元素定位、CSS 选择器和验收标准,输出 Cursor、Claude Code 能直接执行的结构化指令。

AssetPullKit - Free Web Asset Extractor

5.0

Extract assets, inspect styles, and explore design tokens from any webpage, 100% local, no APIs needed.

UIDrop — Design System Extractor for AI

5.0

Extract any site's colors, fonts, spacing & components in one click. Send the design system to your AI coding assistant.

Walnut AI - Sales Demo Platform

5.0

Capture websites and user flows to create interactive demos with Walnut AI.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Impeccable

4.9

Detect common UI anti-patterns in any web page

Design Extractor

0.0

Extract and analyze website design systems using AI

Modify — Visual CSS Editor for AI Coding Agents

5.0

Edit live webpages with a visual CSS editor, then copy exact changes as a structured prompt for terminal AI coding agents.

Vibe Annotations - Visual Feedback for AI Coding Agents

5.0

Visual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP.

LoupeKit — Web Tech & AI Vibe-Code Inspector

5.0

Inspect web tech stacks, extract design tokens, and audit AI vibe-coded sites with actionable refactoring guides.

VisualDNA – Design System Extractor

5.0

Extract the complete visual design system of any site. Get colors, typography, components, and generate AI-ready prompts instantly.

ProjectX

0.0

Capture any UI element from the web, extract its code, and generate AI-ready prompts

MarkIt — 圈选元素,自动生成 AI 修改指令

4.8

你一眼看出页面哪里不对,但跟 AI 说清楚得花十分钟。直接在页面上圈选并截图,MarkIt 自动补充元素定位、CSS 选择器和验收标准,输出 Cursor、Claude Code 能直接执行的结构化指令。

Google apps