Design MD Generator
공개 URL에서 실제 디자인 토큰을 추출해 AI 코딩 에이전트용 DESIGN.md 생성
Design MD Generator 소개
Design MD Generator는 공개 URL을 받아 실제 CSS에서 색상, 글꼴, 글자 크기 비율, 간격, 모서리 반경, 그림자 및 컴포넌트 상태를 추출하고, 테마, 팔레트 역할, 타이포그래피, 레이아웃, 컴포넌트, 계층, 반경, 모션 및 디자인 가이드라인을 담은 9개 섹션 DESIGN.md를 생성합니다. 파일을 코드 저장소에 넣고 CLAUDE.md 또는 .cursor/rules에서 참조하면 생성된 인터페이스가 원본 사이트의 디자인 시스템에 맞춰집니다. MCP를 통해 편집기에서 라이브러리 검색, 파일 읽기, 생성기 실행도 가능합니다.
적합한 사용자
적합한 활용 장면
기존 웹사이트의 디자인 시스템 파일 생성
AI 코딩 에이전트가 원본 사이트의 디자인을 재사용하도록 함
편집기에서 MCP로 생성기 실행
기성 DESIGN.md 디자인 시스템 탐색
기능
실제 CSS 추출
실제 스타일에서 색상, 글꼴 스택, 글자 크기 비율, 간격, 모서리 반경, 그림자 및 CSS 사용자 지정 속성을 집계합니다.
근거 기반 분석
모든 16진수 색상, 글꼴 이름, 모서리 반경은 사이트의 실제 CSS에서 오며 추출기가 토큰을 임의로 만들지 않습니다.
9개 섹션 DESIGN.md
AI 디자인 분석가가 테마, 팔레트 역할, 타이포그래피, 레이아웃, 컴포넌트, 계층, 반경, 모션 및 가이드라인을 생성합니다.
MCP 편집기 연결
MCP를 통해 라이브러리를 검색하고 DESIGN.md를 읽거나 편집기에서 생성기를 실행합니다.
장점
- 토큰이 실제 CSS에서 나와 추측을 피할 수 있음
- 출력을 코드 저장소에 두고 에이전트가 참조할 수 있음
- 일일 제한 내에서 무료 생성 가능
- MCP를 지원해 편집기에서 편리하게 조작 가능
단점
- 방문자별 일일 생성 제한
요금제
무료
- DESIGN.md 생성
- 방문자별 일일 제한
- 신용카드 불필요
* 가격 정보는 참고용입니다. 최신 안내는 Design MD Generator 공식 웹사이트를 확인하세요.