design-token-mapper
Figma의 시각적 속성을 Tailwind v4 토큰으로 정확히 매핑합니다.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
Design Token Mapper
Figma 디자인을 분석할 때 다음 규칙으로 토큰을 매핑하세요.
색상 매핑
Figma → Tailwind 변환 테이블
| Figma 색상 | Tailwind 클래스 | CSS 변수 |
|---|---|---|
| Primary Blue (#1264c4) | bg-primary-500 |
var(--color-primary-500) |
| Orange (#f08a00) | bg-sub-orange |
var(--color-sub-orange) |
| Badge Background | bg-badge-{color}-bg |
var(--color-badge-{color}-bg) |
불확실한 경우
- 가장 가까운 기존 토큰을 찾음
- 없다면 사용자에게 "이 색상(#xxx)에 대한 토큰이 없습니다. 추가가 필요한가요?" 질문
폰트 매핑
| Figma 스타일 | Tailwind 클래스 | 설명 |
|---|---|---|
| 24px/600 | .text-h1 |
헤더 |
| 16px/600 | .text-b2 |
Bold Body |
| 14px/400 | .text-b4 |
Regular Body |
| 12px/400 | .text-c1 |
Caption |
간격 매핑
- Figma Auto Layout의 간격 →
gap-[n](n은 픽셀값) - Padding →
p-[n]또는 토큰 우선 (p-4,p-6등)
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-03-11
- Index updated
- 2026-03-11
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!