Install
npx skills add arvindrk/extract-design-system누구에게 맞나
공개 사이트에서 디자인 토큰을 역추적하고 로컬 프로젝트용 시작 JSON 과 CSS 사용자 속성을 만들 때 이 Skill 을 설치한다. 공식 범위는 colors, typography, spacing, border radius, shadows. AI agent skill（Claude, Cursor, Codex）또는 standalone CLI 로 쓸 수 있다.
starter tokens 를 빨리 받으려는 사람에게 맞고 컴포넌트 라이브러리 한 벌에는 맞지 않다. 본문은 이 세 에이전트와 독립 CLI 를 적는다. 그중 하나만 지원한다고 읽지 마라. 대상 사이트가 공개 접근되지 않거나 프레임워크 설정 변경·앱 자동 수정을 기대하면 이 스킬은 맞지 않다.
페이지: https://github.com/arvindrk/extract-design-system
3분 만에 첫 시도 끝내기
이 설치 명령만 쓴다:
npx skills add arvindrk/extract-design-system
전제 조건: 로컬 프로젝트가 있고 「공개 접근 가능한 한 페이지」에서 토큰을 뽑을 준비가 되어 있다. 공식에 적힌 파일을 쓴다는 점을 받는다. 나타나지 않은 디렉터리는 지정하지 마라.
첫 시도는 범위를 먼저 대조하고 바로 파일을 쓰지 마라. 에이전트에게 확인하라: 어떤 토큰을 뽑는지, 어떤 파일을 만드는지, 하지 않는 일. 성공 신호는 colors / typography / spacing / border radius / shadows 를 말하고 .extract-design-system/raw.json, .extract-design-system/normalized.json, design-system/tokens.json, design-system/tokens.css 를 들며 Public websites only, Single-page extraction workflow, Starter tokens, not a full component library, No framework config patching or automatic app rewrites 를 되말하는 것이다.
확인 후 공식 예로 추출을 요청하라: https://stripe.com and generate starter token files for this project. 성공 신호는 위 네 파일이 나타나고 프레임워크 설정이 바뀌지 않은 것이다. 페이지는 standalone CLI 를 적지만 시작 명령은 없다. 지어내지 마라.
사용 사례
사례 1: 공식 예로 Stripe 를 뽑는다. 원문은 Extract the design system from https://stripe.com and generate starter token files for this project. 파일 쓰기와 외부망 접근이다. 실행 전에 프로젝트 디렉터리를 확인하라. 확인할 수 있는 것은 시작 토큰 파일이며 컴포넌트 세트가 아니다.
사례 2: 다른 공개 단일 페이지로 바꿔도 시작 토큰만 낸다. 공개로 열리는 한 페이지를 넘기고 토큰만 뽑고 앱은 바꾸지 말라고 하라. 성공 신호는 여전히 그 네 공식 파일이며 에이전트가 프레임워크 패치를 거부하는 것이다. 다중 페이지 사이트를 전부 크롤한다고 가정하지 마라. 본문은 single-page.
사용 한계
공개 사이트만 받는다. 비공개·로그인이 필요한 페이지는 범위 밖이다.
한 번에 한 페이지. 산물은 starter tokens 이지 완전한 컴포넌트 라이브러리가 아니다.
framework config patching 도 automatic app rewrites 도 하지 않는다.
출력 경로는 본문을 따른다. 이름을 바꾸거나 적히지 않은 위치에 저장하지 마라.
Claude, Cursor, Codex 와 standalone CLI 는 원문에 있다. 독점 지원으로 쓰지 마라. CLI 시작 방법은 나와 있지 않다. 발명하지 마라. 적히지 않은 선택자, 로그인 상태, 일괄 도메인은 채우지 마라.