r/ClaudeAI•약 2개월 전•493•66
웹사이트의 디자인 시스템을 추출하는 Claude Code 플러그인을 만들었습니다
핵심 요약
웹사이트의 디자인 요소와 컴포넌트를 추출해 Claude가 그대로 재현하게 돕는 도구입니다.
- 디자인 시스템 추출 — 웹사이트의 색상, 폰트, 간격, 컴포넌트 등을 마크다운으로 변환함
- 다양한 포맷 지원 — Tailwind 설정, shadcn/ui 테마, Figma 변수 등 8가지 출력물 생성
- Claude 연동 최적화 — 추출된 데이터를 Claude에 입력하여 랜딩 페이지를 정확하게 재구현함
- 추가 기능 제공 — 사이트 간 디자인 비교, 스크린샷 캡처, 다크 모드 추출 등 지원
Claude Code에서 /extract-design https://stripe.com 을 입력하면 색상, 폰트, 간격, 그림자, 컴포넌트 등 전체 디자인 언어를 추출합니다.
주요 출력물은 Claude가 이해할 수 있도록 특별히 구조화된 마크다운 파일입니다. 따라서 사이트의 디자인을 추출한 다음 Claude에게 "이 디자인 시스템을 사용해서 랜딩 페이지를 만들어줘"라고 하면 정확한 토큰, 스케일, 컴포넌트 패턴을 사용하여 완벽하게 구현합니다.
또한 Tailwind 설정, shadcn/ui 테마, React 테마, Figma 변수, CSS 변수, 시각적 HTML 미리보기를 한 번의 명령어로 생성합니다.
그 외 기능:
designlang diff stripe.com vercel.com— 두 사이트 비교--depth 5— 사이트 전체 시스템을 위해 여러 페이지 크롤링--screenshots— 버튼, 카드, 내비게이션의 PNG 캡처--dark— 다크 모드도 추출designlang history— 시간 경과에 따른 디자인 변경 사항 추적
npx 도구로도 작동합니다: npx designlang https://stripe.com
GitHub: https://github.com/Manavarya09/design-extract
한 번의 명령어로 8개의 출력 파일 생성:
- AI 최적화 마크다운 (ChatGPT/Claude에 입력하면 디자인을 재현함)
- Tailwind 설정, CSS 변수, React 테마, shadcn/ui 테마
- 브라우저에서 열 수 있는 시각적 HTML 미리보기
- 디자이너 전달용 Figma 변수 JSON
- W3C 디자인 토큰
