design-token-mapper
Figma의 시각적 속성을 Tailwind v4 토큰으로 정확히 매핑합니다.
安装与使用
请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。
查看来源 ↗使用指南技能说明
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등)
使用示例
查看来源仓库中的使用示例与配置说明。
查看来源 ↗来源历史
- 收录时间
- 2026-03-11
- 索引更新时间
- 2026-03-11
- Branch
- main
收录与同步日期属于本站记录。源码修改历史请查看来源仓库。
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!