getdesign.md vs Design Extractor
Design Extractor는 입력한 어떤 공개 URL에서든 DESIGN.md를 만들어요. 이 파일은 Google의 DESIGN.md 사양을 따르며, 페이지에서 고른 각 컴포넌트를 코딩 에이전트가 다시 만들 수 있는 HTML과 CSS 레시피로 제공해요. 각 레시피는 실제 사이트와 대조해 확인하거나, 확인하지 못한 경우 그 이유를 표시해요. 특정 국가의 방문자에게만 응답하는 사이트에서도 작동해요.
getdesign.md는 잘 알려진 브랜드의 기성 DESIGN.md 파일을 큐레이션한 컬렉션이에요. 두 서비스를 비교하면 다음과 같아요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.
확인 (출처: getdesign.md, 요청 페이지, Catalog Pass 페이지 및 awesome-design-md 저장소). 제공 내용과 가격은 바뀔 수 있으니, 결정하기 전에 해당 사이트를 확인하세요.
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크레딧). 추출이 실패하면 크레딧을 환불해 드려요.
나란히 비교
| getdesign.md | Design Extractor | |
|---|---|---|
| 사양 준수 | Google의 DESIGN.md 사양 구조를 사용해요: 토큰은 YAML 프런트매터에 담기고, 표준 섹션은 사양의 순서대로 배치돼요. | Google의 DESIGN.md 사양을 따라요: 프런트매터에는 사양의 속성만 있고 임의의 최상위 키는 없으며, 표준 섹션은 사양의 순서대로, 컴포넌트 항목은 사양의 8개 속성과 리터럴 값으로 제한돼요. |
| 컴포넌트 레시피 | 컴포넌트는 프런트매터에 토큰으로 정의되고 글로 설명되며, HTML은 포함되지 않아요. | 헤더, 푸터, 버튼, 입력 필드, 카드 등 페이지에서 고른 각 컴포넌트를 Components 섹션에 정제된 HTML과 CSS 레시피로 제공해서, 코딩 에이전트가 다시 만들 수 있어요. |
| 실제 사이트와 대조 확인 | 제공하지 않음 | 예. 각 레시피는 단독으로 렌더링되어 실제 사이트와 대조 확인돼요: 구성 요소의 구조 일치 검사와 픽셀 비교. 통과하지 못한 컴포넌트는 그 이유를 표시하며, 검증된 것으로 제공하지 않아요. |
| 지역 제한 사이트 | 파일은 카탈로그나 비공개 요청을 통해 제공돼요. | 예. 일부 국가의 방문자를 차단하는 사이트라면, 실패한 추출에서 국가 선택기를 제공하고(페이지가 열리는 국가가 먼저 나와요), 그 국가의 브라우저를 통해 같은 추출을 실행해요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧). |
| 서비스 성격 | 실제 웹사이트를 분석한 DESIGN.md 파일을 큐레이션한 컬렉션으로, VoltAgent 팀이 관리해요. | 생성기: 공개 URL을 입력하면 그 사이트의 DESIGN.md를 돌려줘요. |
| 원하는 웹사이트를 즉시 | 즉시는 아니에요. 무료 세트에 없는 사이트는 유료 비공개 요청을 보내면 파일이 이메일로 전달돼요. | 예. 공개 URL을 붙여 넣으면 바로 추출이 시작돼요. 완료되면 결과 페이지에서 DESIGN.md가 열려요. |
| 무료 파일 | 예. 다운로드하거나 npx getdesign@latest add stripe로 설치할 수 있는 무료 세트가 있어요. 이 중 84개 파일은 awesome-design-md GitHub 저장소에도 MIT 라이선스로 공개되어 있어요. | 추출은 유료예요. 저희가 이미 추출한 DESIGN.md 파일 갤러리는 무료로 읽고 복사할 수 있어요. |
| 범위 | 551개 사이트의 웹사이트 카탈로그. 무료 세트 밖의 카탈로그 항목은 다운로드가 아닌 미리보기와 유료 요청을 제공해요. | 모든 공개 웹사이트, 그리고 미리 추출한 브랜드의 소규모 갤러리. |
| 가격 | 무료 세트: 무료. 비공개 DESIGN.md: 1회 US$39(정가 US$59). Catalog Pass: 큐레이션 파일 45개에 월 US$99, 매월 5개 이상 추가. | 선불 크레딧, 구독 없음. 팩은 US$5(50크레딧)부터이며, Pro 추출은 10크레딧이 들어요. 크레딧은 만료되지 않아요. |
| 파일을 만드는 방식 | 사이트에서 공개적으로 관찰 가능한 패턴을 독립적으로 분석한 것으로, 영감을 얻기 위한 출발점으로 큐레이션되어 있어요. | 실행하는 시점에 실제 사이트를 브라우저에서 렌더링해서 만들어요. Pro는 사이트의 주요 페이지를 샘플링해요. |
| 최신성 | 사이트를 분석한 시점의 스냅샷이에요. 항목에는 분석 날짜가 표시되어 있지 않아요. | 실행하는 순간만큼 최신이에요. 나중에 다시 추출하면 새로운 유료 추출이에요. |
| 에이전트 접근 | 이름으로 DESIGN.md를 설치하는 CLI. MCP 서버나 API는 없어요. | Claude Code, Cursor, Codex, ChatGPT 등 클라이언트를 위한 MCP 서버, 그리고 지금 보고 있는 탭을 위한 Chrome 확장 프로그램. |
| 추가 기능 | 각 파일의 라이트·다크 실시간 미리보기와 스타터 키트(웹사이트 키트는 1회 US$249, 정가 US$299). | 무료 도구: DESIGN.md 검사기, 웹사이트 폰트 찾기, 색상 팔레트 추출기. |
getdesign.md에서 제공하는 것
- 잘 알려진 브랜드의 무료 DESIGN.md 파일 세트. 대부분은 GitHub에도 MIT 라이선스의 awesome-design-md로 공개되어 있어요.
- npx getdesign으로 터미널에서 한 줄로 설치.
- 각 파일의 라이트·다크 실시간 미리보기.
- 요청 시 다른 사이트의 비공개 DESIGN.md 파일을 이메일로 전달, 그리고 월간 Catalog Pass.
- 웹사이트 키트 같은 스타터 키트.
컬렉션 vs 원하는 URL을 즉시
getdesign.md에서 옮겨 오는 방법
- Design Extractor 홈페이지에 사이트 URL을 붙여 넣고 Pro 추출을 실행하세요.
- 결과를 저장소 루트에 DESIGN.md로 저장해 기존 파일을 대체하고, AGENTS.md나 CLAUDE.md의 안내는 그대로 두세요. 직접 편집했다면 무료 DESIGN.md 검사기로 확인하세요.
- 또는 에이전트에게 맡기세요: MCP 서버를 연결하고 사이트를 추출해 달라고 요청하세요.
결론
카탈로그뿐 아니라 원하는 사이트의 DESIGN.md를 즉시, 실제 사이트와 대조해 확인한 컴포넌트 레시피와 함께 받고 싶다면 Design Extractor를 선택하세요. 실행하는 시점의 사이트 모습을 읽고 Google의 사양을 따르며, 페이지에서 고른 컴포넌트마다 레시피를 제공하고, 통과하지 못한 레시피는 그 이유를 표시해요. 에이전트가 MCP 서버를 통해 직접 추출을 시작할 수도 있어요.
다른 비교
designmd.me vs Design Extractor
URL을 DESIGN.md로 바꾸는 두 생성기를 사양 준수, 컴포넌트 레시피, 실제 사이트와의 대조 확인, 가격 기준으로 비교해요.
Refero Styles vs Design Extractor
웹사이트 스타일을 모은 대규모 무료 라이브러리와, 어떤 URL에서든 만드는 사양 준수 DESIGN.md(실제 사이트와 대조해 확인한 컴포넌트 레시피 포함)를 비교해요.
TypeUI vs Design Extractor
탭의 스타일로 자체 템플릿을 채우는 TypeUI의 무료 Chrome 확장 프로그램과, 실제 사이트와 대조해 확인한 컴포넌트 레시피가 담긴 사양 준수 DESIGN.md를 비교해요.
FAQ
getdesign.md vs Design Extractor: 자주 묻는 질문
getdesign.md 및 Design Extractor에 대한 짧은 답변이에요. 2026-10-20에 확인했어요.
일부만 무료예요. getdesign.md의 무료 세트(대부분은 GitHub에도 MIT 라이선스의 awesome-design-md로 공개)는 다운로드하거나 npx getdesign으로 설치할 수 있어요. 다른 사이트의 비공개 DESIGN.md는 1회 US$39, Catalog Pass는 월 US$99예요. 가격은 2026-10-20에 확인했어요.
네, 유료 비공개 요청으로 가능해요. URL을 제출하면 파일을 이메일로 보내 줘요. 2026-10-20 기준으로 사이트에 즉시 직접 사용할 수 있는 생성기는 없었어요. Design Extractor는 실행하는 즉시 어떤 공개 URL에서든 DESIGN.md를 생성해요.
네. 프런트매터에는 사양의 속성만 쓰고 임의의 최상위 키는 없으며, 표준 섹션은 사양의 순서대로 배치되고, 컴포넌트 항목은 사양의 8개 속성만 리터럴 값으로 사용해요. 무료 DESIGN.md 검사기로 어떤 파일이든 사양 기준으로 확인할 수 있어요.
각 레시피를 단독으로 렌더링해 실제 사이트와 비교해요. 구성 요소를 페이지에서 측정한 값과 비교하는 구조 일치 검사, 그리고 실제 요소를 새로 캡처한 이미지와의 픽셀 비교를 거쳐요. 실패한 레시피는 다시 만들어 다시 확인하고, 그래도 통과하지 못하면 그 이유를 표시해요.
아니요. 추출에는 선불 크레딧이 사용돼요. 팩은 US$5(50크레딧)부터이며, Pro 추출은 10크레딧이 들어요. 크레딧은 만료되지 않고 구독도 없어요. 갤러리 둘러보기와 무료 도구 사용은 비용이 들지 않아요.
네. 둘 다 저장소에 넣고 에이전트에게 알려 주는 DESIGN.md를 제공해요. Design Extractor로 바꿔도 에이전트 설정은 바뀌지 않아요.