---
name: design-system
description: 디자인 시스템 — 토큰(color/type/spacing)·컴포넌트·일관성 규칙 정의·적용. one-off 지양, 토큰 기반. product-designer·creative-designer·frontend 가 활용.
schema_version: 2
tier: member
team: _skill
category: governance
used_by: ["product-designer", "creative-designer", "frontend"]
dev_capability: false
triggers:
  keyword: ["design system", "디자인 시스템", "토큰", "token", "컴포넌트", "design token", "스타일 가이드", "style guide"]
pm_conventions:
  anti_sycophancy: true
  hard_gate: false
  post_labeling: true
  minimum_approaches: 1
---

# 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 역량)