Agent skill · design visual · aiskillstore
init-design
기존 프로젝트 코드베이스에서 디자인 시스템을 역추출해 docs/design/ Ground Truth 파일(DESIGN-TOKENS.md·UX-BRIEF.md)을 생성한다. UI 프리비전이나 리디자인 파이프라인을 거치지 않고 개발된 프로젝트에서 디자인 기준 파일을 수립할 때 사용. '/init-design', '디자인 역추출', '디자인 토큰 추출', 'DESIGN-TOKENS 만들어줘', 'UX-BRIEF 생성해줘', '디자인 기준 파일 없어', 'Ground Truth 만들어줘', '디자인 파일 없는데 만들어줘' 등 언급 시 호출.
Why this skill is useful
Adds a comprehensive pipeline for extracting and generating design tokens from existing codebases, which the AI cannot infer from general knowledge.
What it needs
Requires node installed locally. About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
INIT-DESIGN — 디자인 시스템 역추출 파이프라인 $ARGUMENTS 에 대해 아래 파이프라인을 실행한다. 존재 이유: 이미 개발된 프로젝트에서 기존 코드를 Ground Truth로 확정하고 docs/design/ 기준 파일을 역추출로 생성하는 전용 스킬이다. 디자인 토큰이 코드 곳곳에 흩어져 있어 문서화된 단일 기준이 없는 프로젝트에서, 이후 UI 작업의 최우선 참조 기준을 수립한다. 리디자인과의 경계 이 스킬은 기존 디자인을 문서화할 뿐, 교체하지 않는다. 디자인 교체(리디자인) /init-design --- --- --- 목적 디자인 교체 현재 디자인 문서화 코드 변경 스타일 전면 교체 기본 없음 (--deep 시 한정적) 기준 타겟 새 디자인 기존 코드 그대로 출력 새 DESIGN-TOKENS.md 역추출 DESIGN-TOKENS.md --- Phase 0: PARSE — 인자 파싱 인자 기본값 설명 --- --- --- 대상 경로 src/ 스캔할 소스 루트 --deep OFF 하드코딩 교체 + 유틸 클래스 추출 + 컴포넌트 정리 --dry-run OFF GENERATE 직전까지만 — 토큰 미리보기 출력, 파일 생성 없음 --skip-ux-brief OFF UX-BRIEF.md 생성 생략 --- Phase 1: SCAN — 현재 디자인 자산 스캔 1-1. 사전 확인 docs/design/ 존재 여부를 Glob으로 확인한다: 상황 동작 --- --- docs/design/DESIGN-TOKENS.md 없음 정상 진행 docs/design/DESIGN-TOKENS.md 존재 사용자에게 경고: "이미 파일이 존재합니다. 덮어쓰면 기존 파일은 archive로 이동됩니다. 계속할까요?" → 승인 시 계속, 거절 시 종료 1-2. 디자인 자산 병렬 수집 아래를 병렬로 Read·Glob한다: 수집 대상 경로 패턴 추출 내용 --- --- --- CSS 전역 파일 /globals.css, /index.css, /.module.css CSS 커스텀 프로퍼티 (:root, [data-theme]) Tailwind 설정 tailwind.config. theme.extend. 값 전체 레이아웃 컴포넌트 /layout/, /Header., /Footer., /Sidebar. 레이아웃 구조·영역 분류 페이지 파일 /page.tsx, /page.jsx, /page.vue 라우트 목록 (화면 맵용) 프로젝트 문서 프로젝트 루트 (CLAUDE.md, README.md, package.json) 기술 스택, 구조 원칙 1-3. 인벤토리 요약 출력 --- Phase 2: EXTRACT — 토큰 추출 스캔 결과에서 아래 6개 카테고리로 토큰을 추출한다. 2-1. 추출 소스 우선순위 우선순위 소스 신뢰도 --- --- --- 1 CSS :root / [data-theme] 커스텀 프로퍼티 높음 — 이미 토큰화된 값 2 Tailwind theme.extend. 높음 — 구조적 확장 3 globals.css 커스텀 유틸 클래스 (.btn, .sv-label 등) 중간 — 프로젝트 전용 클래스 4 컴포넌트 className 반복 패턴 중간 — 암묵적 토큰 5 style={{...}} 인라인 하드코딩 낮음 — 정규화 필요 2-2. 추출 카테고리 Color: 배경(bg), 전경(fg), 강조(accent), 테두리(border), 음소거(muted), 코드 배경 등. 다크/라이트 모드 분리. Typography: 폰트 패밀리(display/body/mono), 사이즈 스케일, 웨이트, 줄 간격. Spacing: 마진·패딩·간격 값. 4px 기반 스케일 식별. Border Radius / Shadow: 둥글기 값, 그림자 레이어. Motion / Animation: 트랜지션 duration·easing, @keyframes. 커스텀 유틸 클래스: 프로젝트 전용 클래스 (예: .sv-label, .h-1, .btn-primary, .metallic). 역할과 적용 컨텍스트를 함께 기록. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/init-design