# 提取任何网站，所需的全部工具。

八款专业工具——从 CSS 检查、SVG 提取到 Lottie 捕获、设计令牌和一键 Tailwind 导出。全部集成在一个快速的 Chrome 扩展中。

## 内置工具

- **工具数量**: 8
- **活跃用户**: 6000+
- **Chrome 评分**: 5★
- **复制时间**: <1s

## CSS Inspector

### Live CSS Inspector & Editor

Inspect any element, see its CSS values, and edit them live on the page — colors, fonts, spacing, shadows, anything. Watch the website update in real time, then copy your changed values straight out as production-ready code.

- Edit any CSS value inline and see the page update instantly
- Tweak colors, fonts, spacing, shadows, gradients on a real, live site
- Copy your edited values straight out as CSS or Tailwind

## Asset Extractor

### Asset Extractor

Download images, videos, SVGs, and all visual assets from any website. Bulk image downloader and asset extraction tool built into one Chrome extension.

- Download all images from any page
- Extract SVGs and icons
- Bulk export entire asset libraries

## SVG Extractor

### SVG Extractor

Extract SVG icons and graphics from any website. Download scalable vector graphics ready for Figma, Illustrator, or your codebase. A powerful SVG Gobbler alternative.

- Find all SVGs on any page
- Download in original quality
- Preserve scalability

## Lottie Animation Extractor

### Lottie Animation Extractor

Extract Lottie animations from any website. Download Lottie JSON files ready for lottie-web, lottie-react, or any Lottie player on web and mobile.

- Detect Lottie animations automatically
- Download ready-to-use JSON files
- Works with all major frameworks

## Brand Color Extractor for Any Website

### Brand Color Extractor

Extract complete color palettes from any website. Get brand colors with HEX, RGB, and HSL values — a better alternative to Site Palette and Coolors for real-world extraction.

- Extract all colors from any site
- Get HEX, RGB, and HSL values
- Identify primary and accent colors

## Live Contrast Checker for Real Websites

### Live Contrast Checker

Check color contrast ratios for WCAG 2.1 accessibility compliance. Test AA and AAA levels for foreground and background color combinations directly on live websites.

- Check WCAG compliance instantly
- AA and AAA level verification
- Real-time contrast ratios

## Inspect & Export to Tailwind CSS Code

### Inspect & Export

Inspect any website element and export it as clean Tailwind CSS code. Select hero blocks, navbars, cards, or any section and get production-ready Tailwind output. A real website to Tailwind converter.

- Inspect any element's CSS, fonts, and colors instantly
- Export entire sections as production-ready code
- Copy hero blocks, navbars, and cards in seconds

## Design Tokens Extractor — Export from Any Website to Figma & Code

### Design Tokens Extractor

Free tool to extract design tokens from any website: colors, typography, spacing, shadows, radii. Export as CSS variables, Tailwind config or Figma variables. No DevTools, no manual copying.

- Extract CSS variables automatically
- Export to Tailwind config
- Identify design patterns

## 为什么选择 MiroMiro

### 一个扩展，八种工作流。

不必在 CSS Peeper、ColorZilla、SVG Gobbler 和 Lottie 抓取器之间切换。MiroMiro 全部替代——并直接导出到 Tailwind、Figma 或您的 AI 编辑器。

### 比 DevTools 更快

悬停、点击、复制。无需检查器树、无需计算样式面板、无需手动清理。CSS、图片或 SVG 一秒内即可到达剪贴板。

### 本地运行 & 隐私优先

提取完全在浏览器中执行。我们从不知道您复制了什么、访问了哪里、保存了什么。无云队列、无工作遥测。

### 为 AI 工作流打造

输出干净的 Tailwind ＋ 语义化 HTML，可直接粘贴到 Cursor、Claude、v0 或 Lovable——让 AI 基于真实设计而非截图进行构建。

## 常见问题

安装 MiroMiro 前您需要了解的一切。

- **MiroMiro 能做什么 DevTools 做不到的？**
- **哪些功能免费，哪些需 Pro？**
- **MiroMiro 在 React、Vue、Framer 或 Webflow 网站上能用吗？**
- **我复制或访问的内容会发送到您的服务器吗？**
- **我能将区块导出为 Tailwind 代码吗？**
- **支持哪些浏览器？**

## 准备好加速您的工作流程了吗？

加入 6,000+ 每周节省数小时的设计师和开发者。