Manavarya09 / design-extract

---

designlang은 헤드리스 브라우저를 사용하여 임의의 URL을 방문하고 라이브 DOM에서 디자인 시스템을 읽습니다. 하나의 명령으로 17개 이상의 파일을 생성합니다 — DTCG 토큰, Tailwind 구성, shadcn 테마, Figma 변수, 모션 토큰, 타입드 컴포넌트 구조, 브랜드 보이스, 페이지 의도 레이블, v0 / Lovable / Cursor / Claude Artifacts용 붙여넣기 가능한 프롬프트 팩.

또한 추출기가 가지 못하는 곳까지 다룹니다: 레이아웃 패턴, 4개 브레이크포인트에 걸친 반응형 동작, 호버 / 포커스 / 액티브 상태, WCAG 대비 점수, 다중 페이지 일관성, 라이브 소스오브트루스와의 드리프트 체크, 비주얼 차이, 그리고 공유 가능한 등급 매겨진 보고서 카드.

빠른 시작

어떤 README에도 라이브 디자인 점수 배지를 추가하세요:

설치

제공 항목

각 실행 시 ./design-extract-output/에 17개 이상의 파일이 작성됩니다. 주요 출력 항목은 다음과 같습니다:

파일	내용
*-design-language.md	19섹션 마크다운 — LLM에 제공하여 디자인 재생성 가능
*-design-tokens.json	W3C DTCG 토큰 (프리미티브 + 시멘틱 + 합성 레이어)
*-tailwind.config.js	바로 사용 가능한 Tailwind 테마
*-shadcn-theme.css	shadcn/ui globals.css 변수
*-figma-variables.json	Figma Variables 가져오기 (라이트 + 다크)
*-variables.css	CSS 커스텀 속성
*-anatomy.tsx	감지된 각 컴포넌트 + 변형에 대한 타입드 React 스텁
*-motion-tokens.json	지속 시간, 이징, 스프링, 스크롤 연동 플래그
*-voice.json	브랜드 보이스 — 톤, 대명사 자세, CTA 동사
*-prompts/

---

🌐 본 텍스트는 빠른 이해를 돕기 위한 요약 번역본입니다. 정확한 기술 정보 및 전체 코드는 GitHub 원문에서 확인하실 수 있습니다.