Manavarya09/design-extract

해결하는 문제

designlang는 DOM을 분석하여 어떤 실시간 웹사이트든 완전한 디자인 시스템을 추출하는 도구입니다. 실시간 사이트에서 디자인 토큰, 레이아웃, 브랜드 가이드라인을 수동으로 재구성해야 하는 문제를 해결하며, 개발자와 디자이너가 사이트의 시각적 정체성을 프로그래밍 방식으로 복제하거나 분석할 수 있는 방법을 제공합니다.

작동 방식

이 도구는 헤드리스 브라우저(Chromium)를 사용하여 URL을 지정하고 실시간 DOM에서 디자인 시스템을 직접 읽어옵니다. 여러 브레이크포인트에서 색상, 타이포그래피, 간격, 모션, 레이아웃 패턴을 분석합니다. 여러 페이지를 크롤링하여 일관성 있고 중복 제거된 디자인 시스템을 합성할 수 있으며, 픽셀 차이와 모션 분석을 통해 클론의 "정확도"를 측정할 수도 있습니다.

대상 사용자

• 프론트엔드 개발자: 실시간 사이트를 기반으로 Tailwind 설정, shadcn 테마, 또는 Next.js 스타터를 빠르게 생성할 수 있습니다.
• UI/UX 디자이너: 기존 웹사이트에서 Figma 변수와 브랜드 가이드라인을 추출할 수 있습니다.
• AI 에이전트: MCP 서버 또는 Claude Code 플러그인을 통해 프로그래밍 방식으로 디자인 토큰과 컴포넌트에 접근하여 웹사이트를 구축하거나 리스타일링할 수 있습니다.

주요 기능

• 포괄적인 추출: DTCG 토큰, Tailwind 설정, Figma 변수, 타입화된 React 컴포넌트 구조를 포함한 17개 이상의 파일을 출력합니다.
• 정확도 측정: 0~100 점으로 클론을 원본과 비교하고, 시각적 및 모션 정확도를 위한 순위 매겨진 수정 계획을 제공합니다.
• 디자인 DNA: 색상, 타이포그래피, 공간, 형태, 모션의 5개 축에서 다른 시스템들과 비교하여 디자인의 상대적 위치를 평가합니다.
• 전체 사이트 분석: 여러 페이지를 크롤링하여 사이트 전체 토큰과 페이지별 선택 사항을 분리합니다.
• 에이전트 통합: Claude Code 플러그인 및 MCP 서버로 제공되어 AI 코딩 도구와 원활하게 연동됩니다.
• 고급 시각적 캡처: 호버/포커스 상태, WCAG 대비 점수, 복잡한 모션 코디네이션을 캡처합니다.