Manavarya09/design-extract

해결하는 문제

designlang는 어떤 실시간 웹사이트에서도 완전한 디자인 시스템을 추출하는 도구입니다. DOM을 프로그래밍 방식으로 읽어 스타일, 토큰, 레이아웃을 수동으로 재생성하는 노동을 제거하며, Tailwind 설정, Figma 변수, React 컴포넌트 스텁과 같은 개발자용 자산을 생성합니다.

작동 방식

이 도구는 헤드리스 브라우저(Chromium)를 사용하여 URL의 실시간 DOM을 분석합니다. 색상, 타이포그래피, 간격, 모션을 추출하고, 여러 페이지를 크롤링하여 일관성 있고 중복 제거된 디자인 시스템을 합성할 수 있습니다. 또한 레이아웃 패턴, 네 가지 브레이크포인트에서의 반응형 동작, 상호작용 상태(호버/포커스/액티브)를 분석합니다.

대상 사용자

기존 웹사이트의 디자인 언어를 클론, 재현, 또는 분석해야 하는 프론트엔드 개발자, UI/UX 디자이너, AI 코딩 에이전트를 위한 도구입니다. 개발을 빠르게 시작하거나 시각적 정확성을 보장하기 위해 사용됩니다.

주요 기능

• 포괄적인 출력: W3C DTCG 토큰, Tailwind 설정, shadcn 테마, Figma 변수를 포함한 17개 이상의 파일을 생성합니다.
• 정확도 측정: 픽셀 차이 분석과 모션 분석을 사용해 클론과 원본 사이트를 비교하여 0~100점의 점수와 순위 기반 수정 계획을 제공합니다.
• 디자인 DNA: 색상, 타이포그래피, 공간, 형태, 모션의 5개 축에서 다른 시스템과 비교하여 디자인 공간 내 상대적 위치를 평가합니다.
• AI 통합: Claude Code 플러그인과 MCP 서버로 제공되어 AI 에이전트가 디자인 토큰과 컴포넌트를 직접 접근할 수 있습니다.
• 고급 추출: 런타임 모션(스태거링, 코디네이션, 스크롤 레시피)과 WCAG 대비도 분석하여 접근성도 지원합니다.
• 전체 사이트 합성: 여러 페이지를 크롤링하여 커버리지 기반으로 사이트 전체 토큰과 페이지별 선택 사항을 분리합니다.