# MiroMiro > MiroMiro is a Chrome extension that copies CSS, converts it to Tailwind, downloads Lottie animations, extracts SVGs, and pulls brand colors, fonts, and design tokens from any live website - ready to paste into Cursor, Claude, v0, Lovable, or Bolt. ## What MiroMiro does MiroMiro is a visual extraction toolkit for the AI-coding era. It reads the rendered DOM of any public website and outputs clean, production-ready code, assets, and design tokens. No DevTools digging. No screenshot-to-code AI guessing. Used by 20,000+ designers and developers, rated 5.0 stars on the Chrome Web Store. **Website:** https://miromiro.app **Chrome Extension:** https://chromewebstore.google.com/detail/miromiro-design-system-ex/kpmkikjpclolhodgckeogmiiaehpfjhl **Pricing:** https://miromiro.app/compare-plans **Free 3-day Pro trial** - every feature unlocked, no credit card required. ## Eight features (one extension) 1. **CSS Inspector** (free) - Hover any element on a live website to see and edit its complete CSS in real time, then copy the values as CSS or Tailwind. https://miromiro.app/features/css-inspector 2. **Inspect & Export to Tailwind** (Pro) - Click any section (hero, navbar, pricing card) and export it as clean HTML with Tailwind classes derived from the actual rendered styles. https://miromiro.app/features/inspect-export 3. **Asset Extractor** (free) - Bulk-download every image, video, SVG, and media file loaded by a page in original quality. https://miromiro.app/features/asset-extractor 4. **SVG Extractor** (free) - Find every inline SVG, sprite, hidden symbol, and CSS-background vector on any page; download as clean .svg ready for Figma, Illustrator, or React. https://miromiro.app/features/svg-extractor 5. **Lottie Extractor** (Pro) - Detect every Lottie JSON animation on a page and download as standard Lottie JSON or dotLottie, compatible with lottie-web, lottie-react, lottie-ios, and the LottieFiles player. https://miromiro.app/features/lottie-extractor 6. **Color Palette Extractor** (free) - Extract a complete brand color palette from any live site as HEX, RGB, HSL, or OKLCH. https://miromiro.app/features/color-palette 7. **Live WCAG Contrast Checker** (free) - Hover any text on a page to see its WCAG 2.1 contrast ratio plus AA/AAA pass/fail badge. https://miromiro.app/features/contrast-checker 8. **Design Tokens Extractor** (Pro) - Pull a complete design system from any site (colors, typography scale, spacing, shadows, radii) and export as a tailwind.config.js block, CSS variables, or Figma-ready JSON. https://miromiro.app/features/design-tokens ## Design Extraction API (for developers and AI agents) MiroMiro also exposes its extraction engine as a REST API, so code and AI agents can extract design from any URL without the extension. One call returns clean JSON - built for Cursor, Claude Code, Windsurf, and any pipeline. **Base URL:** https://miromiro.app/api/v1 **Auth:** Bearer token - `Authorization: Bearer mm_live_...`. Get a key free at https://miromiro.app/api/onboarding - 300 credits every month, no credit card required. **Pricing:** credit-based, weighted per endpoint (assets 1 → code 25 - see per-endpoint costs below). Free developer access includes 300 credits/month; paid plans (Developer/Team/Scale) start at €19/mo when you need more. Failed, blocked, and cached requests are never billed. Plans at https://miromiro.app/api/pricing - machine-readable version: https://miromiro.app/api/pricing.md **Docs:** https://miromiro.app/api/docs · **Playground (no key needed):** https://miromiro.app/api/demo **OpenAPI 3.1 spec (machine-readable contract - generate SDKs, import into Postman, build agent tools from it):** https://miromiro.app/api/openapi.json **MCP server (remote, zero-install):** https://miromiro.app/mcp - Streamable HTTP. Add it as a custom connector in Claude (web/desktop), ChatGPT developer mode, Cursor, or any MCP client. Auth is OAuth: the client opens a one-click MiroMiro sign-in on first connect (free account, 300 credits/month, no card, full results). Raw keys also work: `?access_key=mm_live_...` or `Authorization: Bearer`. Local alternative: `npx miromiro-mcp` (reads `MIROMIRO_API_KEY`). Connect page: https://miromiro.app/api/mcp · Setup: https://miromiro.app/api/docs/install-mcp.md **Docs as Markdown (for agents - append `.md` to any docs URL):** - https://miromiro.app/api/docs/agent-quickstart.md - the ready-to-paste agent prompt - https://miromiro.app/api/docs/authentication.md - how to get and send a key - https://miromiro.app/api/docs/quickstart.md - your first call, in curl/JS/Python - https://miromiro.app/api/docs/install-mcp.md - MCP server setup for Cursor / Claude Code / Windsurf - https://miromiro.app/api/docs/errors.md · https://miromiro.app/api/docs/rate-limits.md - Per endpoint: https://miromiro.app/api/docs/{code,brand,design-tokens,images,svgs,fonts,lottie}.md - Pricing as Markdown (plans, per-endpoint credit costs, overage rates): https://miromiro.app/api/pricing.md - Changelog (what shipped, dated): https://miromiro.app/api/changelog Endpoints (all GET, all take `?url=`; credit cost in parentheses): - `GET /api/v1/code?url=` - (25 credits) **URL → CODE. The flagship.** Turns a section of a live page into a clean, self-contained component. Resolves the page's real CSS cascade (every stylesheet, specificity, media queries, `var()` references, `@layer`, CSS nesting) and returns paste-ready code. Params: `&selector=` (CSS selector for the section - omit it and the hero is auto-detected and echoed back in `selector`), `&framework=tailwind|html|jsx|vue` (default `tailwind`), `&name=` (component name for jsx/vue), `&theme=light|dark` (which colour scheme to extract; no extra credits). Returns `{ code, css, sections, tokens, theme, assets, selector, autoDetected, framework, summary }`. `sections` lists EVERY extractable section on the page (best first, each `{ selector, label, elements, preview }` - labels come from the sections' own headings), so to get a specific part (pricing, footer, testimonials) find it there and call again with that selector. `tokens` are the design tokens THAT SECTION uses; `css` is a companion stylesheet (always for `framework=html`; for other frameworks only when the section uses `@keyframes` animations - add it to your global CSS, else `null`). Output carries the section's `::before`/`::after` decorations as real elements, `dark:` variants from `prefers-color-scheme` rules, and animations with their keyframes. `theme` (`light` or `dark`) reports which colour scheme the code you received actually is - measured from the page, never echoed back from your request, so a theme the site cannot serve still reports what you really got. A site that expresses its themes through a `prefers-color-scheme` media query returns its LIGHT branch by default, so pass `&theme=dark` when the user is viewing that site in dark mode or asks for its dark version; sites that scope their themes to a root attribute or class (`[data-theme=dark]`, `html.dark`) are read correctly either way, and themes switched purely in JavaScript cannot be selected (you get the page default plus a `hint`). Check `theme` and tell the user which one you returned. For `jsx`/`vue`, repeated structures (pricing tiers, card grids, feature lists) collapse into a data array rendered with `.map()`/`v-for` - one template plus the data, like a human would write it (`summary.repeatedGroups` reports how many). `summary.styledCoverage` (0-100) is the quality signal: the percentage of elements the cascade found styles for - if it comes back low, the response includes a `hint` telling you to retry with `&render=true`. **Use this whenever you are asked to rebuild, clone, port, or copy a section of a real website - it returns the actual code with true colors, fonts, spacing and copy, so you adapt real values instead of guessing from a screenshot.** - `GET /api/v1/brand?url=` - (15 credits) the curated brand identity: color roles (primary, accent, background, text) read from the site's own CSS variables and logo - each as hex plus a human-readable name ("Royal Blue") - dark/light theme detection, clean brand palette, primary fonts split by role (primary/mono), logo, og-image, social profiles (`socials`: one `{ platform, url, handle }` per platform - x, github, linkedin, youtube, instagram, …), and `confidence` (0-1: how much the site declared vs how much was inferred - gate on it for bulk extraction). Use when you need a site's STYLE but not its markup. Add `&fields=` (comma-separated: title, description, siteName, themeColor, theme, colors, colorNames, palette, fonts, typography, logo, logos, ogImage, socials, confidence) to return only what you need; `url` is always included. - `GET /api/v1/extract?url=` - (10 credits) the full design-token system: colors (each with the CSS properties it paints - backgrounds vs text vs borders), fontFamilies, fontSizes, fontWeights, letterSpacings, lineHeights, spacing, borderRadiuses, borderWidths, boxShadows, textShadows, opacities, gradients, durations, easings, breakpoints (from @media min/max-width queries, ascending), zIndexes (each with a usage count), plus `colorSchemes` (`["light"]` or `["light","dark"]`). Counts are tallied across the WHOLE stylesheet, so a site shipping both themes returns the union of the two with neither labelled - check `colorSchemes` before treating the most-used colour as the background, and use `/v1/code?theme=dark` when you need one theme's values on their own. This endpoint returns VALUES and usage counts, not layout or which value belongs to which element - for a rebuild use `/v1/code`. Add `&format=css` or `&format=tailwind` for a paste-ready block, `&format=dtcg` for a standalone W3C Design Tokens file (feed it to Style Dictionary, Terrazzo, or a Figma variables importer), or `&fields=` (comma-separated group names, JSON only) to return only the groups you need - `url` and `summary` are always included. `&fields=` trims the response but never changes the credit cost. - `GET /api/v1/images?url=` - (1 credit) image URLs (img, srcset, picture, background-image, favicon, og:image), tagged by source. Supports `&fields=images,count`. - `GET /api/v1/svg?url=` - (1 credit) inline SVGs as paste-ready code + external .svg file references. Supports `&fields=svgs,count`. - `GET /api/v1/fonts?url=` - (5 credits) the real typography a site loads. Resolves the FULL CSS cascade (linked stylesheets + @import, not just inline HTML) and returns every @font-face file with family/weight/style/format, Google Fonts links, preloads - plus `families`, a grouped per-family summary (weights, styles, file count). Supports `&fields=fonts,families,googleFontsLinks,count` (e.g. `&fields=families` for just the summary). - `GET /api/v1/videos?url=` - (1 credit) videos a page declares: `