資料月份 2026-09

Magpie UI

Name: Magpie UI
Rating: 5 (4 reviews)
Author: bluebootapps

程式設計開發

AI 程式設計助手

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

在 Chrome 商店安裝 ↗官網 ↗

據 AlphaMoat 統計,截至 2026-09,Chrome 外掛 Magpie UI 使用者數為 21,環比 -36.4%,評分 5(4 人評價),在全部 9,324 款 AI 瀏覽器外掛中排名第 7,292 位,在「程式設計開發」分類(601 款)中排名第 464 位。

使用者數 · 2026-09

21-36.4%

評分

★ 54 評價

全站排名(9,324 個)

#7,292

「程式設計開發」排名

#464/ 601

Magpie UI 是什麼

Chrome 商店介紹

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.