MiroMiro란?
MiroMiro는 DevTools를 열지 않고도 모든 웹사이트에서 디자인 에셋을 검사, 복사, 내보낼 수 있는 Chrome 확장 프로그램입니다. 요소 위에 마우스를 올리면 CSS, 색상, 글꼴, 간격을 즉시 확인할 수 있습니다. 한 번의 클릭으로 이미지, SVG, Lottie 애니메이션을 다운로드하세요. 전체 디자인 토큰을 추출하여 Tailwind 설정 또는 CSS 변수로 내보낼 수 있습니다. 처음부터 다시 구축하는 데 지치지 않고 더 빠르게 출시하고 싶은 디자이너와 개발자를 위해 만들어졌습니다.
대상 사용자
- 프론트엔드 개발자 – UI 컴포넌트를 리버스 엔지니어링하고, 프로덕션에 바로 사용 가능한 Tailwind + HTML을 Cursor, Claude, v0에 바로 복사해야 하는 분
- 디자이너 – DevTools를 뒤지지 않고 라이브 사이트에서 브랜드 색상, 글꼴, 디자인 토큰을 추출하고 싶은 분
- 노코드 빌더 – 에셋, 애니메이션, 디자인 시스템을 빠르게 가져와 워크플로우를 가속화해야 하는 분
주요 기능
라이브 인스펙터
라이브 사이트의 요소 위에 마우스를 올리면 CSS를 확인할 수 있습니다. 색상, 글꼴, 패딩을 인라인으로 변경하면 페이지가 실시간으로 업데이트됩니다. 수정된 값을 CSS 또는 Tailwind로 복사해도 새로고침 시 변경 사항이 사라지지 않습니다.
코드로 내보내기
요소를 클릭하면 깔끔하고 의미론적인 Tailwind + HTML 코드가 생성되어 Cursor, Claude, v0에 바로 붙여넣을 수 있습니다. 더 이상 AI에게 UI를 설명하거나 추측할 필요가 없습니다. 정확한 코드를 한 번의 클릭으로 얻을 수 있습니다.
에셋 추출기
DOM을 검사하지 않고도 원본 품질의 이미지를 가져올 수 있습니다. PNG, JPG, WebP로 내보내세요. 인라인 SVG, 아이콘, 일러스트레이션을 실제 벡터로 추출하여 완전히 편집 가능하게 만듭니다. Lottie 애니메이션을 JSON으로 다운로드하여 After Effects 또는 LottieFiles에서 사용하세요.
디자인 토큰 추출
라이브 사이트에서 모든 색상, 글꼴, 반경, 그림자를 Tailwind 설정 또는 원시 CSS 변수로 추출합니다. 픽셀 하나를 선택하거나 전체 브랜드 팔레트를 추출하여 hex, RGB, HSL, OKLCH를 Tailwind, Figma 또는 디자인 시스템으로 바로 내보낼 수 있습니다.
차별점
"더 이상 DevTools를 뒤져 색상, 글꼴, 간격, 에셋을 찾을 필요가 없습니다. 모든 것이 즉시 제공됩니다."
MiroMiro는 기존 디자인 검사의 번거로움을 없앱니다. 복잡한 DevTools 트리를 탐색하는 대신, 마우스를 올리고 클릭하고 복사하기만 하면 됩니다. 확장 프로그램은 완전히 로컬에서 실행되므로 아무것도 브라우저 밖으로 나가지 않습니다. 컴포넌트, 색상, 에셋을 북마크하여 방문하는 모든 사이트에서 성장하는 개인 스와이프 파일을 구축할 수 있습니다. 또한 텍스트 및 UI 쌍에 대한 AA 및 AAA 기준의 WCAG 대비 검사 기능이 내장되어 있습니다.
이런 분들께 추천합니다
AI에게 UI를 설명하거나 실제 코드로 변환되지 않는 스크린샷을 찍는 데 지치셨다면, MiroMiro를 확인해보세요. 특히 랜딩 페이지를 자주 리버스 엔지니어링하거나, UI를 빠르게 재구축하거나, 수동 검사 없이 라이브 웹사이트에서 디자인 시스템을 추출하려는 분들에게 유용합니다. 3일 Pro 체험판으로 무료로 시작할 수 있으며, 신용카드가 필요하지 않습니다.
