프로젝트 소개

designlang (저장소 manavarya09/design-extract, npm 패키지 designlang)는 MIT 라이선스를 가진 오픈소스 CLI로, Node 20+가 필요하며 헤드리스 브라우저를 사용해 모든 URL에서 디자인 시스템을 추출한다. 17개 이상의 파일을 ./design-extract-output에 출력하며, 19절 구성 디자인 언어 마크다운, W3C DTCG 원시/반의미/복합 레이어 토큰, Tailwind 구성, shadcn/ui 테마 변수, Figma Variables JSON, CSS 커스텀 프로퍼티, 타입 지정 React 컴포넌트 구조 스텁, 모션 토큰, 브랜드 목소리 JSON, v0/Lovable/Cursor/Claude Artifacts용 미리 쓰기 프롬프트를 포함한다. MCP 서버 페이로드도 작성하며 MCP 서버로 실행 가능하다. 단일 페이지 추출 외에도 레이아웃 시스템 캡처(그리드, 플렉스, 컨테이너 너비, 갭), 4개 브레이크포인트 반응형 크롤링, 상호작용 상태 캡처(hover/focus/active), document.getAnimations() 기반 런타임 모션 캡처, 스크롤 레시피, 다중 페이지 크롤링 및 공유/라우트별 토큰 정합성, WCAG 2.1 대비 점수화 및 개선 팔레트 제안, z-index 지도, 그라데이션 감지, SVG 아이콘 중복 제거, 폰트 파일 감지, 이미지 스타일 분류, 스택 지문, CSS 무결성 감사, 의미론적 영역 분류(nav, hero, pricing, testimonials, CTA, footer), 재사용 컴포넌트 클러스터링을 제공한다. 명령어로는 designlang URL(전체 추출), site(사이트 전체canonical 시스템 및 일관성 등급), grade(공유 가능한 HTML 리포트 카드 및 SVG 배지), battle(헤드투헤드 등급), remix(brutalist/swiss/art-deco/cyberpunk/soft-ui/editorial 등 스타일 전환), pack(출력번들링), theme-swap(OKLCH 색조 회전), brand(13장 브랜드 가이드북), pair(두 디자인 융합), dna(30특징 공간 배치), dna-corpus(커스텀 참고 코퍼스 구축), fidelity(클론 시각/모션 점수 및 교정 계획), gallery(정적 갤러리), clone(Next.js 시작 템플릿 생성), apply(발견된 프레임워크에 토큰 쓰기), drift/lint/visual-diff(CI 준비 검사), sync/history/watch/diff(모니터링 비교) 등이 있다. 다중 플랫폼 에미터로 iOS SwiftUI, Android Compose, Flutter, WordPress 출력이 지원된다. Chrome 확장 프로그램(MV3, activeTab)으로 한 번 클릭 핸드오프가 가능하다. npm 글로벌 설치 또는 에이전트 스킬 추가가 가능하며, Claude Code 플러그인으로 슬래시 명령어를 포함한다. 선택적 --smart 분류는 Atlas Cloud 또는 기존 OpenAI/Anthropic 키를 사용한다. README에는 사이트 추출의 결정론적이고 무료 핵심 기능을 명시하고 있으며, 설계 점수는 누락된 측정을 대체하지 않는다고 안내한다. 이는 디자인 시스템 감사, 토큰 생성, 접근성 검토, 디자인-투코드 워크플로우, 클론 충실도 측정에 유용한 디자인 도구 및 개발자 도구 프로젝트이다.