| 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" } } }
