Design Extractor Chrome 확장 프로그램
Design Extractor의 Chrome 확장 프로그램은 현재 탭에 열린 웹사이트를 DESIGN.md로 바꿔 줘요. 사이트의 색상, 타이포그래피, 간격, 모양, 컴포넌트 규칙을 담은 디자인 시스템 파일로, Claude Code, Cursor, Copilot 같은 코딩 에이전트를 위해 작성돼요. 툴바에서 한 번만 클릭하면 되고, URL을 붙여 넣을 필요도 없어요.
설치는 무료예요. 추출할 때마다 선불 잔액에서 크레딧이 사용되며, 가격은 사이트와 같아요.
주요 기능
지금 보고 있는 탭에서 DESIGN.md를
탭에 열린 페이지 추출
클릭 한 번이면 현재 탭의 주소가 홈페이지의 양식과 똑같은 추출로 전송돼요. Pro는 사이트의 주요 페이지도 샘플링하므로, 결과가 화면 하나가 아니라 사이트를 반영해요.
완전한 디자인 시스템 작성
색상, 타이포그래피, 간격, 모양에 대한 YAML 토큰과 DESIGN.md 형식의 여덟 섹션을 작성해요: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, Do's and Don'ts.
컴포넌트마다 레시피 제공
헤더, 버튼, 입력 필드, 카드 등 페이지에서 고른 컴포넌트마다 정제된 HTML과 CSS로 제공돼요. 각각 실제 사이트와 대조해 확인하거나, 확인하지 못한 경우 그 이유를 표시해요.
같은 계정, 같은 크레딧
확장 프로그램은 design-extractor.com에 로그인한 세션을 그대로 사용해요. 두 번 로그인할 필요가 없고, 팝업에 크레딧 잔액이 표시돼요.
작동 방식
탭에서 DESIGN.md까지 3단계
Chrome에 추가하고 고정하기
Chrome Web Store에서 설치하고 퍼즐 아이콘에서 고정하세요. design-extractor.com과 활성 탭에 대한 접근 권한만 요청하고, 그 밖에는 아무것도 요청하지 않아요. 사이트에서 한 번 로그인하면 팝업이 그 세션을 사용해요.
공개 페이지를 열고 Extract this page 클릭하기
팝업에서 티어를 고르고 추출을 시작하세요. 추출이 진행되는 동안 팝업에 진행 상황이 표시되고, 계속 웹 서핑을 해도 돼요.
DESIGN.md 열기
Open result를 누르면 사이트의 DESIGN.md로 이동해요. 내 추출 목록에도 저장되어, 저장소에 넣기 전에 복사, 다운로드, 편집할 수 있어요.
설치 방법, 로그인, 크레딧, 현재 제한 사항은 확장 프로그램 설치 가이드에 있어요. URL을 붙여 넣는 게 더 편하다면 홈페이지에서 같은 추출을 실행할 수 있어요.
비교
TypeUI의 DESIGN.md Style Extractor와 비교해 더해지는 점
TypeUI의 DESIGN.md Style Extractor는 탭에 열린 페이지의 스타일로 TypeUI 자체 템플릿을 채워 주는 무료 오픈 소스 확장 프로그램이에요. Design Extractor의 확장 프로그램은 여기에 다음을 더해요:
Google 사양을 따르는 DESIGN.md
YAML 프런트매터에 토큰을 담고, 표준 섹션을 사양의 순서대로 배치해요. 무료 DESIGN.md 검사기로 어떤 파일이든 확인할 수 있어요.
고른 컴포넌트마다 레시피 제공
헤더, 버튼, 입력 필드, 카드 등에 대한 정제된 HTML과 CSS를 제공해요. 각각 구조 일치 검사와 픽셀 비교로 실제 사이트와 대조해 확인하거나, 확인하지 못한 경우 그 이유를 표시해요.
지역 제한 사이트
일부 국가의 방문자를 차단하는 사이트는 다른 국가의 브라우저를 통해 추출할 수 있어요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧).
사이트와 같은 계정, 같은 크레딧
모든 추출은 내 추출 목록에 저장되어 편집, 복사, 다운로드할 수 있고, 에이전트가 MCP로 읽을 수도 있어요.
에 버전 0.4.0, README와 소스 코드, Chrome Web Store 등록 정보를 기준으로 확인했어요.
| 항목 | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| 사이트를 읽는 방식 | 저희 서버가 브라우저에서 페이지 주소를 열고 렌더링된 페이지를 분석해요. Pro는 사이트의 주요 페이지도 샘플링해요. | 브라우저 안에서, 탭에 열린 페이지의 보이는 요소 최대 280개의 계산된 스타일을 읽어요. |
| 출력이 따르는 형식 | Google의 DESIGN.md 사양: YAML 프런트매터의 토큰과 사양 순서대로 배치된 표준 섹션. | YAML 프런트매터가 없는 TypeUI 자체 DESIGN.md 템플릿(Mission, Brand, Style Foundations, Rules 등), 또는 SKILL.md. |
| 컴포넌트 | 페이지에서 고른 컴포넌트마다 정제된 HTML과 CSS 레시피를 제공하고, 구조 일치 검사와 픽셀 비교로 실제 사이트와 대조해 확인하거나, 확인하지 못한 경우 그 이유를 표시해요. | 일반적인 컴포넌트 가이드 아래에 컴포넌트 유형별 개수를 제공해요. 출력을 렌더링된 페이지와 비교하지는 않아요. |
| 결과가 저장되는 곳 | 사이트의 내 추출 목록에 저장되어 편집, 복사, 다운로드할 수 있어요. | 팝업에 표시되며, 거기서 복사하거나 파일로 다운로드해요. |
| 읽을 수 있는 페이지 | 공개 페이지만 가능해요. 로그인이 필요한 페이지, localhost, 사설 네트워크의 페이지는 아직 지원하지 않아요. | 탭에 열린 페이지예요. 그 페이지를 직접 읽기 때문에 로그인한 페이지도 포함돼요. |
| 가격 | 설치는 무료예요. 추출에는 선불 크레딧이 사용돼요. | 무료 오픈 소스(MIT). |
Google 사양을 따르고, 컴포넌트마다 실제 사이트와 대조해 확인한 레시피가 담긴 DESIGN.md를 계정에 저장하고 싶다면 Design Extractor의 확장 프로그램을 선택하세요. 전체 비교는 TypeUI vs Design Extractor에서 볼 수 있어요.
FAQ
Chrome 확장 프로그램 FAQ
확장 프로그램 설치, 전송하는 데이터, 비용에 대한 짧은 답변이에요.
설치는 무료예요. 추출할 때마다 사이트와 같은 가격으로 선불 잔액에서 크레딧이 사용돼요. 팩은 US$5(50크레딧)부터 시작하고, 구독은 없으며, 크레딧은 만료되지 않아요. 저희 쪽 문제로 추출이 실패하면 크레딧은 환불돼요.
Extract this page를 클릭했을 때 현재 탭의 주소와 선택한 티어만 보내요. 페이지 내용은 절대 읽지 않고, 방문하는 페이지에서 백그라운드로 실행되지 않으며, 분석 도구도 포함하지 않아요.
아직은 안 돼요. 저희 서버가 페이지 주소로 페이지를 캡처하기 때문에 공개 페이지여야 해요. 로그인이 필요한 페이지, localhost, 사설 네트워크의 페이지는 지원하지 않아요. 확장 프로그램은 Chrome에서만 사용할 수 있어요.
아니요. 팝업은 design-extractor.com에 로그인한 세션을 그대로 사용해요. 로그아웃 상태에서는 사이트를 여는 Sign in 버튼이 표시돼요. 팝업에서 로그아웃하면 사이트에서도 로그아웃돼요.
저장소의 파일을 읽는 에이전트라면 모두 쓸 수 있어요. DESIGN.md를 코드 옆에 저장하고 Claude Code, Cursor, GitHub Copilot, Codex, Windsurf, Google Stitch에 새 UI의 스타일 레퍼런스로 알려 주세요.
TypeUI의 DESIGN.md Style Extractor 같은 확장 프로그램은 브라우저에서 계산된 스타일을 읽어 자체 템플릿에 값을 채워요. Design Extractor는 Google 사양을 따르는 DESIGN.md를 작성하고, 페이지에서 고른 컴포넌트마다 HTML과 CSS 레시피를 담아 실제 사이트와 대조해 확인하거나 확인하지 못한 경우 그 이유를 표시하며, 결과를 계정에 저장해요.