Manavarya09/design-extract

어떤 프로젝트인가요?

핵심 기능

• 01실제 페이지에서 색상, 타이포그래피, 간격, 그림자, 모서리 반경, CSS 변수를 추출합니다.
• 02W3C DTCG 토큰, Tailwind 설정, shadcn/ui 테마, Figma 변수를 출력합니다.
• 034개의 브레이크포인트에서 반응형 동작을 캡처하고 hover, focus, active 상태도 수집합니다.
• 04전경색과 배경색 조합의 WCAG 대비 점수를 매깁니다.
• 05Claude Code, Cursor, Windsurf용 MCP 서버로 실행됩니다.
• 06iOS, Android, Flutter, WordPress용 플랫폼별 토큰을 생성합니다.

활용 사례

• 경쟁 사이트나 참고 사이트의 디자인을 재현할 때 기본 디자인 시스템으로 활용합니다.
• 기존 웹사이트에서 Tailwind 또는 shadcn/ui 테마를 생성합니다.
• 추출한 토큰을 AI 코딩 에이전트에 전달해 생성된 UI가 시각적 스타일과 일치하도록 합니다.
• CI에서 실제 사이트와 토큰 파일을 비교해 디자인 드리프트를 감지합니다.

빠른 시작

1. 1

   CLI를 전역으로 설치합니다

   npm i -g designlang
2. 2

   Chromium 브라우저를 한 번 설치합니다

   designlang install-browser
3. 3

   사이트의 디자인 시스템을 추출합니다

   npx designlang https://stripe.com

사용 전 알아둘 점

• !처음 사용하기 전에 헤드리스 Chromium 브라우저를 다운로드해야 합니다.
• !일부 고급 기능(site, fidelity, dna)은 버전 관리되며 빠르게 변경될 수 있습니다.

토픽

자주 묻는 질문

design-extract은(는) 무엇인가요?

헤드리스 브라우저로 웹사이트의 디자인 시스템을 추출해 다양한 형식으로 내보내는 CLI입니다. designlang은 Playwright를 통해 headless Chromium에서 URL을 열고, 실제 DOM의 계산된 스타일과 레이아웃을 읽습니다. 명령 하나로 색상, 타이포그래피, 간격, 그림자, 모서리 반경, CSS 변수, 모션 토큰, 감지된 컴포넌트가 포함된 파일 세트를 생성합니다. 여기에는 W3C DTCG 토큰, Tailwind 테마, shadcn/ui 테마, 라이트 및 다크 모드용 Figma 변수가 포함됩니다.

design-extract은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

design-extract은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

design-extract은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. design-extract의 마지막 커밋은 2026년 10월 8일입니다.

design-extract은(는) 어디에 사용할 수 있나요?

경쟁 사이트나 참고 사이트의 디자인을 재현할 때 기본 디자인 시스템으로 활용합니다. 기존 웹사이트에서 Tailwind 또는 shadcn/ui 테마를 생성합니다. 추출한 토큰을 AI 코딩 에이전트에 전달해 생성된 UI가 시각적 스타일과 일치하도록 합니다. CI에서 실제 사이트와 토큰 파일을 비교해 디자인 드리프트를 감지합니다.

design-extract는 어떻게 설치하나요?

CLI를 전역으로 설치합니다: npm i -g designlang Chromium 브라우저를 한 번 설치합니다: designlang install-browser 사이트의 디자인 시스템을 추출합니다: npx designlang https://stripe.com

design-extract은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Manavarya09/design-extract