TypeUI vs Design Extractor
TypeUI의 DESIGN.md Style Extractor는 탭에 열린 페이지의 스타일을 읽어 TypeUI 자체 DESIGN.md 템플릿을 채우는 무료 Chrome 확장 프로그램이에요. Design Extractor의 파일은 Google의 DESIGN.md 사양을 따르며, 페이지에서 고른 각 컴포넌트를 코딩 에이전트가 다시 만들 수 있는 HTML과 CSS 레시피로 제공해요. 각 레시피는 실제 사이트와 대조해 확인하거나, 확인하지 못한 경우 그 이유를 표시해요. 특정 국가의 방문자에게만 응답하는 사이트에서도 작동해요.
이 형식이 처음이라면 먼저 DESIGN.md란 무엇인지 읽어 보세요.
확인 (출처: 확장 프로그램의 README와 소스 코드, Chrome Web Store 등록 정보 및 TypeUI의 README). 제공 내용과 가격은 바뀔 수 있으니, 결정하기 전에 해당 사이트를 확인하세요.
Design Extractor를 선택하는 이유
Google의 DESIGN.md 사양을 따라요
YAML 프런트매터에는 사양이 정의한 속성만 쓰고, 임의의 최상위 키는 없어요. 표준 섹션은 Overview부터 Do's and Don'ts까지 사양의 순서대로 배치돼요. 프런트매터의 컴포넌트 항목은 사양의 8개 속성만 리터럴 값으로 사용해요. 무료 DESIGN.md 검사기로 어떤 파일이든 확인할 수 있어요.
페이지에서 고른 컴포넌트마다 레시피 제공
페이지에서 고른 헤더, 푸터, 버튼, 입력 필드, 카드 등의 컴포넌트는 각각 레시피로 제공돼요. 리터럴 값을 쓴 정제된 HTML과 CSS이며, DESIGN.md의 Components 섹션 안에 들어가요. 각 레시피에는 구성 요소와 사이트에서 확인된 hover, focus 상태가 나열되어 있어서, 코딩 에이전트가 컴포넌트를 추측하지 않고 다시 만들 수 있어요.
실제 사이트와 대조해 확인
각 레시피는 단독으로 렌더링되어 실제 사이트와 대조 확인돼요. 렌더링된 구성 요소를 페이지에서 측정한 값과 비교하는 구조 일치 검사, 그리고 실제 요소를 새로 캡처한 이미지와의 픽셀 비교를 거쳐요. 실패한 레시피는 다시 만들어 다시 확인해요. 그래도 통과하지 못하면 그 이유를 표시하며, 검증된 것으로 제공하지 않아요. 결과 페이지에서는 컴포넌트가 얼마나 일치하는지, 사이트의 색상과 텍스트 스타일을 얼마나 반영했는지 보여 줘요: 갤러리의 Stripe를 확인해 보세요.
지역 제한 사이트에서도 작동
일부 사이트는 특정 국가의 방문자에게만 응답해요. 이런 이유로 추출이 실패하면 결과 페이지에서 국가 선택기를 제공하는데, 페이지가 열리는 것으로 확인된 국가가 먼저 나와요. 선택한 국가의 브라우저를 통해 같은 추출을 실행해요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧). 추출이 실패하면 크레딧을 환불해 드려요.
나란히 비교
| TypeUI | Design Extractor | |
|---|---|---|
| 사양 준수 | 제공하지 않음 | Google의 DESIGN.md 사양을 따라요: 프런트매터에는 사양의 속성만 있고 임의의 최상위 키는 없으며, 표준 섹션은 사양의 순서대로, 컴포넌트 항목은 사양의 8개 속성과 리터럴 값으로 제한돼요. |
| 컴포넌트 레시피 | 컴포넌트는 일반적인 컴포넌트 가이드 아래에 유형별 개수(버튼, 링크, 입력 필드, 카드, 내비게이션, 목록, 표)로 나타나요. | 헤더, 푸터, 버튼, 입력 필드, 카드 등 페이지에서 고른 각 컴포넌트를 Components 섹션에 정제된 HTML과 CSS 레시피로 제공해서, 코딩 에이전트가 다시 만들 수 있어요. |
| 실제 사이트와 대조 확인 | 제공하지 않음 | 예. 각 레시피는 단독으로 렌더링되어 실제 사이트와 대조 확인돼요: 구성 요소의 구조 일치 검사와 픽셀 비교. 통과하지 못한 컴포넌트는 그 이유를 표시하며, 검증된 것으로 제공하지 않아요. |
| 지역 제한 사이트 | 제공하지 않음 | 예. 일부 국가의 방문자를 차단하는 사이트라면, 실패한 추출에서 국가 선택기를 제공하고(페이지가 열리는 국가가 먼저 나와요), 그 국가의 브라우저를 통해 같은 추출을 실행해요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧). |
| 서비스 성격 | TypeUI를 만든 Bergside SRL의 무료 Chrome 확장 프로그램 DESIGN.md Style Extractor. 버전 0.4.0, Chrome Web Store 사용자 약 40,000명, MIT 라이선스 오픈 소스. | 생성기: 사이트에서, MCP로, 또는 Chrome 확장 프로그램에서 공개 URL을 입력하면 그 사이트의 DESIGN.md를 받아요. |
| 출력이 따르는 형식 | TypeUI 자체 DESIGN.md 템플릿: Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules 등, YAML 프런트매터 없음. SKILL.md도 작성할 수 있어요. | Google의 DESIGN.md 사양: YAML 프런트매터의 토큰과 사양 순서대로 배치된 표준 섹션. |
| 사이트를 읽는 방식 | 브라우저 안에서 네트워크 요청 없이, 탭에 열린 페이지의 보이는 요소 최대 280개의 계산된 스타일을 읽어요. | 저희 서버가 브라우저에서 URL을 열고 렌더링된 페이지를 분석해요. Pro는 사이트의 주요 페이지도 샘플링해요. |
| 읽을 수 있는 페이지 | 로그인한 페이지를 포함해 탭에 열린 페이지. | 공개 페이지만 가능해요. 로그인이 필요한 페이지, localhost, 사설 네트워크의 페이지는 아직 지원하지 않아요. |
| 결과가 저장되는 곳 | 팝업에 표시되며, 거기서 복사하거나 다운로드해요. Quick install 버튼은 선택한 프로젝트의 Claude Code, Codex, Cursor 스킬 폴더에 SKILL.md를 작성해요. | 계정의 내 추출 목록에 저장되어 편집, 복사, 다운로드할 수 있어요. 에이전트가 MCP로 읽을 수 있어요. |
| 가격 | 무료. 계정이나 결제 필요 없음. | 선불 크레딧, 구독 없음. 팩은 US$5(50크레딧)부터이며, Pro 추출은 10크레딧이 들어요. 갤러리와 무료 도구는 비용이 들지 않아요. |
| 에이전트 접근 | 확장 프로그램은 팝업에서 실행돼요. TypeUI의 별도 CLI와 호스팅 MCP 서버는 큐레이션한 디자인 스킬과 UI 프롬프트를 제공해요. | 어떤 URL이든 받는 추출 도구를 갖춘 원격 MCP 서버. Claude Code, claude.ai, ChatGPT, Codex, Cursor 등 클라이언트에서 사용할 수 있어요. |
TypeUI에서 제공하는 것
- 계정이나 결제 없이 쓸 수 있는 무료 오픈 소스(MIT) Chrome 확장 프로그램으로, Chrome Web Store 사용자는 약 40,000명이에요.
- 탭에 열린 페이지를 대상으로 전적으로 브라우저 안에서 실행되며, 로그인한 페이지도 포함돼요.
- 타이포그래피, 색상, 간격, 반경, 그림자, 모션 값을 TypeUI 자체 형식의 DESIGN.md 또는 SKILL.md로 제공해요.
- 팝업에서 파일을 복사하거나 다운로드하고, Quick install로 SKILL.md를 Claude Code, Codex, Cursor 프로젝트에 넣을 수 있어요.
- 확장 프로그램 외에도 TypeUI는 큐레이션한 디자인 스킬, UI 프롬프트, 오픈 소스 CLI, 호스팅 MCP 서버를 제공하며, 강화된 디자인 스킬 파일, 레이아웃용 UI 프롬프트, 비공개 Discord 커뮤니티가 포함된 Pro 버전도 있어요.
차이점
TypeUI의 확장 프로그램은 한 페이지에서 찾은 스타일 값을 요약하고 템플릿의 일반적인 가이드를 덧붙여요. Design Extractor는 사이트를 렌더링하고, 컴포넌트를 골라 각각 레시피를 작성한 뒤, 모든 레시피를 실제 사이트와 대조해 확인해요. 그래서 에이전트는 어떤 컴포넌트를 쓰인 그대로 다시 만들 수 있는지, 어떤 컴포넌트가 어떤 이유로 표시되었는지 알 수 있어요. 갤러리의 Stripe에서 확인해 보세요.
지금 보고 있는 탭에서 시작하는 게 편하신가요? Design Extractor Chrome 확장 프로그램은 같은 계정, 같은 크레딧으로 탭을 같은 추출에 보내요. 에이전트가 MCP 서버를 통해 추출을 시작하고 결과를 읽을 수도 있어요. 완성된 파일은 갤러리에서 더 볼 수 있어요.
TypeUI에서 옮겨 오는 방법
- Design Extractor 홈페이지에 사이트 URL을 붙여 넣거나 Chrome 확장 프로그램에서 Extract this page를 클릭하고, Pro 추출을 실행하세요.
- 결과를 저장소 루트에 DESIGN.md로 저장해 기존 파일을 대체하세요. AGENTS.md나 CLAUDE.md의 안내는 그대로 작동해요.
- Quick install을 사용했다면 TypeUI가 작성한 design-system 스킬 폴더를 삭제하고, DESIGN.md 안내는 그대로 두세요.
- 에이전트가 직접 추출을 실행하게 하려면 MCP 서버를 연결하세요.
결론
Google의 사양을 따르고, 페이지에서 고른 컴포넌트마다 레시피가 있으며, 각 레시피를 실제 사이트와 대조해 확인하거나 그 이유를 표시한 DESIGN.md를 계정에 저장하고 싶다면 Design Extractor를 선택하세요. 지역 제한 사이트도 추출할 수 있어요. 에이전트가 MCP로 실행할 수 있어요. 표에서 보듯이 TypeUI의 확장 프로그램은 무료이고 로그인한 페이지도 읽을 수 있어요.
다른 비교
getdesign.md vs Design Extractor
미리 만들어진 DESIGN.md 파일을 큐레이션한 컬렉션과, 어떤 URL에서든 만드는 사양 준수 DESIGN.md(실제 사이트와 대조해 확인한 컴포넌트 레시피 포함)를 비교해요.
designmd.me vs Design Extractor
URL을 DESIGN.md로 바꾸는 두 생성기를 사양 준수, 컴포넌트 레시피, 실제 사이트와의 대조 확인, 가격 기준으로 비교해요.
Refero Styles vs Design Extractor
웹사이트 스타일을 모은 대규모 무료 라이브러리와, 어떤 URL에서든 만드는 사양 준수 DESIGN.md(실제 사이트와 대조해 확인한 컴포넌트 레시피 포함)를 비교해요.
FAQ
TypeUI vs Design Extractor: 자주 묻는 질문
TypeUI 및 Design Extractor에 대한 짧은 답변이에요. 2026-10-20에 확인했어요.
네. 2026-10-20 기준으로 이 확장 프로그램은 MIT 라이선스의 무료 오픈 소스였고, 계정이나 결제가 필요 없었어요. Design Extractor는 무료가 아니에요. 추출에는 선불 크레딧이 사용되며, 팩은 US$5(50크레딧)부터이고 Pro 추출은 10크레딧이 들어요. 갤러리와 무료 도구는 비용이 들지 않아요.
아니요. 파일은 Mission, Brand, Style Foundations, Rules 같은 섹션을 가진 오픈 소스 TypeUI DESIGN.md 형식을 따르고, 버전 0.4.0은 YAML 프런트매터를 작성하지 않아요. 따라서 Google의 DESIGN.md 사양을 따르지 않아요. Design Extractor는 Google의 사양을 따르며, 무료 DESIGN.md 검사기로 어떤 파일이든 사양 기준으로 확인할 수 있어요.
Google의 사양을 따르는 DESIGN.md가 포함돼요. 프런트매터에는 토큰이 담기고, 헤더, 푸터, 버튼, 입력 필드, 카드 등 페이지에서 고른 각 컴포넌트는 정제된 HTML과 CSS 레시피로 담겨요. 각 레시피는 구조 일치 검사와 픽셀 비교로 실제 사이트와 대조 확인되며, 통과하지 못한 레시피는 그 이유를 표시해요.
네. 브라우저 안에서 탭에 열린 페이지를 읽기 때문에 로그인한 페이지에서도 작동해요. Design Extractor는 공개 페이지만 읽어요. 로그인이 필요한 페이지, localhost, 사설 네트워크의 페이지는 아직 지원하지 않아요.
Design Extractor는 다른 국가에서 추출을 실행할 수 있어요. 이런 이유로 추출이 실패하면 결과 페이지에서 국가 선택기를 제공하고(페이지가 열리는 국가가 먼저 나와요), 그 국가의 브라우저를 통해 같은 추출을 실행해요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧). 추출이 실패하면 크레딧을 환불해 드려요.
네. 둘 다 저장소에 두는 DESIGN.md를 만들기 때문에 에이전트 설정은 그대로예요. 사이트에서 또는 Chrome 확장 프로그램으로 사이트를 Design Extractor로 추출하고 파일을 교체하세요. Quick install을 사용했다면 TypeUI가 작성한 design-system 스킬 폴더를 삭제하고, DESIGN.md 안내는 그대로 두세요.