designlang: 웹사이트의 디자인 시스템을 한 번에 추출하는 CLI와 AI 에이전트 도구

9bow · 6월 3, 2026, 9:30오후

designlang 소개

다른 사이트의 디자인을 참고해 내 프로젝트에 옮기는 작업은 보통 손으로 합니다. 개발자 도구를 열어 색상 값을 하나씩 복사하고, 폰트와 자간을 눈대중으로 맞추고, 간격과 그림자를 추정해 다시 토큰으로 정리합니다. 이 과정은 시간이 오래 걸릴 뿐 아니라 누락과 오차가 생기기 쉽고, 반응형 동작이나 상호작용 상태(hover, focus)처럼 정적 화면만 봐서는 알기 어려운 정보는 빠지기 마련입니다.

designlang은 이 작업을 명령 한 줄로 자동화하는 도구입니다. 헤드리스 브라우저(headless browser)를 임의의 URL에 띄워 살아있는 DOM에서 디자인 시스템을 직접 읽어내고, 한 번 실행으로 17개 이상의 파일을 생성합니다. W3C DTCG 디자인 토큰(Design Tokens), Tailwind 설정, shadcn 테마, Figma 변수, 모션 토큰, 타입이 지정된 컴포넌트 구조, 브랜드 보이스, 페이지 의도 라벨, 그리고 v0·Lovable·Cursor·Claude Artifacts에 바로 붙여 넣을 수 있는 프롬프트 묶음까지 한꺼번에 떨어집니다.

designlang이 다른 추출기와 구분되는 지점은 단순 토큰을 넘어 디자인의 구조까지 읽는다는 데 있습니다. 그리드와 플렉스 컨테이너 같은 레이아웃 시스템, 네 개 브레이크포인트에 걸친 반응형 동작, hover·focus·active 상호작용 상태의 변화, 모든 전경/배경 색 쌍에 대한 WCAG 명암비 점수, 여러 페이지에 걸친 일관성, 그리고 등급이 매겨진 리포트 카드를 함께 제공합니다. 이 글에서는 designlang의 동작 파이프라인과 추출 결과물, AI 코딩 워크플로 연동, 설치와 사용 방법을 정리합니다.

designlang의 동작 파이프라인

designlang의 추출 과정은 크게 다섯 단계로 이어집니다. Playwright 기반 헤드리스 Chromium으로 페이지를 크롤하면서 네트워크와 폰트 로딩이 끝나기를 기다리고(크롤), 한 번의 page.evaluate() 호출로 최대 5,000개의 DOM 요소를 순회하며 25개 이상의 계산된 속성과 인라인 SVG, 폰트 소스, 이미지 메타데이터를 수집합니다(추출). 이렇게 모은 원시 데이터는 17개의 추출 모듈이 파싱·중복 제거·클러스터링·분류하고(처리), 12개 이상의 포매터 모듈이 결과 파일로 내보냅니다(포맷). 마지막으로 접근성 추출기가 모든 색 쌍의 WCAG 명암비를 계산해 점수를 산출합니다(점수). 스크린샷, 반응형 뷰포트 크롤링, 상호작용 상태 기록은 선택적으로 추가할 수 있습니다.

designlang이 추출하는 것

한 번 실행하면 결과물이 ./design-extract-output/ 디렉토리에 기록됩니다. 대표적인 출력물은 다음과 같습니다.

파일	내용
`*-design-language.md`	19개 섹션의 마크다운으로, LLM에 그대로 입력해 디자인을 재현할 수 있는 문서
`*-design-tokens.json`	W3C DTCG 토큰 (원시·시맨틱·복합 레이어)
`*-tailwind.config.js`	바로 적용 가능한 Tailwind 테마
`*-shadcn-theme.css`	shadcn/ui `globals.css` 변수
`*-figma-variables.json`	Figma 변수 임포트 (라이트 + 다크)
`*-anatomy.tsx`	감지된 컴포넌트와 변형(variant)에 대한 타입 지정 React 스텁
`*-motion-tokens.json`	지속 시간, 이징(easing), 스프링, 스크롤 연동 플래그
`*-voice.json`	브랜드 보이스 — 톤, 인칭 표현, CTA 동사 목록

이 밖에도 --platforms web,ios,android,flutter,wordpress,all 옵션으로 iOS SwiftUI, Android Compose, Flutter, WordPress 블록 테마 같은 멀티 플랫폼 출력을 추가할 수 있고, --emit-agent-rules로 Cursor·Claude Code용 규칙 파일을 함께 내보낼 수 있습니다.

designlang을 AI 코딩 워크플로에 연결하기

designlang은 CLI 외에도 여러 표면(surface)으로 제공됩니다. VS Code 확장, Raycast 확장, Figma 플러그인, PR마다 토큰 변화를 비교해 코멘트를 다는 GitHub Action, 그리고 현재 탭에서 한 번에 넘겨주는 Chrome 확장이 있습니다. AI 코딩 도구와의 연결은 두 가지 경로가 핵심입니다.

첫째는 MCP 서버 입니다. designlang mcp 명령은 추출한 토큰, 영역(region), 컴포넌트, 명암비 색 쌍을 MCP(Model Context Protocol) 리소스와 도구로 노출해, Cursor·Claude Code·Windsurf 같은 MCP 지원 에이전트가 직접 참조할 수 있게 합니다. 둘째는 Claude Code 플러그인 으로, 저장소의 .claude-plugin/ 디렉토리를 통해 /extract, /grade, /battle, /remix, /pack 다섯 개의 슬래시 명령을 Claude Code 세션 안에서 바로 쓸 수 있습니다.

/plugin install Manavarya09/design-extract

이 두 경로 외에도 skills 생태계를 통해 Cursor, Codex를 포함한 40여 개의 AI 코딩 에이전트에서 에이전트 스킬(agent skill)로 추가할 수 있습니다.

npx skills add Manavarya09/design-extract

designlang 설치 및 사용법

가장 간단한 사용법은 설치 없이 npx로 바로 실행하는 것입니다. Node 20 이상이 필요합니다.

npx designlang https://stripe.com          # 전체 추출
npx designlang grade https://stripe.com    # 등급이 매겨진 리포트 카드
npx designlang clone https://stripe.com    # 추출한 디자인으로 동작하는 Next.js 스타터 생성
npx designlang --full https://stripe.com   # 스크린샷 + 반응형 + 상호작용까지

전역 설치도 가능합니다.

npm i -g designlang

--full 옵션으로 https://vercel.com을 추출하면 다음과 같은 요약이 출력됩니다.

Colors: 27 · Fonts: Geist + Geist Mono · Spacing: 18 (base 2px)
Shadows: 11 · Radii: 10 · CSS vars: 407 · Layout: 55 grids / 492 flex
Responsive: 4 viewports, 3 breakpoint changes · Interactions: 8 transitions
A11y: 94% WCAG · Score: 68/100 (D) · 4 issues

→ 17 files written to ./design-extract-output/

이 밖에도 두 사이트를 비교하는 battle, 다른 시각 어휘로 다시 칠하는 remix, 두 디자인을 융합하는 pair, 라이브 사이트를 기준으로 토큰 드리프트를 검사하는 drift 등 여러 하위 명령이 있습니다. drift, lint, visual-diff는 실패 시 0이 아닌 종료 코드를 반환해 CI에 바로 붙일 수 있습니다.

designlang의 라이선스

designlang은 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

designlang 공식 홈페이지

designlang 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~