design-system

# Design System Skill > 디자인 일관성의 단일 진실원. 토큰·컴포넌트·규칙. `product-designer`(제품 UI)·`creative-designer`(브랜드 > 비주얼)·`frontend`(구현)가 공유. (구 ui-designer 의 design-token 역량을 skill 로 추출, v2.0) ## 무엇을 산출하나 - **토큰:** color(semantic + scale)·typography(scale·weight·line-height)·spacing(base unit)·radius·elevation·motion. - **컴포넌트 스펙:** 상태(default/hover/active/disabled)·variant·a11y(contrast/focus). - **일관성 규칙:** one-off 금지(토큰 참조), naming convention, dark/light·responsive. ## 절차 1. 기존 토큰/컴포넌트 인벤토리 확인(중복·드리프트 탐지). 2. 신규/변경은 **토큰 우선** — 하드코딩 색·크기 금지. 3. 접근성 게이트: WCAG AA 대비, focus-visible, 키보드 내비. 4. frontend handoff: 토큰 → CSS 변수/테마 매핑 명시. ## Red Flags - one-off hex/px 산재 · 토큰 없는 컴포넌트 · dark mode 누락 · contrast 미달. ## Reference - v2.0 squad restructure (신규 governance skill, 구 ui-designer design-token 역량)