# \#designlang **URL:** https://discuss.pytorch.kr/tag/designlang/7988.md [최신](https://discuss.pytorch.kr/latest.md) · [카테고리](https://discuss.pytorch.kr/categories.md) · [태그](https://discuss.pytorch.kr/tags.md) --- ## [designlang: 웹사이트의 디자인 시스템을 한 번에 추출하는 CLI와 AI 에이전트 도구](https://discuss.pytorch.kr/t/designlang-cli-ai/10494)
**Author:** [@9bow](https://discuss.pytorch.kr/u/9bow)\ **댓글:** 0\ **마지막 업데이트:** [6월 3, 2026, 9:30오후 UTC](https://discuss.pytorch.kr/t/designlang-cli-ai/10494 "2026-06-03T21:30:03Z")
designlang: 웹사이트의 디자인 시스템을 한 번에 추출하는 CLI와 AI 에이전트 도구 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으로…