Magpie UI — AI Inspector & Code Exporter

AI-powered UI inspector: export clean HTML, CSS, Tailwind and React, then explain, clean, audit and adapt CSS with AI.

Inspect it. Export it. Improve it with AI. Magpie UI is a local-first inspection, code export and AI toolkit for frontend developers. Press Ctrl+Shift+Y, hover any element, and click. A focused panel gives you the selection in the format your codebase actually wants — plus built-in AI tools that explain, clean, audit and adapt CSS for mobile: — TAILWIND: computed styles mapped to real utilities. Off-scale values become faithful arbitrary values rather than lossy nearest-token guesses. — REACT: a paste-ready component with JSX-safe markup, className conversion and camel-cased style objects. — CLEAN CSS: every node is compared with browser defaults; inherited values are deduplicated and shorthands collapsed. — HTML: junk attributes are stripped, asset URLs are made absolute and inline SVG colours are preserved. — DESIGN TOKENS: scan the page into a tokens.json containing its palette, type scale, spacing, radii and shadows, ranked by usage. — SELECTION HISTORY: jump straight back to any recent selection by name, with anything the page has since removed clearly flagged. — EXPORT CHECKS: before you copy, Magpie UI flags what the code cannot carry on its own — linked images, custom fonts, and behaviour that lives in JavaScript. — PRIVATE CAPTURE LIBRARY: save, search, star, export and restore inspected components. Captures stay in Chrome extension storage on this browser. — DETACHED INSPECTOR (PRO): move Magpie UI into its own resizable window on another screen. Keep Live Picking active while each new page selection updates the window, or pause it to interact with the source page. — AI TOOLS (PRO): explain unfamiliar CSS, prepare a conservative cleanup, audit responsive/accessibility/maintenance risks, and draft narrow-screen additions. Every result is presented as a reviewable draft. LOCAL-FIRST BY DESIGN Magpie UI runs only when you invoke it, on the tab you invoke it on. Standard extraction and saved captures stay on your device. When you deliberately run an AI tool, Magpie UI discloses the transfer first, removes URLs, page text and HTML, then sends only the selected CSS, your licence key and an anonymous device ID to Blueboot Apps; OpenAI processes the CSS to produce the requested result. Free tier: inspector, HTML and CSS export, selection history and export checks, plus the private local capture library — forever, with no account required. Pro ($59 one-time, no subscription): Tailwind, React and design-token exports; Copy for AI; four AI tools; and the detached multi-screen inspector — plus 100 AI credits that never expire. Buy more credits any time from Magpie UI Options. Your licence activates on up to 2 browsers at a time; free a slot any time from Options.