Converts Figma designs to React/Vue code using existing design system components, with capabilities to analyze Figma file structures and retrieve design specifications through the Figma API.
Provides optional access to design system packages hosted on GitHub for component conversion and code generation.
Palette MCP
Figma 디자인을 기존 Design System 컴포넌트를 활용하여 React/Vue 코드로 변환하는 MCP(Model Context Protocol) 서버입니다.
🚀 빠른 시작
Smithery.ai에서 설치 (권장)
Smithery.ai에서
palette-mcp검색"Install" 클릭
환경 변수 입력:
FIGMA_ACCESS_TOKEN: Figma API 토큰 (필수)GITHUB_TOKEN: GitHub 토큰 (선택, 디자인 시스템 접근용)
Cursor에서 수동 설치
~/.cursor/mcp.json 파일에 다음 추가:
환경 변수
변수명 | 필수 | 설명 |
| ✅ | Figma Personal Access Token |
| ❌ | GitHub 토큰 (디자인 시스템 패키지 접근용) |
| ❌ | Figma MCP 서버 URL (기본값: ) |
Figma Access Token 발급:
Figma → Settings → Account
Personal Access Tokens → Generate new token
📖 사용법
Cursor에서 사용
Figma에서 디자인을 선택하고 "Copy link to selection"으로 URL을 복사한 후:
지원하는 명령
명령 | 설명 |
| Figma 디자인을 React 컴포넌트로 변환 |
| Figma 디자인을 Vue 컴포넌트로 변환 |
| 사용 가능한 디자인 시스템 컴포넌트 목록 |
| Figma 파일 구조 분석 |
🎨 지원하는 Design System 컴포넌트
React Components (@dealicious/design-system-react)
카테고리 | 컴포넌트 |
Actions | Button, TextLink |
Forms | Input, Check, Radio, Switch, Dropdown, TextField |
Data Display | Text, Tag, Chip, Badge, LabeledText |
Feedback | Toast, Notice, Error, LoadingSpinner, Tooltip |
Navigation | Tab, Pagination, ArrowPagination, Accordion |
Overlays | LayerPopup, LayerAlert |
Vue Components (@dealicious/design-system)
카테고리 | 컴포넌트 |
Actions | SsmButton, SsmTextLink |
Forms | SsmInput, SsmCheck, SsmSwitch, SsmDropdown |
Data Display | SsmText, SsmTag, SsmChip, SsmBadge |
Navigation | SsmTab, SsmPagination, SsmAccordion |
🔧 로컬 개발
설치
환경 설정
빌드 및 실행
테스트
📁 프로젝트 구조
⚠️ 중요: 디자인 시스템 사용 원칙
이 MCP 서버는 항상 디자인 시스템 컴포넌트를 사용합니다.
❌ Tailwind CSS 사용 금지
❌ 일반 HTML/CSS 사용 금지
✅ 디자인 시스템 컴포넌트만 사용
🤝 기여
이슈 및 PR은 GitHub에서 환영합니다.
📄 라이선스
MIT License - LICENSE 참조