소개
레퍼런스 사이트의 색·폰트·간격을 그대로 우리 프로젝트에 가져오는 게 늘 숙제였습니다. 눈대중으로 컬러픽커 찍고 개발자도구 뒤지는 반복 작업이죠. 그래서 URL 하나로 사이트의 디자인 언어를 통째로 뽑아주는 designlang CLI를 테스트하고, 그 결과를 검수 → Claude Design 업로드까지 한 대화로 이어봤습니다. 대상은 커머스 AI 스타트업 nxn.ai. 핵심 질문은 "자동 추출 결과를 그대로 믿어도 되는가?"였습니다.
진행 방법
도구: designlang(npx CLI) · Claude Code(Opus 4.8) · Claude Design
1) 추출 — Claude에게 폴더 생성 + 명령 실행을 시켰습니다. 명령은 이 한 줄:
npx --yes designlang https://www.nxn.ai/338개 요소의 computed style을 분석해 35종 파일(Design Tokens JSON, Tailwind, Figma Variables, AGENT.md 등)을 30초 만에 생성.
📸 (캡처: 터미널 "Output files" 35개 목록)
2) 노이즈 검수 — "요약"이 아니라 "믿을 수 없는 노이즈를 짚어줘" 라고 시킨 게 핵심이었습니다.
항목
도구 값
실제
폰트
8종
굵기 중복 카운트 → 2패밀리
접근성
"100% 통과"
검증 색쌍 0개. 파랑이 검정 배경서 2.2:1 AA 미달
status 색
[object Object]
추출 실패 → 직접 정의
3) 자산화 — 교정 토큰을 컴포넌트 미리보기 카드로 묶어 Claude Design에 업로드. 각 파일 첫 줄 @dsCard 마커면 카드 자동 인식:
<!-- @dsCard group="Components" name="Hero" subtitle="Dark hero · display type" -->--brand: #0000ee; /* 밝은 배경 전용 (9.4:1) */--brand-on-dark: #6f8cff; /* 어두운 배경용 신설 (AA 통과) */
📸 (캡처: 완성 문서 + claude.ai/design "nxn design" 프로젝트 카드 화면)
결과와 배운 점
URL 한 줄 → 검수된 디자인 시스템 → Claude Design 자산화까지 한 대화로 완결. Foundations 3종 + Components 5종이 팀 공유 가능 상태가 됐습니다.
꿀팁
🔑 "요약해줘"보다 "노이즈를 짚어줘". 자동 도구는 결과값을 추측하는 것이라 비판적 검수를 명시해야 폰트 뻥튀기·가짜 접근성 점수를 잡아냅니다.
🔑 접근성 수치는 직접 계산시키기. "100%"라도 실제 검증은 0건이라, 어두운 배경용 파랑(
--brand-on-dark)을 따로 만든 게 가장 값진 결과.
시행착오
마지막에
Extraction failed에러가 떴지만 후처리 버그일 뿐 파일 35개는 정상 생성. → 에러 메시지보다 결과물을 직접 확인할 것.프로젝트 이름을 도중에 바꿔 재생성 → 빈 프로젝트가 남았고, 이 도구로는 삭제가 안 돼 UI에서 수동 삭제. 이름은 처음에 확정하기.
도움 필요 / 계획
상용 폰트(ABC Diatype 등)의 무료 대체 매칭이 최선인지 경험을 나누고 싶습니다.
여러 레퍼런스를 배치 추출 → 교정 → 아카이빙하는 "디자인 레퍼 런스 라이브러리"로 확장 예정.
도움 받은 글 (옵션)
designlang(GitHub: Manavarya09/design-extract) · Claude Design(claude.ai/design) · 분석 대상 nxn.ai
