Repolode
제출하기
amaancoderx

amaancoderx/npxskillui

웹사이트, 저장소 또는 로컬 프로젝트의 디자인 시스템을 추출해 Claude Code가 UI를 만들 때 참고할 파일을 생성하는 CLI입니다.

GitHub에서 보기웹사이트
스타
2,418
포크
250
열린 이슈
6
마지막 커밋
5개월 전

어떤 프로젝트인가요?

SkillUI는 실제 웹사이트, git 저장소 또는 로컬 코드베이스를 크롤링해 색상 토큰, 타이포그래피 스케일, 간격 그리드, 컴포넌트 등의 디자인 시스템을 추출하는 CLI 도구입니다. 결과는 SKILL.md와 CLAUDE.md가 포함된 폴더로 묶이며, Claude Code가 UI 제작을 요청받았을 때 디자인 맥락을 자동으로 불러올 수 있습니다.

여러 실행 모드를 지원합니다. 기본 모드는 브라우저 없이 HTML, CSS, 폰트, 토큰을 정적으로 분석합니다. Ultra 모드는 Playwright를 사용해 스크롤 스크린샷, hover 및 focus 상태 비교, CSS keyframes, 레이아웃 패턴, DOM 컴포넌트 지문을 수집합니다. Dir 모드는 .css, .scss, .ts, .tsx, .js, .jsx 파일을 스캔해 Tailwind config, CSS 변수, 토큰 패턴을 찾고, repo 모드는 공개 저장소를 clone한 뒤 dir 모드를 실행합니다.

Node.js 18 이상이 필요하며, 모든 분석이 로컬에서 실행되므로 AI 서비스나 API 키는 필요하지 않습니다. Ultra 모드에서는 Playwright와 Chromium도 설치해야 합니다.

핵심 기능

  • 01URL, git 저장소 또는 로컬 디렉터리에서 색상 토큰, 타이포그래피, 간격을 추출합니다.
  • 02Claude Code가 자동으로 불러오는 SKILL.md와 CLAUDE.md 파일을 생성합니다.
  • 03Ultra 모드에서는 Playwright로 스크롤 스크린샷, hover/focus 상태 비교, CSS 애니메이션을 수집합니다.
  • 04토큰 파일을 JSON과 CSS 변수 형식으로 출력하고 Google Fonts도 함께 묶습니다.
  • 05AI 모델이나 API 키 없이 모든 작업을 로컬에서 실행합니다.

활용 사례

  • 기존 사이트의 시각적 스타일을 재현해 새 랜딩 페이지의 출발점으로 삼습니다.
  • 화면 추가를 요청하기 전에 Claude Code에 사내 앱의 디자인 맥락을 제공합니다.
  • 문서화된 스타일 가이드가 없는 코드베이스의 디자인 토큰을 기록합니다.

토픽

#design-system#claude-code#cli#css#design-tokens#playwright#static-analysis

자주 묻는 질문

npxskillui은(는) 무엇인가요?
웹사이트, 저장소 또는 로컬 프로젝트의 디자인 시스템을 추출해 Claude Code가 UI를 만들 때 참고할 파일을 생성하는 CLI입니다. SkillUI는 실제 웹사이트, git 저장소 또는 로컬 코드베이스를 크롤링해 색상 토큰, 타이포그래피 스케일, 간격 그리드, 컴포넌트 등의 디자인 시스템을 추출하는 CLI 도구입니다. 결과는 SKILL.md와 CLAUDE.md가 포함된 폴더로 묶이며, Claude Code가 UI 제작을 요청받았을 때 디자인 맥락을 자동으로 불러올 수 있습니다.
npxskillui은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
npxskillui에는 명시된 라이선스가 없습니다. 코드는 공개되어 있지만 라이선스가 없으면 재사용 허가가 명확하지 않으므로, 사용 전에 작성자에게 문의하는 것이 좋습니다.
npxskillui은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. npxskillui의 마지막 커밋은 2026년 5월 7일입니다.
npxskillui은(는) 어디에 사용할 수 있나요?
기존 사이트의 시각적 스타일을 재현해 새 랜딩 페이지의 출발점으로 삼습니다. 화면 추가를 요청하기 전에 Claude Code에 사내 앱의 디자인 맥락을 제공합니다. 문서화된 스타일 가이드가 없는 코드베이스의 디자인 토큰을 기록합니다.
npxskillui은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/amaancoderx/npxskillui

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트