design-extract

Manav Arya Singh( @Manavarya09 )가 제작했습니다.

스폰서

Atlas Cloud — OpenAI 호환 `--smart` 분류를 지원합니다. AI 코딩 워크플로에는 Atlas Cloud 코딩 플랜을 사용해 보세요.

Bloome — AI 클론을 배포해 모든 오디언스 대화를 클라우드에서 24/7 처리합니다.

Bloome에서 designlang을 사용해 보세요.

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

또한 추출기들이 하지 않는 영역까지 갑니다: 레이아웃 패턴, 4개 브레이크포인트에 걸친 반응형 동작, hover / focus / active 상태, WCAG 대비 점수, 멀티 페이지 일관성, 라이브 소스 오브 트루스 대비 드리프트 검사, 비주얼 디프, 그리고 공유 가능한 등급 리포트 카드입니다.

빠른 시작
npx designlang https://stripe.com # 모든 것을 추출
npx designlang dna stripe.com # 측정된 디자인 공간에 배치: 이웃 + 백분위 ← v13.1
npx designlang site stripe.com # 전체 사이트: 하나의 정규 시스템 + 일관성 등급 ← v12.23
npx designlang fidelity stripe.com --clone localhost:3000 # 클론을 원본과 비교 채점 (비주얼 + 모션) ← v12.24
npx designlang gallery # 측정된 클론의 정적 공유 갤러리 ← v12.24
npx designlang studio # 라이브 토큰 에디터: 편집, 미리보기, 내보내기, 공유 ← v12.19
npx designlang verify stripe.com # 충실도 점수: 토큰에서 재구축 vs 라이브 ← v12.18
npx designlang pair stripe.com linear.app # 두 디자인 융합 (비주얼 A × 보이스 B) ← v12.8
npx designlang brand stripe.com # 전체 브랜드 가이드라인 북 (13개 챕터) ← v12.7
npx designlang theme-swap stripe.com --primary " #ff4800 " # 브랜드에 맞춰 재색상화 ← v12.6
npx designlang pack stripe.com # 하나의 다듬어진 디자인 시스템 디렉터리 ← v12.4
npx designlang remix stripe.com --as cyberpunk # 다른 어휘로 재스타일링 ← v12.3
npx designlang remix stripe.com --all # 6개 어휘를 한 번에 출력 ← v12.3
npx designlang grade https://stripe.com --badge # 리포트 카드 + SVG 배지 ← v12.2
npx designlang battle stripe.com vercel.com # 정면 대결 등급 비교 ← v12.2
npx designlang clone https://stripe.com # 작동하는 Next.js 스타터
npx designlang --full https://stripe.com # 스크린샷 + 반응형 + 인터랙션
어떤 README에든 라이브 디자인 점수 배지를 넣으세요:

![ Design Score ] ( https://designlang.app/badge/stripe.com.svg )
읽는 과정을 지켜보세요 — 라이브 Extraction Theatre ( v13 )
결과물을 그냥 믿지 마세요 — 직접 지켜보세요. designlang.app/watch에서 URL을 붙여넣으면 실제 헤드리스 Chromium이 페이지를 열고 전체 디자인 시스템을 실시간으로 읽습니다: 왼쪽에는 라이브 브라우저, 오른쪽에는 디자인 시스템 — 팔레트, 타이포, 간격, 모션 — 이 각 토큰이 페이지에서 떠오르는 대로 스스로 조립되는 분할 무대입니다.

실제 추출이 이를 구동합니다(브라우저의 CDP 스크린캐스트가 실제 토큰 이벤트와 함께 프레임 단위로 스트리밍됨). 녹화되므로 공유 링크가 정확히 그 실행을 재생합니다. 설치도, 계정도 필요 없습니다. 모든 갤러리 카드도 같은 방식으로 시청할 수 있으며, 갤러리는 이제 37개의 실제 등급이 매겨진 디자인 시스템을 아우릅니다.

전체 사이트 디자인 시스템 ( site )
대부분의 추출기는 단일 URL만 읽습니다. designlang site는 사이트의 정규 페이지(홈, 가격, 문서, 블로그, 소개, 제품…)를 크롤링하고 중복 제거된 하나의 시스템을 합성합니다. 모든 토큰은 커버리지 — 이를 사용하는 페이지의 비율 — 로 선출되므로, 진정으로 사이트 전반에 걸친 것이 일회성의 페이지 로컬 선택과 분리됩니다. 거의 동일한 색상은 OKLab에서 병합됩니다. 완전히 결정적이며 무료입니다; API 키가 필요 없습니다.

npx designlang site stripe.com --max-pages 8
정규 시스템에서 생성된 표준 팩과 함께 다음을 얻습니다:

파일
설명

*-site-system.json
정규 통합 토큰 + 커버리지 + 드리프트

*-site-coverage.md
모든 토큰에 🟢 사이트 전반 / 🟡 섹션 / 🔴 페이지 로컬 태그, 사용 페이지와 함께

*-site-consistency.md
0–100 일관성 등급, 카테고리별 분석, 통합할 시스템 외 이상치

측정된 클론 충실도 ( fidelity + gallery )
클로닝 도구는 모두 "픽셀 퍼펙트"를 주장하지만 — 아무도 측정하지 않습니다. designlang fidelity는 측정합니다. 원본과 클론(흔히 로컬 개발 서버)을 가리키면 클론의 양쪽 절반에 대해 하나의 정직한 숫자를 반환합니다:

비주얼 — 각각의 전체 페이지 스크린샷을 픽셀 디프.
모션 — 양쪽에 extractMotion()을 적용해 feel, 지속 시간, 이징, 스프링, 키프레임 종류, 스크롤 연동 모션, 안무/스태거를 비교. (대부분의 클론은 정적 픽셀을 재현하고 모션은 완전히 버립니다; 여기서 점수를 잃습니다.)

두 가지가 0–100 점수 + 문자 등급으로 블렌딩되며 — 경쟁사가 제공하지 않는 부분 — 순위가 매겨진 교정 계획: 점수를 올릴 정확한 다음 편집, 가장 효과가 큰 것부터. 측정 → 수정 → 수렴할 때까지 재실행.

npx designlang fidelity https://stripe.com --clone http://localhost:3000
npx designlang fidelity https://stripe.com --clone http://localhost:3000 --min 90 # CI 게이트
designlang clone으로 클론을 생성하나요? --fidelity를 추가하면 빌드되는 순간 클론의 토큰 기반을 라이브 사이트와 비교 채점합니다 — FIDELITY.md + 교정 계획을 프로젝트에 바로 작성, 별도 단계 없이:

npx designlang clone https://stripe.com --fidelity
fidelity.md(점수 + 모션 표 + 교정 계획), fidelity.json, 공유 가능한 fidelity-card.svg( 88% · B · stripe.com ), 그리고 fidelity-diff.png 손실 히트맵을 얻습니다.

그런 다음 게시하세요. designlang gallery는 리포트를 스캔해 배포 가능한 정적 사이트를 만듭니다 — 점수 카드 인덱스와 클론별 퍼머링크 페이지(각각 OG 카드 포함, 공유 링크가 숫자를 펼쳐 보여줌).

npx designlang gallery --title " Our clones " --base-url https://clones.example.com
측정된 디자인 공간 ( dna )
시장의 모든 추출기는 디자인이 무엇을 사용하는지 답합니다. 어디에 위치하는지는 아무도 답하지 않습니다. designlang grade는 문자를 반환하지만 — 기준 프레임 없는 문자는 눈금 없는 온도계입니다.

designlang dna는 디자인을 다섯 축 — 색상, 타이포, 공간, 형태, 모션 — 에 걸친 30개의 결정적 특징으로 축소하고 실제 디자인 시스템 코퍼스에 대해 순위를 매깁니다:

npx designlang dna raycast.com
Design DNA · https://raycast.com
30 features, 100% measurable

vs 8 systems (default)

color 65th percentile
type 56th percentile
space 42th percentile
shape 79th percentile
motion 67th percentile

Nearest
0.14 https://railway.app
0.15 https://linear.app
0.19 https://notion.so

거리는 두 디자인이 공유하는 특징들에 걸친 평균 절대 차이이므로, 0.14는 "평균 특징이 범위의 14%만큼 떨어져 있다"로 읽힙니다 — 30차원의 유클리드 거리와 달리 추론할 수 있는 숫자입니다.

리포트는 유사성을 넘어 디자인이 그렇게 보이게 만드는 요소로 나아갑니다: 코퍼스 중앙에서 가장 멀리 떨어진 특징을 평문으로( "corner radius — 100th percentile, far above the corpus" ).

나만의 기준 프레임을 가져오세요 — 당신의 제품, 경쟁사, 목표 룩:

npx designlang dna-corpus acme.com acme.com/pricing competitor.com
npx designlang dna acme.com/new-page --corpus ./corpus.json
과대 주장하는 디자인 점수는 점수가 아예 없는 것보다 나쁘므로, 하지 않는 세 가지가 있습니다:

누락된 측정은 누락된 채로 남습니다. 페이지가 노출하지 않은 특징은 null이며, 대체 중간값이 아니고, 거리는 발명된 값과 비교하는 대신 이를 건너뜁니다.
모든 숫자는 근거를 지닙니다. 거리는 이를 뒷받침한 특징 수를 보고하고, 백분위는 코퍼스와 그 크기를 명시하며, 커버리지가 부분적일 때 리포트가 경고합니다.
공간은 버전이 매겨집니다. 특징 순서와 정규화는 벡터 버전별로 고정되며, 다른 규칙으로 구축된 코퍼스는 조용히 비교되는 대신 거부됩니다.

설치
npm i -g designlang # 전역
designlang install-browser # 일회성: designlang이 구동하는 Chromium
npx skills add Manavarya09/design-extract # 에이전트 스킬로 (40+ 에이전트)
npm install은 더 이상 브라우저를 다운로드하지 않으므로 CI, Docker, 프록시 뒤에서 작동합니다. install-browser는 번들된 Playwright와 일치하는 Chromium을 가져옵니다(베어 Linux에서는 --with-deps 추가). 없으면 designlang은 설치된 Google Chrome으로 폴백합니다.

Claude Code에서 사용 (플러그인)
designlang은 Claude Code 플러그인으로 제공됩니다 — CLI를 감싸는 열한 개의 슬래시 명령. Claude Code 안에서 설치하세요:

/plugin marketplace add Manavarya09/design-extract
/plugin install designlang@designlang

첫 번째 명령은 이 저장소를 플러그인 마켓플레이스로 등록하고; 두 번째는 그로부터 designlang 플러그인을 설치합니다. 메시지가 뜨면 Claude Code를 재시작하면 명령을 사용할 수 있습니다:

명령
기능

/extract <url>
전체 디자인 언어 → DTCG, Tailwind, Figma, 모션, 보이스

/site <url>
전체 사이트 크롤링 → 하나의 정규 디자인 시스템 + 일관성 등급

/grade <url>
공유 가능한 HTML 리포트 카드 + SVG 배지

/battle <a> <b>
정면 대결 등급 비교

/remix <url> --as <vocab>
6개 어휘로 재스타일링 (brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial)

/pack <url>
하나의 다운로드 가능한 디자인 시스템 번들

/theme-swap <url>
새 브랜드 프라이머리 주변으로 OKLCH 정확 재색상화

/brand <url>
전체 편집 브랜드 가이드라인 북 (13개 챕터)

/pair <a> <b>
구성 가능한 축에 걸쳐 두 디자인 융합

/studio
라이브 토큰 에디터 — 미리보기, 다크 모드, 내보내기, 공유

/verify <url>
토큰에서 재구축, 라이브와 픽셀 디프, 충실도 점수

/fidelity <url> --clone <url>
클론을 원본과 비교 채점 (비주얼 + 모션) + 교정 계획

/gallery [dir]
측정된 클론의 정적 공유 갤러리 구축

/dna <url>
디자인을 측정된 디자인 공간에 배치 — 가장 가까운 시스템, 축별 백분위, 이상치

원시 MCP 도구를 선호하나요? CLI는 라이브 URL을 추출하는 MCP 서버를 제공합니다:

claude mcp add designlang -- npx -y designlang mcp
extract_design(url)은 작업 id를 반환합니다; get_job_status를 폴링한 다음 id를 get_tokens, get_colors, get_typography, get_components, get_findings, compute_drift(베이스라인 작업 대비) 또는 export(dtcg, tailwind, shadcn, figma, css, design-md)에 전달하세요. --output-dir <dir>를 추가하면 디스크에 이미 있는 추출을 리소스로 제공합니다.

--smart용 Atlas Cloud
designlang --smart는 이제 OpenAI 호환 채팅 API를 통해 Atlas Cloud를 사용할 수 있으므로, 저신뢰도 분류기가 제로 의존성을 유지하면서 Atlas 호스팅 모델로 라우팅될 수 있습니다.

export ATLASCLOUD_API_KEY= " <atlascloud-api-key> "
export ATLASCLOUD_MODEL= " deepseek-ai/deepseek-v4-pro "

npx designlang https://stripe.com --smart

Atlas Cloud 환경 변수: ATLASCLOUD_API_KEY, ATLASCLOUD_MODEL, 선택적 ATLASCLOUD_API_BASE
별칭 환경 변수도 작동: ATLAS_CLOUD_API_KEY, ATLAS_CLOUD_MODEL, ATLAS_CLOUD_API_BASE
기존 OPENAI_API_KEY 및 ANTHROPIC_API_KEY 흐름은 변경 없이 계속 작동

무엇을 얻나요
각 실행은 ./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
지속 시간, 이징, 스프링, 스크롤 연동 플래그; --motion-runtime 사용 시 안무(스태거) + 스크롤 레시피 + 관찰된 지속 시간

*-voice.json
브랜드 보이스 — 톤, 대명사 태도, CTA 동사

*-prompts/
v0, Lovable, Cursor, Claude Artifacts용 붙여넣기 준비 완료 프롬프트

*-mcp.json
디스크 기반 MCP 서버 페이로드

*-grade.html
v12.1 공유 가능한 디자인 리포트 카드 (문자 등급 + 근거)

*-grade.svg
v12.2 Shields.io 스타일 디자인 점수 배지 (어떤 README에든 삽입)

*-battle.html
v12.2 designlang battle의 정면 대결 등급 배틀 카드

*-remix.<vocab>.html
v12.3 다른 어휘로 재스타일링된 사이트 — brutalist / swiss / art-dec…