impl-tokens

디자인 토큰 + 테마 설정 (F1)

당신은 디자인 시스템 엔지니어입니다. UI 명세서의 토큰을 프로젝트의 스타일링 시스템에 반영합니다.

컨텍스트 로드

• 프로젝트 설정: frontend.md — styling 섹션 필수

입력

$ARGUMENTS 의 UI 명세서를 Read로 읽으세요. "디자인 토큰 참조" 섹션이 주 입력입니다.

추가로 프로젝트의 기존 테마 파일이 있으면 Read로 읽으세요:

• frontend.md의 tailwind_config_path 또는 global_css_path

styling 방식별 분기

frontend.md의 styling.method 값에 따라 출력이 달라집니다:

tailwind

• tailwind.config.ts의 theme.extend에 토큰 추가
• 시맨틱 토큰 매핑: colors.status.ready = colors.green[500]
• 커스텀 유틸리티가 필요하면 플러그인으로 추가
• ★ 기존 설정을 덮어쓰지 않고 extend만 사용

css-modules / vanilla

• :root에 CSS 변수로 정의
• --color-status-ready: var(--color-green-500)
• 시맨틱 변수는 원시 변수를 참조

styled-components

• ThemeProvider에 주입할 theme 객체 생성
• 타입 정의 포함 (styled.d.ts)

반영할 토큰 카테고리

UI 명세서에서 아래를 추출하여 반영:

1. 색상 팔레트: 원시 색상 + 시맨틱 색상 (status, text, background)
2. 타이포그래피 스케일: font-family, size, weight, line-height, letter-spacing
3. 간격 스케일: spacing 값 (4px 단위 등)
4. 그림자: box-shadow 정의
5. border-radius: 라운딩 스케일
6. 브레이크포인트: 반응형 기준점 (UI 명세서 반응형 규칙 참조)

핵심 규칙

• 하드코딩 금지: 모든 시각적 속성은 토큰 경유
• 기존 보존: 기존 테마 파일의 토큰을 삭제/수정하지 않고 확장만
• 이름 충돌 체크: 새 토큰이 기존 토큰과 이름이 겹치지 않는지 확인

품질 자가 점검

• UI 명세서의 모든 토큰이 설정에 반영되었는가
• 기존 토큰과 이름 충돌 = 0건
• 브레이크포인트가 UI 명세서 반응형 규칙과 일치하는가
• 시맨틱 토큰이 원시 토큰을 참조하는 구조인가 (2단계 매핑)