소개
마음에 드는 웹사이트의 디자인을 감이 아니라 데이터로 뽑아 이를 클로드 디자인에 등록해 재사용되는지 보고자 실습해봤습니다. 레퍼런스 사이트의 디자인 토큰을 자동 추출 → 우리 브 랜드에 맞게 교정 → 계속 편하게 쓸 수 있는 정본으로 고정하는 흐름을 만들 수 있나 시도했습니다.
대상은 두 곳이었습니다.
① 지피터스(gpters.org) — 감을 잡는 연습용
② 얀트라(yantra.com.sg, 싱가포르 파인다이닝) — 브라운 톤으로 된 랜덤 선정 사이트
진행 방법
사용한 도구
- designlang (npm CLI) — 웹사이트에서 디자인 토큰(색·폰트·여백·그림자·모션)을 자동 추출
- Claude Code — 추출값 교정, 디자인 시스템 HTML 제작, 파일 관리
- Claude Design (claude.ai/design) + /design-sync — 만든 디자인 시스템을 등록
진행 순서
1. designlang 설치 후 사이트별로 토큰 추출 (사이트당 30여 개 파일 생성: 토큰 JSON, Tailwind 설정, Figma 변수 등)
2. 추출 결과의 노이즈를 교정 (뒤에서 설명)
3. 교정한 토큰으로 한 장짜리 디자인 시스템 HTML 제작 — 색상/타이포/여백 + 실제 컴포넌트(히어로·가격표·CTA·카드·뱃지) + PPTX 슬라이드 규칙
4. /design-sync로 Claude Design에 참고용 카드로 등록
설치 및 추출:
npm i -g designlang
npx designlang https://www.gpters.org/
npx designlang https://www.yantra.com.sg/
디자인 시스템 제작 프롬프트:
designlang이 뽑아준 토큰과 브랜드 문서를 원본 초안으로 삼아, 다음을 해줘:
1. 추출 노이즈(폰트·색 대비 등) 필요하면 교정하고 대안 제시
2. 이 토큰을 상세페이지(HTML)의 실제 컴포넌트(히어로/가격표/CTA/카드/뱃지)에
매핑한 적용 가이드
3. PPTX 카탈로그용 규칙(표지·본문 슬라이드 색/폰트/여백) 별도 정리
4. 위를 하나의 HTML로 묶어 한눈에 디자인 시스템을 살펴보게 해줘.
실제(yantra) 프롬프트:
디자인랭으로 https://www.yantra.com.sg/ 이 사이트 디자인 컴포넌트 추출하고 테르엔에 맞는 디자인 시스템 만들어서, 이름은 yantra-design-system (내용은 우리 테르엔에 맞게 작성) 으로 해서 클로드 디자인에 등록해
Claude Design 등록:
$ cd path/to/your-design-system
$ claude
› /design-sync
한국 달력의 스크린샷
우리는 무엇을 만들어야합니까?
결과와 배운 점
결과
- Claude Design에 2개 디자인 시스템 등록 완료 — gpters-design-system(오렌지·pill·부드러운 톤), yantra-design-system(크림·브라운·플랫·세리프의 프리미엄 웰니스 톤, 테르엔 콘텐츠로 재구성).
- 색상·타이포·여백·컴포넌트 예시·PPTX 규칙이 한 곳에 정리돼, 이후 상세페이지·제안서 제작의 출발점(정본)이 생겼습니다.
배운 점 · 꿀팁
- 추출값을 절대 그대로 믿지 말 것. 자동 추출은 "면색"과 "노이즈"를 구분 못 합니다. 사람이 한 번 걸러야 실전에서 씁니다.
- 가장 값진 산출물은 tailwind.config.js·토큰 JSON. 이미 우리 스택(Next.js+Tailwind)에 바로 붙습니다.
- 톤은 브랜드 성격으로 고를 것. 커뮤니티(gpters)의 활기찬 오렌지보다, 파인다이닝(yantra)의 차분한 크림·브라운이 '건강·프리미엄'을 파는 우리 브랜드엔 더 맞았습니다.
시행착오
- 가짜 브랜드색 함정: 얀트라 추출 주색이 #0000EE로 나왔는데, 알고 보니 브라우저 기본 링크 파랑이 링크에 50번 쓰여 대표색으로 오인된 것이었습니다. 실제 브랜드는 크림+브라운이었죠.
- 폰트 오인식: 지피터스는 제목 이모지(📣📢) 탓에 폰트 라는 Arial/Times(폴백)로 잡혔습니다. 실제 폰트가 아니라
전부 교체.
- 여백 이상치: 336px, 불규칙 픽셀값(Wix 절대배치 잔재)했습니다.
- 색 대비: 주황(#EB5A10)을 본문 글자로 쓰면 가독성 기 두운 톤을 따로 만들었습니다.
