레퍼런스 사이트를 규칙으로 바꾸는 designlang 추출 가이드
Quick Start
designlang 은 헤드리스 브라우저로 실제 페이지를 열어 DOM 에서 디자인 값을 읽어 내는 CLI 입니다.
색·글꼴·간격·그림자·모션을 DTCG 토큰, Tailwind 설정, DESIGN.md 같은 파일로 한 번에 씁니다.
Node 20 이상이 필요합니다.
- STEP 1에서 사이트 주소로 추출합니다.
- STEP 2에서 나온 파일을 확인합니다.
- STEP 3에서 DESIGN.md 와 AGENT.md 를 클로드에게 넘깁니다.
- STEP 4에서 터미널 없이 쓰는 방법을 봅니다.
STEP 1 · 2분사이트 주소 하나로 추출한다
이 단계에서는 빈 작업 폴더를 하나 만들고 그 안에서 명령을 실행합니다.
처음 실행하면 npx 가 패키지를 받고 브라우저를 띄우느라 1~2분이 걸립니다.
npx designlang https://stripe.com
성공하면 ✔ Extraction complete! 뒤에 파일 목록이 출력되고 design-extract-output/ 폴더가 생깁니다.
STEP 2 · 3분나온 파일에서 필요한 것만 고른다
이 단계에서는 파일을 다 쓰려 하지 않고 용도별로 고릅니다.
2026년 9월 22일 stripe.com 으로 실행했을 때 파일 34개가 나왔습니다.
*-DESIGN.md— 에이전트가 읽는 디자인 규칙(색·글꼴·간격·반경·그림자)*-AGENT.md— 클로드·Cursor 에 붙여 넣는 시스템 프롬프트*-preview.html— 추출한 팔레트·글꼴을 눈으로 확인하는 미리보기*-tailwind.config.js·*-design-tokens.json— 코드에 바로 쓰는 토큰
npx designlang pack https://stripe.com
성공하면 preview.html 에서 브랜드 색과 전체 팔레트가 원본 사이트와 같은지 확인할 수 있습니다.
STEP 3 · 2분DESIGN.md 와 AGENT.md 를 클로드에게 넘긴다
이 단계에서는 두 파일을 프로젝트 루트에 두고 기준으로 지목합니다.
값만 가져오고 로고·사진·문구는 새로 만들게 해야 남의 사이트를 복제하지 않습니다.
프로젝트 루트의 DESIGN.md 와 AGENT.md 를 먼저 읽어줘. 색·글꼴·간격·반경·그림자는 이 파일 값만 쓰고, 로고·이미지·문구는 원본 사이트 것을 쓰지 말고 우리 서비스 내용으로 새로 써줘. 만들 화면: 온라인 강의 랜딩 페이지 첫 화면. 제목 한 줄, 설명 두 줄, 신청 버튼 하나.
성공하면 원본 사이트의 색과 간격 감각을 따르되 내용은 우리 것인 화면이 나옵니다.
STEP 4 · 3분터미널 없이 크롬 확장으로 뽑는다
이 단계에서는 CLI 대신 브라우저 확장을 씁니다.
design-md-chrome 은 보고 있는 탭의 스타일을 읽어 DESIGN.md 나 SKILL.md 를 만들고 내려받게 해 줍니다.
스토어 설치가 아니라 저장소를 받아 직접 올리는 방식입니다.
chrome://extensions → Developer mode 켜기 → Load unpacked → 받은 design-md-chrome 폴더 선택
성공하면 확장 아이콘을 눌렀을 때 Generate DESIGN.md 버튼이 보이고, Download 로 파일을 받을 수 있습니다.
FAQ
아무 사이트나 되나요? 공개 페이지는 대부분 됩니다.
애니메이션이 많은 사이트는 값이 많이 나와 DESIGN.md 를 조금 다듬는 편이 낫습니다.
AGENT.md 는 꼭 넣어야 하나요? 아닙니다.
DESIGN.md 하나로도 되고, AGENT.md 는 규칙을 더 강하게 지키게 하고 싶을 때 씁니다.
공식 참고 자료
이메일 남기고 전체 바로 보기