DESIGN.md 도구 비교

Design Extractor는 어떤 공개 URL에서든 DESIGN.md를 만들어요. 이 파일은 Google의 DESIGN.md 사양을 따르며, 페이지에서 고른 각 컴포넌트를 코딩 에이전트가 다시 만들 수 있는 HTML과 CSS 레시피로 제공해요. 각 레시피는 실제 사이트와 대조해 확인하거나, 확인하지 못한 경우 그 이유를 표시해요. 특정 국가의 방문자에게만 응답하는 사이트에서도 작동해요.

다른 도구는 다른 방식을 택해요. getdesign.md와 Refero Styles 같은 컬렉션은 이미 분석한 사이트의 기성 파일을 제공하고, designmd.me는 URL에서 파일을 생성하며, TypeUI의 Chrome 확장 프로그램은 탭의 스타일로 자체 템플릿을 채워요. 각 비교에는 무엇을 언제 확인했는지 적어 두었어요. 이 형식이 처음이라면 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 vs Design Extractor

    미리 만들어진 DESIGN.md 파일을 큐레이션한 컬렉션과, 어떤 URL에서든 만드는 사양 준수 DESIGN.md(실제 사이트와 대조해 확인한 컴포넌트 레시피 포함)를 비교해요.

  • designmd.me vs Design Extractor

    URL을 DESIGN.md로 바꾸는 두 생성기를 사양 준수, 컴포넌트 레시피, 실제 사이트와의 대조 확인, 가격 기준으로 비교해요.

  • Refero Styles vs Design Extractor

    웹사이트 스타일을 모은 대규모 무료 라이브러리와, 어떤 URL에서든 만드는 사양 준수 DESIGN.md(실제 사이트와 대조해 확인한 컴포넌트 레시피 포함)를 비교해요.

  • TypeUI vs Design Extractor

    탭의 스타일로 자체 템플릿을 채우는 TypeUI의 무료 Chrome 확장 프로그램과, 실제 사이트와 대조해 확인한 컴포넌트 레시피가 담긴 사양 준수 DESIGN.md를 비교해요.