designlang은 headless 브라우저로 라이브 DOM을 읽어 웹사이트의 디자인 시스템을 자동 추출하는 오픈소스 CLI다. 단 하나의 명령으로 DTCG 토큰·Tailwind 설정·shadcn 테마·Figma 변수·모션 토큰·컴포넌트 구조·브랜드 보이스 등 17개 이상의 파일을 생성한다. v0·Lovable·Cursor·Claude Artifacts 같은 AI 코딩 도구에 그대로 붙여 쓸 수 있는 프롬프트 팩까지 함께 출력한다.
왜 주목받는가
기존 디자인 토큰 추출 도구들은 색상·폰트 수준의 기초 정보만 가져온다. designlang은 한 단계 더 들어간다.
- 레이아웃 시스템: 그리드·플렉스 컨테이너·간격 값
- 반응형: 4개 브레이크포인트에서 변화 추적 (
--responsive) - 상호작용 상태: 프로그래밍 방식으로 hover·focus를 수행해 델타 캡처 (
--interactions) - 모션 언어: 지속시간·이징 패밀리·스프링 감지·
feel지문 (springy/smooth/mechanical/mixed) - 컴포넌트 해부: 변형(variant)·크기·상태 매트릭스를 포함한 슬롯 트리, TypeScript
.tsx로 출력 - 멀티페이지 일관성: 공유 토큰 vs 페이지별 토큰 자동 대조
- WCAG 감사: 모든 전경/배경 쌍 점수화 및 수정 팔레트 제안
설치
npm i -g designlang핵심 명령어
# 기본 추출 (색상·폰트·간격·그림자·컴포넌트 등 전체)
npx designlang https://stripe.com
# 작업 디렉터리에 토큰 자동 적용 (프레임워크 자동 감지)
npx designlang apply https://stripe.com -d ./app
# Next.js 스타터 생성
npx designlang clone https://stripe.com
# 디자인 품질 점수 (A-F 등급, 8개 차원)
npx designlang grade https://stripe.com
# 두 디자인 비교 배틀
npx designlang battle stripe.com vercel.com
# 브랜드 가이드라인 문서 (13장)
npx designlang brand stripe.com
# 두 디자인 퓨전 (A의 비주얼 + B의 타이포/보이스)
npx designlang pair stripe.com linear.app
# MCP 서버 실행 (Cursor·Claude Code에서 직접 사용)
npx designlang mcp주요 기능 상세
DTCG 토큰 출력
Design Token Community Group 표준 형식으로 토큰을 출력해 피그마 변수, Tailwind v4, shadcn/ui에 바로 적용할 수 있다.
MCP 서버
designlang mcp로 stdio MCP 서버를 실행하면 Claude Code, Cursor, Windsurf 같은 AI 코딩 도구에서 토큰·컴포넌트·색상 대비 쌍 등을 도구 호출로 직접 쿼리할 수 있다.
# Claude Code에서 활용
npx skills add Manavarya09/design-extract # 40개 이상 에이전트에서 스킬로 등록디자인 드리프트 감지 (CI 통합)
# 라이브 사이트를 소스 오브 트루스로 사용해 드리프트 감지
npx designlang drift https://yourapp.com --tokens ./src/tokens.json
# CI-ready 린터
npx designlang lint ./src/tokens/design-tokens.json
# 스테이징 vs 프로덕션 시각 비교
npx designlang visual-diff https://staging.app https://app출력 파일 목록 (일부)
| 파일 | 내용 |
|---|---|
tokens.json | DTCG 형식 디자인 토큰 |
tailwind.config.js | Tailwind v4 설정 |
figma-variables.json | Figma 변수 |
shadcn-theme.css | shadcn/ui 테마 |
components/*.tsx | 타입스크립트 컴포넌트 구조 |
motion-tokens.json | 애니메이션·트랜지션 토큰 |
brand-voice.md | 브랜드 보이스 가이드 |
prompt-pack.md | AI 코딩 도구용 프롬프트 팩 |
사용 대상
- 디자인 시스템을 코드로 빠르게 역공학(reverse engineering)하고 싶은 개발자
- 경쟁 서비스의 디자인 언어를 분석하고 싶은 디자이너·PM
- CI 파이프라인에 디자인 드리프트 검사를 추가하고 싶은 팀
- Claude Code·Cursor에서 토큰을 직접 MCP로 쿼리하며 개발하는 엔지니어
라이선스
MIT
참고 링크
- Manavarya09/design-extract — GitHub 공식 저장소
- npm: designlang