?
Explain
Understand layout, spacing, typography, interaction states, and the reason important declarations exist.
Inspect any live interface. Select an element and get clean HTML, CSS, Tailwind, React, or tokens.json—then explain, clean, audit and adapt the CSS with built-in AI.
Free
$0
forever
Live inspection
Clean HTML + CSS
Get startedPro
$59
one-time
Framework exports
Detached + AI
Get Magpie UI ProNo DevTools spelunking and no screenshot-to-code guesswork. Magpie UI reads the live page, removes browser noise, and keeps the outputs together.
Hit Ctrl+Shift+Y and hover. The bounding box snaps between elements with live tag and pixel dimensions. Use arrow keys to move through the DOM without losing your place.
Click once. Magpie UI captures markup, inline SVGs, relevant interaction states, and the declarations that differ from real browser defaults.
Copy free HTML or CSS, save it locally, or use Pro to switch to Tailwind, React, tokens, focused AI drafts, and agent-ready context.
Save the reference, inspect another element, or detach the Pro window to another screen and keep Live Picking as you work through the page.
Select a component once, then take the format your project needs. Magpie UI starts with the live page, not a screenshot approximation.
<div class="relative grow basis-0 px-7 py-8 text-left text-[#0f172a] bg-[#ffffff] border-2 border-solid border-[#6366f1] rounded-2xl shadow transition duration-150"> <span class="block absolute -top-3 left-7 px-2.5 py-1 text-[11px] font-semibold tracking-[0.5px] uppercase text-[#ffffff] bg-[linear-gradient(90deg,_#6366f1,_#8b5cf6)] rounded-full">Launch</span> <p class="mt-0 mb-3 text-sm font-semibold tracking-[1px] uppercase text-[#6366f1]">Pro</p> <p class="mt-0 mb-1 text-5xl font-extrabold leading-none">$59</p> <p class="mt-0 mb-6 text-[13px] text-[#94a3b8]">one-time</p> <ul class="mt-0 mb-7 pl-0 list-none"> <li class="flex items-center gap-2.5 py-1.5 text-sm text-[#334155]">…</li> </ul> </div>
<div class="card"> <span class="badge">Launch</span> <p class="plan">Pro</p> <p class="price">$59</p> <p class="period">one-time</p> <ul class="features"> <li>Tailwind export</li> <li>Detached inspector</li> </ul> </div> <!-- tracking attributes and extension UI removed -->
/* div.card — extracted from example.com by Magpie UI */ .card { position: relative; flex-grow: 1; padding: 32px 28px; border: 2px solid #6366f1; border-radius: 16px; background-color: #ffffff; color: #0f172a; text-align: left; box-shadow: #0000001a 0px 1px 3px 0px, #0000001a 0px 1px 2px -1px; transition: box-shadow 0.15s; } .badge { position: absolute; top: -12px; left: 28px; background-image: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 9999px; text-transform: uppercase; } /* hover states come too — var(--accent-hover) resolved for you */ .cta:hover { background: #818cf8; }
export default function Card() { return ( <div className="relative grow basis-0 px-7 py-8 text-left text-[#0f172a] bg-[#ffffff] border-2 border-solid border-[#6366f1] rounded-2xl shadow transition duration-150"> <span className="block absolute -top-3 left-7 px-2.5 py-1 text-[11px] font-semibold uppercase text-[#ffffff] rounded-full"> Launch </span> <p className="mt-0 mb-3 text-sm font-semibold uppercase text-[#6366f1]">Pro</p> <p className="mt-0 mb-1 text-5xl font-extrabold leading-none">$59</p> {/* … */} </div> ); }
{
"$description": "Design tokens extracted by Magpie UI",
"color": {
"color-1": "#6366f1",
"color-2": "#8b5cf6",
"color-3": "#0f172a"
},
"typography": {
"fontFamily": { "font-1": "Inter" },
"fontSize": { "size-1": "13px", "size-2": "48px" }
},
"spacing": {
"space-1": "12px",
"space-2": "28px",
"space-3": "32px"
},
"borderRadius": { "radius-1": "16px" }
}
DevTools is excellent for debugging a page. Magpie UI packages the structure, styles, states, and context you need to recreate the useful part in your own codebase.
Values on Tailwind's scale become named utilities — px-7, rounded-2xl, shadow. Off-scale values become faithful arbitrary ones, never a lossy "nearest" guess.
One click gives you an export default function with className, camelCased style objects, and JSX-safe escaping. Vue and Svelte are on the roadmap.
Every node is diffed against real browser defaults probed at runtime; inherited values are deduped and shorthands collapsed. Ten declarations, not 350.
Scan a whole site into tokens.json: palette, type scale, spacing, radii, and shadows — ranked by how often they're actually used.
Markup, styles, hover and focus states, and inline SVGs with their colors baked in; asset URLs absolutized. What you paste doesn't just look like what you saw — the buttons still light up.
Save useful components to this browser and find them again when you need them. Magpie UI only runs when you invoke it and never logs the pages you inspect.
Move to parents, children, and siblings with the arrow keys when nested layouts make the mouse too blunt. Built-in help keeps every shortcut one click away.
Move the complete Pro inspector out of the page, keep Live Picking active, and let every new selection update the separate window.
Pro adds AI that explains unfamiliar CSS, drafts a conservative cleanup, audits responsive and accessibility risks, or adapts a component for narrow screens—each returned as a reviewable draft beside the original.
Copy a structured brief with source metadata, relevant markup, clean CSS, Tailwind, React, and design tokens—not an unexplained screenshot.
A searchable history of your recent selections lets you return to any one by name in a click — and it flags anything the page has since removed, so you're never staring at a dead element.
A quick pre-copy check flags what the export can't carry on its own — linked images, custom fonts, or behaviour that lives in JavaScript — so there are no surprises when you drop it into your project.
Start from real DOM and computed styles, then adapt the clean output to your system.
Inspect exact spacing, typography, states, and tokens without reverse-engineering a screenshot.
Hand over implementation context it can reason from instead of asking it to guess from pixels.
Magpie UI sends the extracted CSS—not your browsing history—to a focused action you choose. Every result appears as a reviewable draft beside the original, ready to copy only when it earns your trust.
Understand layout, spacing, typography, interaction states, and the reason important declarations exist.
Generate a conservative cleanup draft that reduces repetition without casually changing visual behaviour.
Review responsiveness, keyboard focus, motion, contrast risks, and maintainability with fixes ranked first.
Create narrow-screen additions for the selected component instead of replacing its working desktop CSS.
Detach Magpie UI into its own compact browser window, drag it to another monitor, and keep selecting elements on the source page. Your reference stays completely visible while the code updates beside it.
<article class="grid gap-3 p-5 bg-[#fff] border rounded-xl shadow"> … </article>
Magpie UI gives your implementation the structure and styling context that a visual reference alone cannot carry.
| Screenshot reference | Chrome DevTools | Magpie UI | |
|---|---|---|---|
| Structural HTML | recreated by eye | manually inspect nodes | ✓ HTML + styles + SVGs |
| Source CSS | — | read rule by rule | ✓ cleaned and scoped |
| Tailwind / React handoff | — | — | ✓ paste-ready JSX |
| Design-token clues | — | — | ✓ tokens.json, ranked by use |
| Supported interactive states | not visible | — | ✓ captured, variables resolved |
| Browser-default noise removed | not applicable | you do it by hand | ✓ diffed at runtime |
| Focused AI review | generic visual guess | — | ✓ explain, clean, audit, mobile |
| Clear multi-monitor workflow | open beside your editor | dock or separate DevTools | ✓ detached with Live Picking |
| Saved references | your folders and bookmarks | your history and notes | ✓ searchable local library |
Free is a capable HTML and CSS inspector with an unlimited local library. Pro is a one-time purchase that permanently unlocks every framework export and workflow feature — no subscription. AI actions run on credits you top up only when you need them.
Free
$0
forever · no account
Pro
$59$99
one-time · no subscription
One-time payment · permanent licence · secure Stripe checkout
AI credits — top up only when you need them
Each hosted AI action — Explain, Clean, Audit or Mobile — uses one credit, and you're only charged when it succeeds. Credits never expire. Copy for AI is always free.
/* top up inside the extension · no subscription, ever */
Clear answers about browser access, AI, billing, and what Magpie UI can—and cannot—capture.
Any page you can open in Chrome, Edge, or Brave — production sites, staging, localhost. The exceptions are browser-internal pages (like the extension gallery) and content inside cross-origin iframes, which browsers wall off from every extension.
No. It uses the activeTab permission model, which means it can only touch a page in the moment you explicitly invoke it there. There is no telemetry on page contents — extraction happens entirely on your machine.
Exactly what the panel shows: cleaned HTML with junk attributes stripped and asset URLs absolutized, scoped CSS diffed against real browser defaults, Tailwind classes, a ready-to-paste React component, or a tokens.json — your choice.
Pro can move the complete Magpie UI panel into a separate resizable Chrome or Edge window. Drag it to another monitor and leave Live Picking enabled: each source-page selection updates the detached window. Pause the crosshair whenever you need to interact normally with the page.
Values that sit on Tailwind's default scale map to named utilities. Anything off-scale becomes an arbitrary value like w-[437px] — always faithful to the source, never rounded to a "close enough" token.
Pro comes with 100 AI credits, and they never expire. Each hosted AI action — Explain, Clean, Audit or Mobile — uses one credit, and you're only charged when it succeeds. Copy for AI never uses a credit. When you run low, top up inside the extension with a credit pack (50 for $5, 150 for $12, or 400 for $25). There's no subscription and every other feature keeps working regardless of your balance.
Only the extracted CSS needed for the action you press. Explain and Audit return guidance; Clean and Mobile return reviewable CSS drafts. Magpie UI does not let AI click the page, edit your project, or silently replace the original output.
Magpie UI captures styles for the first 400 elements in a selected subtree. This safety limit prevents a whole-page selection from freezing the browser; selecting a more focused component produces faster, more maintainable output.
No. Magpie UI Pro is a one-time purchase — $59 during launch, $99 afterwards. You pay once, receive your licence key straight away, and keep every Pro feature permanently. There's nothing to renew and nothing to cancel. The only thing you ever pay for again is more AI credits, and only if you choose to.
Yes — no account, no card, no trial clock. Free includes inspection, clean HTML and CSS, keyboard selection, and an unlimited private local library. Pro is an optional one-time purchase that adds Tailwind, React, tokens, focused AI, agent-ready context, and the Detached Inspector.