uiscanner vs MiroMiro: an extension panel, or an agent build brief?

Both tools point at a public page and hand you its design back. They diverge on what "back" means. MiroMiro gives you clean, paste-ready output: real HTML, Tailwind classes, CSS variables, assets, tokens you can drop straight into a file or a Figma library. uiscanner gives you a build brief: tokens plus a section-by-section structure plus a prompt your coding agent acts on through MCP. One fills your clipboard. The other fills your agent's context. That is the whole decision, but the reasons are worth spelling out.

what MiroMiro is good at

MiroMiro is a browser extension (Chrome, Edge, Brave, Opera, Firefox) that inspects a live site and exports its real markup and styles without you ever opening DevTools. Select a section, a card, a pricing table, and it gives you clean HTML plus Tailwind, pulled from the rendered DOM rather than a screenshot, so it is pixel-accurate to what shipped. Hover any element to read its exact CSS, fonts, spacing, and dimensions. Edit values live and copy the result.

It is genuinely strong on the export surface. It pulls color palettes as hex, RGB, HSL, or OKLCH. It extracts design tokens (colors, fonts, radius, shadows) as a Tailwind config or CSS variables, and its own guide walks you through pushing that JSON into Figma via Tokens Studio so your design file and the production site share the same values. It downloads images in original quality, grabs inline SVGs as editable vectors, and even pulls Lottie JSON. Extraction runs locally in your browser. If your next move is "get this exact thing into my file," MiroMiro is built for that move and does it well.

That is the shape of the whole inspect-and-export category. Extensions like this, and the many "design token extractor" plugins, all surface a page's real values so a person can copy them into the next tool. The output is something you paste. It is genuinely useful when a human is doing the pasting.

where uiscanner is doing a different job

uiscanner's output is not markup for you to paste. It is a brief for your agent to build from. Three things make it a different deliverable:

• It reads the rendered page plus the DOM, and reasons about roles. MiroMiro faithfully exports the element you selected. uiscanner looks at how the page actually presents and tells you the real primary button rather than the first one in the source, whether the hero is centered or split, and which imagery is decorative, with prompts to recreate that imagery as originals instead of copying it.
• It captures structure, not just the piece you grabbed. You get a section-by-section map of how the whole page is assembled. That layout read is exactly what an AI needs to lay out a comparable page, and it is the part a copy-the-element flow never produces.
• It writes a build prompt, tailored to an archetype. The teardown ends in a Claude-tailored prompt aimed at a target: landing, dashboard, marketing, ecommerce, portfolio, mobile, or general. That prompt, plus the tokens and structure, is what you hand the agent. If you picked the wrong target, retarget_teardown re-tailors the prompt to another archetype without re-scanning.

None of that is a knock on MiroMiro. Copying a real hero as exact HTML and generating a build brief for an agent are two different jobs, and each tool is pointed squarely at one of them.

the pipeline difference, and why it matters for AI coding

Here is the practical gap. With an inspect-and-export tool, you copy the markup, then you paste it into your codebase or into a chat with your agent. That works, and MiroMiro even markets its output as paste-ready for Cursor, Claude, and v0. But pasting a page's literal HTML gives the agent an artifact to mimic, not a system to build from. The agent inherits someone else's class soup and rebuilds the same DOM instead of expressing the same design language in your stack.

uiscanner closes the loop a different way, by being an MCP server and a CLI rather than a clipboard. One line wires it into Claude Code, Cursor, or Codex:

claude mcp add uiscanner -- npx -y uiscanner-mcp@latest

Prefer the terminal for a one-off? The CLI ships in the same package:

npx -y uiscanner-mcp@latest scan stripe.com --target landing

After that your agent can scan a URL and receive the whole teardown as structured data in one call: tokens, section structure, brand read, and the build prompt. There are five tools in all. ui_teardown runs the scan, ui_probe is a cheap preflight that spends no scan, get_teardown re-fetches a finished one by id or link, retarget_teardown re-aims the prompt at another archetype, and whoami reports your plan and remaining scans. The scanner is stdio-only, so it runs on your machine next to the agent; there is no hosted endpoint to point at.

That is the split. MiroMiro hands you the exact bytes to reuse. uiscanner hands your agent a design system to build against, so it does not fall back on the generic defaults every model ships by default.

side by side

which one you actually want

If your next step is a human one, MiroMiro is the right call. You want the exact HTML of that pricing table, a palette in OKLCH, the real SVG logo, or a token file to import into Figma. Reach for the extension, copy what you need, and move on. It is fast and it is honest about being an export tool.

If your next step is an AI one, uiscanner is built for it. You want your coding agent to rebuild a page's design language in your own stack, and you do not want it mimicking someone else's markup or defaulting to the same stock look. Point uiscanner at a reference, hand the teardown to the agent, and it builds from a real system with the layout and the prompt already in context.

They can even sit side by side. Use MiroMiro to grab an asset or eyeball a palette while you browse, then run uiscanner on the page worth actually learning from and let your agent build.

One honest note that applies to any tool here: the reputable ones are transformative, not extractive. uiscanner describes and tokenizes a page and never re-hosts the original site's asset bytes; you rebuild in your own stack from the tokens and structure. That is the only version of this that is fair to the sites you learn from.

try it

The web app scans a URL straight from the address bar, for example uiscanner.com/https://stripe.com, or wire the MCP and CLI into your agent with the one-liner above. Every scan returns an id and a shareable uiscanner.com/t/<id> link. Browse example teardowns to see the output first, including full breakdowns of the Stripe and Vercel design systems. The free plan includes 5 scans per rolling 30 days, and paid plans (Indie at 100 scans, Studio at 400) share one quota across the web app, MCP, and CLI.