소개
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란: 파일 형식과 섹션 구성.
- 무료 도구: 검사기, 폰트 찾기, 색상 팔레트 추출기. 회원가입 필요 없음.
- MCP 서버: Claude Code, Codex, Cursor, claude.ai가 추출을 실행하게 하세요.
- Chrome 확장 프로그램: 지금 보고 있는 탭의 페이지를 추출하세요.
- 요금: 구독 없는 선불 크레딧 팩.