token-generator

name	token-generator
description	디자인 토큰을 체계적으로 생성하는 방법론과 도구. '디자인 토큰 만들어줘', '토큰 체계 설계', '색상 스케일 생성', '타이포 스케일', '간격 체계', '다크모드 토큰' 등 디자인 토큰 설계 시 사용한다. 단, Figma 토큰 플러그인 실행, Style Dictionary 런타임 빌드는 이 스킬의 범위가 아니다.

Token Generator — 디자인 토큰 생성 방법론

token-designer 에이전트의 토큰 설계 역량을 강화하는 도메인 지식 스킬.

대상 에이전트

• token-designer — 색상, 타이포, 간격 등 토큰 체계를 설계할 때 이 방법론을 사용한다
• component-developer — 컴포넌트에서 토큰을 참조할 때 네이밍 규칙을 확인한다

토큰 계층 구조 (3-tier)

Global (Primitive) → Alias (Semantic) → Component
────────────────────────────────────────────────
blue-500: #3B82F6   primary: blue-500    button-bg: primary
gray-100: #F3F4F6   surface: gray-100    card-bg: surface

Tier 1: Primitive — {category}-{scale} (예: blue-500)

Tier 2: Semantic — {용도} (예: primary, surface)

Tier 3: Component — {component}-{property}-{variant}-{state}

색상 스케일 생성 알고리즘

입력: 브랜드 색상 1개 → HSL 변환 후 10단계 스케일 생성:

단계	L 조정	S 조정	용도
50	95-97%	S×0.3	배경 틴트
100	90-93%	S×0.5	호버 배경
200	82-87%	S×0.7	보조 배경
300	70-76%	S×0.85	테두리
400	58-64%	S×0.95	보조 텍스트
500	45-55%	S×1.0	기본 (입력값)
600	38-44%	S×1.0	호버
700	30-36%	S×0.95	액티브
800	22-28%	S×0.9	강조 텍스트
900	14-20%	S×0.85	최고 강조
950	8-12%	S×0.8	거의 검정

시맨틱 색상 매핑 표준

시맨틱 토큰	라이트 모드	다크 모드	용도
primary	blue-500	blue-400	주 액션
on-primary	white	white	주 액션 위 텍스트
surface	white	gray-900	기본 배경
surface-raised	white	gray-800	카드/모달
on-surface	gray-900	gray-50	기본 텍스트
on-surface-muted	gray-500	gray-400	보조 텍스트
border	gray-200	gray-700	기본 테두리
success	green-500	green-400	성공
warning	amber-500	amber-400	경고
error	red-500	red-400	오류

타이포그래피 스케일 (Major Third 1.250)

base = 16px (1rem), ratio = 1.250

| 토큰 | px | rem | 용도 |
|------|----|-----|------|
| text-xs | 10.24 | 0.64 | 캡션 |
| text-sm | 12.80 | 0.80 | 보조 텍스트 |
| text-base | 16.00 | 1.00 | 본문 |
| text-lg | 20.00 | 1.25 | 강조 본문 |
| text-xl | 25.00 | 1.563 | 소제목 |
| text-2xl | 31.25 | 1.953 | 제목 |
| text-3xl | 39.06 | 2.441 | 대제목 |
| text-4xl | 48.83 | 3.052 | 히어로 |

줄높이: heading 1.2~1.3, body 1.5~1.7, compact 1.25~1.4
가중치: light(300), regular(400), medium(500), semibold(600), bold(700)

간격 체계 (4px 기반)

토큰	값	rem	용도
space-1	4px	0.25	최소 간격
space-2	8px	0.5	인라인 간격
space-3	12px	0.75	컴팩트 패딩
space-4	16px	1.0	기본 패딩
space-6	24px	1.5	섹션 간격
space-8	32px	2.0	큰 간격
space-12	48px	3.0	레이아웃 간격
space-16	64px	4.0	대형 레이아웃

그림자 체계

토큰	값	용도
shadow-sm	0 1px 3px rgba(0,0,0,0.1)	카드
shadow-md	0 4px 6px rgba(0,0,0,0.1)	드롭다운
shadow-lg	0 10px 15px rgba(0,0,0,0.1)	모달
shadow-xl	0 20px 25px rgba(0,0,0,0.1)	팝오버

모션 토큰

토큰	값	용도
duration-fast	150ms	호버, 토글
duration-normal	250ms	전환
duration-slow	400ms	복잡한 애니메이션
easing-default	cubic-bezier(0.4, 0, 0.2, 1)	기본

출력 포맷

CSS Custom Properties

:root { --color-primary: #3B82F6; --space-4: 1rem; }
[data-theme="dark"] { --color-primary: #60A5FA; }

TypeScript

export const tokens = {
  color: { primary: '#3B82F6' },
  space: { 4: '1rem' },
} as const;

JSON (Style Dictionary)

{ "color": { "primary": { "value": "#3B82F6", "type": "color" } } }