소개

Design Extractor 소개

Design Extractor는 공개 웹사이트 URL을 DESIGN.md로 바꿔 줘요. 사이트의 색상, 타이포그래피, 간격, 모양, 컴포넌트와 그 설계 근거를 담은 Markdown 파일 하나예요. Claude Code, Cursor, GitHub Copilot, Google Stitch 같은 AI 코딩 에이전트가 이 파일을 스타일 레퍼런스로 읽어요.

운영 주체

Design Extractor는 Magentix Studio(Magentix Studio UG (haftungsbeschränkt), 독일 Mannheim 소재)의 제품이에요. 대표(매니징 디렉터)는 Fadel Kaadan이에요. 회사 정보는 사업자 정보에서 확인할 수 있고, 문의 페이지를 통해 연락하실 수 있어요.

추출이 진행되는 방식

공개 URL을 붙여 넣으면 Design Extractor가 브라우저에서 실제 페이지를 불러와 시각적 속성(색상, 글꼴, 간격, 모양, 반복되는 컴포넌트)을 읽고 DESIGN.md로 정리해요. 정확한 토큰 값이 담긴 YAML 프런트매터와, 그 값을 어떻게 쓰는지 설명하는 Markdown 본문으로 구성돼요.

Pro 추출은 사이트의 약 5개 페이지를 다뤄요. 추출할 때마다 선불 크레딧이 사용되고, 저희 쪽 문제로 추출이 실패하면 크레딧은 잔액으로 돌아가요. Design Extractor 작동 방식 읽어 보기.

갤러리를 만드는 방식

갤러리에는 잘 알려진 사이트의 공개 페이지에서 저희가 추출한 DESIGN.md 파일이 있어요. 여러분이 직접 실행할 수 있는 것과 같은 추출로 만들었어요. 이 파일들은 해당 페이지가 어떻게 보이는지를 설명할 뿐이에요. 공식 브랜드 가이드라인이 아니며, 브랜드를 보여 준다고 해서 그 소유자와의 제휴나 소유자의 보증을 의미하지 않아요. 갤러리에 있는 사이트의 소유자로서 삭제를 원하시면 문의해 주세요.

어디서부터 시작할까요

  • 문서: 모든 가이드를 한곳에서.
  • DESIGN.md란: 파일 형식과 섹션 구성.
  • 무료 도구: 검사기, 폰트 찾기, 색상 팔레트 추출기. 회원가입 필요 없음.
  • MCP 서버: Claude Code, Codex, Cursor, claude.ai가 추출을 실행하게 하세요.
  • Chrome 확장 프로그램: 지금 보고 있는 탭의 페이지를 추출하세요.
  • 요금: 구독 없는 선불 크레딧 팩.