SkillUI, AI·API 키 없이 사이트 디자인 시스템 복제

Claude Code는 탄탄한 마크업을 작성하지만, 매번 비슷한 화면을 다시 만드는 경향이 있다. SkillUI는 실제 운영 중인 사이트에서 추출한 브랜드를 모델이 그대로 참고하게 해 이 문제를 겨냥한다. 이 과정에는 AI가 전혀 끼지 않는다.

SkillUI가 사이트에서 가져오는 것과 ZIP에 들어 있는 것

SkillUI는 라이브 사이트, GitHub 저장소, 로컬 디렉터리를 입력받아 색상, 타이포그래피, 간격, 애니메이션, 컴포넌트 같은 디자인 시스템을 추출하는 CLI다. 모든 과정은 순수 정적 분석으로 이뤄지며, AI 호출도 API 키도 필요 없다 . v1.3.4 버전(repo amaancoderx/npxskillui, MIT, 100% TypeScript, 2026년 5월 기준 약 992개 스타)은 세 가지 캡처 모드를 제공한다 .

결과물은 .skill ZIP으로 생성된다. 안에는 SKILL.md, CLAUDE.md, DESIGN.md 토큰 파일, references/ 폴더(ANIMATIONS.md, LAYOUT.md, COMPONENTS.md, INTERACTIONS.md, VISUAL_GUIDE.md), JSON 토큰, 스크린샷, 번들된 Google Fonts가 포함된다 . 선택 사항인 Ultra 모드는 Playwright 스크린샷 캡처, 애니메이션 감지, 상호작용 상태 diff를 추가해 순수 CSS 파싱만으로는 놓치기 쉬운 모션과 hover 동작까지 드러낸다 .

SkillUI가 해결하려는 문제는 Anthropic이 "분포 수렴(distributional convergence)"이라고 부르는 현상이다. 별다른 지시 없이 UI를 만들라고 하면 모델은 학습 데이터의 통계적 중심을 샘플링하고, Inter 폰트, 보라색-파란색 그라디언트, 카드 안의 카드 레이아웃, 모든 제목 위에 놓이는 둥근 사각형 아이콘 타일 같은 익숙한 흔적을 반복한다 . SkillUI는 Claude가 기본 분포 대신 캡처된 참조 분포를 보게 함으로써, 생성 시점의 취향 스킬만으로는 부족한 기존 브랜드 맞춤 작업을 보완한다.

최소 조건: JS 런타임 18+와 npm

SkillUI의 유일한 필수 조건은 npm과 함께 설치된 Node.js 18+이며, npm install -g skillui로 전역 설치한다 . --url과 --dir 캡처 경로에는 다른 전역 의존성이 필요 없다. URL 모드는 사이트의 HTML과 연결된 CSS를 크롤링하고, dir 모드는 .css/.scss/.ts/.tsx 파일과 Tailwind 설정, CSS 변수를 스캔한다 . Ultra 모드는 첫 실행 때 자체 Playwright 브라우저를 준비해 스크린샷 캡처와 애니메이션 감지를 수행하므로 브라우저를 수동 설치할 필요가 없다 . --repo 모드에서는 SkillUI가 디렉터리 분석을 실행하기 전에 저장소를 클론할 수 있도록 git이 PATH에 있어야 한다. 공개 저장소에는 액세스 토큰이 필요 없다.

SkillUI로 브랜드의 색상과 타이포그래피 복제하기

브랜드의 시각 시스템을 복제하는 과정은 네 단계 CLI 흐름으로 끝난다. SkillUI를 전역 설치하고, 대상을 지정하고, 필요하면 스크린샷 캡처를 추가한 뒤, 생성된 SKILL.md를 Claude Code가 읽을 수 있는 위치에 두면 된다. 이 도구는 모델 호출 없이 순수 정적 분석으로 실행되므로 전체 추출을 오프라인에서 완료할 수 있다. 먼저 한 번만 전역 설치한다:

npm install -g skillui

CLI가 PATH에 잡히면 원하는 라이브 사이트를 가리키면 된다. SkillUI는 페이지와 연결된 CSS를 크롤링하고 색상, 타이포그래피, 간격, 컴포넌트를 추출한 다음 현재 디렉터리에 .skill ZIP을 쓴다 :

skillui --url https://target-site.com

가지고 있는 소스에 맞춰 플래그만 바꾸면 된다. 로컬 코드베이스를 스캔하려면 --dir ./local-project를, 공개 저장소를 클론해 같은 디렉터리 분석을 실행하려면 --repo owner/reponame을 사용한다 . 정적 파싱만으로 모션을 놓칠 때는 --ultra 플래그를 추가한다. Ultra 모드는 기본 파싱 위에 Playwright를 준비해 스크린샷을 캡처하고, 애니메이션을 감지하며, 상호작용 상태를 비교한다 .

skillui --url https://target-site.com --ultra

마지막으로 번들의 압축을 풀고 SKILL.md를 Claude Code가 스킬을 찾는 위치에 둔다. 저장소와 공유하려면 프로젝트 범위인 .claude/skills/<name>/SKILL.md를 쓰고, 내 컴퓨터의 모든 프로젝트에서 쓰려면 개인 범위인 ~/.claude/skills/<name>/SKILL.md를 사용한다 . Claude는 모든 컨텍스트에서 이름과 설명으로 이뤄진 약 100토큰 분량의 YAML frontmatter만 미리 로드하고, 작업이 일치할 때만 본문 전체를 불러온다. Anthropic은 이 방식을 progressive disclosure라고 부른다 .

"No AI. No API keys." — SkillUI 프로젝트가 내세운 설계 제약 (source: amaancoderx/npxskillui). 즉, 추출은 모델의 추측이 아니라 결정적이고 재현 가능한 과정이라는 뜻이다.

배치한 뒤에는 /name으로 스킬을 직접 호출하면 된다. Anthropic이 2025년 12월 이 형식을 오픈 표준으로 공개했기 때문에, 같은 SKILL.md는 Codex CLI, Cursor, Gemini CLI에서도 수정 없이 실행된다 .

신뢰할 수 없는 번들은 도착 즉시 실행됩니다 — 넘기기 전에 검증하세요

.skill 번들은 단순한 문서가 아니라 실행 가능한 패키지입니다. SKILL.md 폴더에는 Claude가 로드 시 실행하는 보조 파일과 스크립트가 함께 들어갈 수 있으므로, 서드파티 ZIP은 공격 표면이 됩니다. 다운로드한 어떤 skill이든 .claude/skills/ 아래에 놓이는 순간 실행되는 악성 코드를 숨길 수 있습니다 . 직접 생성하지 않은 것을 설치하기 전에는 압축을 풀고 모든 파일을 읽으세요 — SKILL.md, CLAUDE.md, DESIGN.md, 특히 references/ 폴더와 번들 스크립트까지 확인해야 합니다 . 결정론적인 경로를 우선하세요. SkillUI는 "No AI. No API keys." 방식으로 추출하므로, 아는 사이트에서 직접 생성한 번들은 낯선 사람이 제공한 것보다 재현 가능하고 검사하기 쉽습니다.

두 번째 한계도 이해해야 합니다. SkillUI는 생성 시점의 가이드이지, 지속되는 메모리가 아닙니다. 추출된 브랜드 레퍼런스는 skill이 로드되어 있는 동안에만 출력에 영향을 주며, 중단 지점 이후나 이후 세션까지 강제력을 이어가지 않습니다. 실무자 정리 글들도 취향 skill에는 화면 간 메모리가 없다고 주의합니다 . 공통된 결론은 레이어를 쌓는 것입니다. 실제 레퍼런스로 기준을 잡고(SkillUI), Impeccable의 결정론적 탐지 규칙 45개로 취향을 강제하며 , Playwright로 시각 검증을 수행합니다. 단 하나의 SKILL.md가 보증이 되지는 않습니다.

SkillUI를 Impeccable 및 Playwright와 함께 쓰는 법

SkillUI가 실제 레퍼런스로 Claude의 기준을 잡아준 뒤에도, 단일 번들이 남기는 빈틈은 두 가지 skill로 메울 수 있습니다. 취향 강제와 시각 검증입니다. 추출된 SKILL.md 위에 Impeccable(Paul Bakaus 제작, v3.9.1)을 얹고 /impeccable critique와 /impeccable audit를 실행해 AI 디자인 특유의 흔적을 잡아내세요. 이 도구는 23개 명령과 45개의 결정론적 탐지 규칙을 제공하며, 종료 코드를 CI나 PR 체크에 연결할 수 있습니다. 설치는 npx impeccable install로 하며, 하네스를 자동 감지합니다.

"1 skill, 23 commands, live browser iteration, and 45 deterministic detector rules," — Impeccable을 설명한 Paul Bakaus의 말 (source: pbakaus/impeccable README).

복제할 기존 브랜드가 없다면 대신 UI/UX Pro Max(v2.10.2, 2026년 7월 6일 마지막 업데이트, 별 102,000개 이상)를 사용하세요. 이 도구는 제품 유형을 67가지 UI 스타일, 161가지 팔레트, 57가지 Google Font 조합에 매핑합니다.

마지막으로 검증하세요. Playwright CLI skill은 npm install -g @playwright/cli@latest 후 playwright-cli install --skills로 설치하며, screenshot, --hires, resize, 그리고 라이브 페이지 위에 박스를 그리면 모델이 주석이 달린 스크린샷과 사용자의 메모를 함께 받는 show --annotate 모드를 제공합니다. 이렇게 하면 사람이 결과물을 보기 전에 비교와 개선 루프를 닫을 수 있습니다. 핵심은 이것입니다. SkillUI는 기준을 잡고, Impeccable은 강제하며, Playwright는 확인합니다 — 셋을 대체재가 아니라 스택으로 실행하세요.

자주 묻는 질문

SkillUI에 API 키나 AI 모델이 필요한가요?

아니요. SkillUI는 순수 정적 분석으로 동작합니다. HTML, CSS, JS, 설정 파일을 로컬에서 파싱하며 "No AI. No API keys."라고 안내합니다 . 외부 서비스로 전송되는 것은 없고, 추출 단계에 LLM도 관여하지 않습니다. 모델은 나중에 Claude가 생성된 번들을 읽을 때에만 등장합니다.

SkillUI가 만드는 .skill ZIP 안에는 무엇이 들어 있나요?

ZIP에는 SKILL.md, CLAUDE.md, DESIGN.md 토큰 파일, references/ 폴더(ANIMATIONS.md, LAYOUT.md, COMPONENTS.md, INTERACTIONS.md, VISUAL_GUIDE.md), JSON 토큰, 번들된 Google Fonts가 들어 있습니다 . 스크린샷은 Ultra 모드를 실행할 때만 추가되며, Playwright를 통해 렌더링된 결과를 캡처합니다.

Claude Code 프로젝트에서 SKILL.md 파일은 정확히 어디에 두나요?

프로젝트 범위라면 .claude/skills/<name>/SKILL.md에, 개인 범위라면 ~/.claude/skills/<name>/SKILL.md에 두고 /name으로 호출하세요. 공식 Claude Code 문서도 엔터프라이즈 및 플러그인 위치를 지원하며, skills를 보조 파일과 스크립트를 번들할 수 있는 일급 확장으로 취급합니다 .

같은 SKILL.md를 Cursor나 Codex CLI에서도 사용할 수 있나요?

예. Anthropic은 2025년 12월 18일 SKILL.md 형식을 공개 표준으로 발표했습니다 . 이 사양은 도구 간 호환되므로 같은 파일이 Claude Code, Codex CLI, Cursor, Gemini CLI, GitHub Copilot에서 수정 없이 실행됩니다. 그래서 SkillUI의 레퍼런스 번들을 편집 없이 여러 하네스 사이에서 옮길 수 있습니다.

Ultra 모드는 어떤 URL에 실행해도 안전한가요?

Ultra는 사용자가 제공한 URL에 Playwright 브라우저를 실행해 스크린샷, 애니메이션, 상호작용 상태를 캡처합니다 . 공개 주소에서는 안전하지만, 대상 사이트의 속도 제한과 서비스 약관을 지켜야 합니다. 인증 뒤에 있는 URL은 자격 증명을 명시적으로 전달해야 합니다. Ultra가 자체적으로 로그인을 우회하지는 않습니다.

이 글이 도움이 되셨다면, 새 글이 올라올 때마다 이메일로 받아보세요.

구독하기