Token Generator

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단계 스케일 생성:

시맨틱 색상 매핑 표준

타이포그래피 스케일 (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 기반)

그림자 체계

모션 토큰

출력 포맷

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