designmd.me vs Design Extractor
designmd.me와 Design Extractor는 모두 웹사이트 URL을 AI 코딩 에이전트용 DESIGN.md로 바꿔 줘요. Design Extractor의 파일은 Google의 DESIGN.md 사양을 따르며, 페이지에서 고른 각 컴포넌트를 에이전트가 다시 만들 수 있는 HTML과 CSS 레시피로 제공해요. 각 레시피는 실제 사이트와 대조해 확인하거나, 확인하지 못한 경우 그 이유를 표시해요. 특정 국가의 방문자에게만 응답하는 사이트에서도 작동해요.
이 형식이 처음이라면 먼저 DESIGN.md란 무엇인지 읽어 보세요.
확인 (출처: designmd.me, 요금 페이지, CLI 레퍼런스, Figma 페이지 및 Discover 섹션의 파일). 제공 내용과 가격은 바뀔 수 있으니, 결정하기 전에 해당 사이트를 확인하세요.
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크레딧). 추출이 실패하면 크레딧을 환불해 드려요.
나란히 비교
| designmd.me | Design Extractor | |
|---|---|---|
| 사양 준수 | YAML 프런트매터에 사양의 토큰을 쓰고, source, themes, breakpoints처럼 사양에 정의되지 않은 최상위 키도 추가해요. 섹션은 자체 구성이며, Visual Theme & Atmosphere부터 Known Gaps까지 번호가 매겨져 있어요. | Google의 DESIGN.md 사양을 따라요: 프런트매터에는 사양의 속성만 있고 임의의 최상위 키는 없으며, 표준 섹션은 사양의 순서대로, 컴포넌트 항목은 사양의 8개 속성과 리터럴 값으로 제한돼요. |
| 컴포넌트 레시피 | 각 컴포넌트는 배경, 글꼴, 패딩, 테두리, 반경 같은 스타일 값의 목록이며, HTML은 포함되지 않아요. | 헤더, 푸터, 버튼, 입력 필드, 카드 등 페이지에서 고른 각 컴포넌트를 Components 섹션에 정제된 HTML과 CSS 레시피로 제공해서, 코딩 에이전트가 다시 만들 수 있어요. |
| 실제 사이트와 대조 확인 | 제공하지 않음 | 예. 각 레시피는 단독으로 렌더링되어 실제 사이트와 대조 확인돼요: 구성 요소의 구조 일치 검사와 픽셀 비교. 통과하지 못한 컴포넌트는 그 이유를 표시하며, 검증된 것으로 제공하지 않아요. |
| 지역 제한 사이트 | 제공하지 않음 | 예. 일부 국가의 방문자를 차단하는 사이트라면, 실패한 추출에서 국가 선택기를 제공하고(페이지가 열리는 국가가 먼저 나와요), 그 국가의 브라우저를 통해 같은 추출을 실행해요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧). |
| 서비스 성격 | 생성기: URL을 붙여 넣으면 DESIGN.md를 받아요. Crowdlinker가 만들었어요. | 생성기: 공개 URL을 붙여 넣으면 그 사이트의 DESIGN.md를 받아요. |
| 읽는 페이지 | 단일 페이지(랜딩 페이지) 또는 다중 페이지(사이트의 주요 페이지)를 추출마다 선택해요. | Pro는 사이트의 주요 페이지를 샘플링해요. |
| 추출당 가격 | 단일 페이지 4크레딧, 다중 페이지 8크레딧. 성공했을 때만 차감돼요. | Pro 추출에 10크레딧. 저희 쪽 문제로 실패한 추출은 환불돼요. |
| 크레딧 팩 | US$5에 50크레딧, US$15에 175크레딧, US$30에 375크레딧, 또는 원하는 만큼 충전. 크레딧은 만료되지 않아요. | US$5에 50크레딧, US$10에 110크레딧, US$25에 300크레딧. 크레딧은 만료되지 않아요. 구독 없음. |
| 무료로 시작 | 첫 방문 시 무료 크레딧 4개, 회원가입 시 20개 추가. 시작할 때 카드가 필요 없어요. | 회원가입 시 무료 크레딧은 없어요. 갤러리와 무료 도구는 비용이 들지 않아요. |
| 추가 기능 | HTML 미리보기 파일(추가 8크레딧), Variables, Styles, 보드의 Figma 가져오기(생성당 1회 12크레딧), 두 사이트의 나란히 비교. | 결과 페이지의 파일 소스·미리보기 보기와 비주얼 시스템 창, 그리고 무료 도구: DESIGN.md 검사기, 폰트 찾기, 색상 팔레트 추출기. |
| 미리 만든 예시 | 생성된 사이트를 모은 Discover 섹션(카테고리와 리더보드 포함). | 미리 추출한 브랜드 갤러리. 무료로 읽고 복사할 수 있어요. |
| 에이전트 접근 | CLI(@crowdlinker/designmdme)와 Claude Code, Cursor 등 스킬 호환 에이전트용 에이전트 스킬. MCP 서버는 없어요. | Claude Code, claude.ai, ChatGPT, Codex, Cursor 등 클라이언트를 위한 원격 MCP 서버, 그리고 Claude Code와 Codex용 플러그인. |
| 브라우저 확장 프로그램 | 제공하지 않음 | 지금 보고 있는 탭을 추출하는 Chrome 확장 프로그램. |
designmd.me에서 제공하는 것
- 첫 방문과 회원가입 시 무료 크레딧, 시작할 때 카드 불필요.
- 단일 페이지 추출 4크레딧, 다중 페이지 추출 8크레딧, 성공했을 때만 차감.
- HTML 견본 페이지와 Variables, Styles의 Figma 가져오기, 각각 추가 크레딧.
- 두 사이트의 디자인 시스템 나란히 비교.
- CLI와 Claude Code, Cursor 등 스킬 호환 에이전트용 에이전트 스킬.
차이점
두 도구 모두 URL에서 DESIGN.md를 돌려줘요. Design Extractor는 페이지에서 고른 각 컴포넌트를 레시피로 제공하고 실제 사이트와 대조해 확인하므로, 에이전트는 어떤 컴포넌트를 쓰인 그대로 다시 만들 수 있는지, 어떤 컴포넌트가 어떤 이유로 표시되었는지 알 수 있어요. 갤러리의 Stripe에서 확인해 보세요.
Design Extractor는 작업하는 곳에서 바로 쓸 수 있어요. 에이전트가 MCP 서버를 통해 추출을 시작하고 결과를 읽을 수 있고, Chrome 확장 프로그램은 지금 보고 있는 탭을 추출해요. 완성된 파일은 갤러리에서 더 볼 수 있어요.
designmd.me에서 옮겨 오는 방법
- Design Extractor 홈페이지에 사이트 URL을 붙여 넣고 Pro 추출을 실행하세요.
- 결과를 저장소 루트에 DESIGN.md로 저장해 기존 파일을 대체하세요. AGENTS.md나 CLAUDE.md의 안내는 그대로 작동해요.
- 에이전트가 직접 추출을 실행하게 하려면 designmd.me CLI 대신 MCP 서버를 연결하세요.
결론
Google의 사양을 따르고, 페이지에서 고른 컴포넌트마다 레시피가 있으며, 각 레시피를 실제 사이트와 대조해 확인하거나 그 이유를 표시한 DESIGN.md가 필요하다면 Design Extractor를 선택하세요. 지역 제한 사이트도 추출할 수 있어요. 에이전트가 MCP로 실행할 수 있어요. 표에서 보듯이 추출당 크레딧은 designmd.me가 더 적게 들어요.
다른 비교
getdesign.md vs Design Extractor
미리 만들어진 DESIGN.md 파일을 큐레이션한 컬렉션과, 어떤 URL에서든 만드는 사양 준수 DESIGN.md(실제 사이트와 대조해 확인한 컴포넌트 레시피 포함)를 비교해요.
Refero Styles vs Design Extractor
웹사이트 스타일을 모은 대규모 무료 라이브러리와, 어떤 URL에서든 만드는 사양 준수 DESIGN.md(실제 사이트와 대조해 확인한 컴포넌트 레시피 포함)를 비교해요.
TypeUI vs Design Extractor
탭의 스타일로 자체 템플릿을 채우는 TypeUI의 무료 Chrome 확장 프로그램과, 실제 사이트와 대조해 확인한 컴포넌트 레시피가 담긴 사양 준수 DESIGN.md를 비교해요.
FAQ
designmd.me vs Design Extractor: 자주 묻는 질문
designmd.me 및 Design Extractor에 대한 짧은 답변이에요. 2026-10-20에 확인했어요.
무료로 시작할 수 있어요. 2026-10-20 기준으로 새 방문자는 카드 없이 무료 크레딧 4개를 받고, 회원가입 시 20개를 더 받았어요. 그 이후 크레딧 팩은 US$5(50크레딧)부터예요. 단일 페이지 추출은 4크레딧, 다중 페이지 추출은 8크레딧이 들어요.
designmd.me예요. designmd.me의 팩은 US$5(50크레딧)부터, 저희 팩은 US$5(50크레딧)부터예요. designmd.me의 다중 페이지 추출은 8크레딧, 단일 페이지 추출은 4크레딧이고, Design Extractor의 Pro 추출은 10크레딧이에요. designmd.me의 HTML 미리보기와 Figma 가져오기에는 추가 크레딧이 들어요.
Google의 사양을 따르는 DESIGN.md가 포함돼요. 프런트매터에는 토큰이 담기고, 헤더, 푸터, 버튼, 입력 필드, 카드 등 페이지에서 고른 각 컴포넌트는 정제된 HTML과 CSS 레시피로 담겨요. 각 레시피는 구조 일치 검사와 픽셀 비교로 실제 사이트와 대조 확인되며, 통과하지 못한 레시피는 그 이유를 표시해요.
아니요. designmd.me는 CLI와 에이전트 스킬을 제공하지만 MCP 서버는 없어요. Design Extractor는 원격 MCP 서버예요. claude.ai, Claude Desktop, ChatGPT, Claude Code는 로그인으로 연결하고, Codex, Cursor, 스크립트는 API 키를 사용해요.
Design Extractor는 다른 국가에서 추출을 실행할 수 있어요. 이런 이유로 추출이 실패하면 결과 페이지에서 국가 선택기를 제공하고(페이지가 열리는 국가가 먼저 나와요), 그 국가의 브라우저를 통해 같은 추출을 실행해요. 국가 지정 추출은 Pro 가격에 6크레딧의 추가 요금이 붙어요 (총 16크레딧). 추출이 실패하면 크레딧을 환불해 드려요.
네. 둘 다 저장소에 두는 DESIGN.md를 만들기 때문에 에이전트 설정은 그대로예요. 사이트를 Design Extractor로 추출하고 파일을 교체하세요.