GUIDE · designlang

레퍼런스 사이트를 규칙으로 바꾸는 designlang 추출 가이드

읽는 데 5분2026-09-22 공개

마음에 드는 사이트를 보여줘도 클로드가 비슷하게만 그린다면 그건 감각이 없어서가 아니라 색과 간격을 말로 옮길 수 없어서 생기는 일입니다. 이 자료는 designlang 으로 사이트 디자인을 파일로 추출하고, DESIGN.md 를 프로젝트에 넣어 클로드에게 요청하는 순서를 담았습니다.

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분이 걸립니다.

⚡ 01 · 추출 명령

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 — 코드에 바로 쓰는 토큰

⚡ 02 · 한 폴더로 묶기

npx designlang pack https://stripe.com

성공하면 preview.html 에서 브랜드 색과 전체 팔레트가 원본 사이트와 같은지 확인할 수 있습니다.

STEP 3 · 2분DESIGN.md 와 AGENT.md 를 클로드에게 넘긴다

이 단계에서는 두 파일을 프로젝트 루트에 두고 기준으로 지목합니다. 값만 가져오고 로고·사진·문구는 새로 만들게 해야 남의 사이트를 복제하지 않습니다.

⚡ 03 · 요청문

프로젝트 루트의 DESIGN.md 와 AGENT.md 를 먼저 읽어줘. 색·글꼴·간격·반경·그림자는 이 파일 값만 쓰고, 로고·이미지·문구는 원본 사이트 것을 쓰지 말고 우리 서비스 내용으로 새로 써줘.
만들 화면: 온라인 강의 랜딩 페이지 첫 화면. 제목 한 줄, 설명 두 줄, 신청 버튼 하나.

성공하면 원본 사이트의 색과 간격 감각을 따르되 내용은 우리 것인 화면이 나옵니다.

STEP 4 · 3분터미널 없이 크롬 확장으로 뽑는다

이 단계에서는 CLI 대신 브라우저 확장을 씁니다. design-md-chrome 은 보고 있는 탭의 스타일을 읽어 DESIGN.md 나 SKILL.md 를 만들고 내려받게 해 줍니다. 스토어 설치가 아니라 저장소를 받아 직접 올리는 방식입니다.

⚡ 04 · 확장 올리기

chrome://extensions → Developer mode 켜기 → Load unpacked → 받은 design-md-chrome 폴더 선택

성공하면 확장 아이콘을 눌렀을 때 Generate DESIGN.md 버튼이 보이고, Download 로 파일을 받을 수 있습니다.

알아 둘 한계

2026년 9월 22일 designlang 12.21.0 실행에서는 파일을 다 쓴 뒤 마지막에 Extraction failed 오류가 한 줄 나왔습니다. 파일은 정상으로 남아 있었습니다.
추출한 값은 공개된 CSS 값입니다. 로고·이미지·문구·상표는 원본 사이트의 것이므로 그대로 쓰지 않습니다.
로그인해야 보이는 페이지는 쿠키 옵션이 필요합니다. 크롬 확장은 이 글에서 직접 설치해 보지 않았고 README 기준으로 적었습니다.

FAQ

아무 사이트나 되나요? 공개 페이지는 대부분 됩니다. 애니메이션이 많은 사이트는 값이 많이 나와 DESIGN.md 를 조금 다듬는 편이 낫습니다.

AGENT.md 는 꼭 넣어야 하나요? 아닙니다. DESIGN.md 하나로도 되고, AGENT.md 는 규칙을 더 강하게 지키게 하고 싶을 때 씁니다.

공식 참고 자료

명령과 출력 파일은 2026년 9월 22일에 임시 폴더에서 직접 실행해 확인한 내용입니다.

AI 수익화 정보는 카톡방에 먼저 올립니다 새 자료도 카톡방에 먼저 풀고, 막히는 부분은 거기서 바로 물어보실 수 있습니다. 카톡방 들어가기 →