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 파일에 다음 추가:
{
"mcpServers": {
"palette": {
"type": "stdio",
"command": "npx",
"args": ["-y", "palette-mcp"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN_HERE",
"GITHUB_TOKEN": "YOUR_GITHUB_TOKEN_HERE"
}
}
}
}
환경 변수
| 변수명 | 필수 | 설명 |
|---|---|---|
FIGMA_ACCESS_TOKEN | ✅ | Figma Personal Access Token |
GITHUB_TOKEN | ✅ | GitHub 토큰 (dealicious-inc 조직 인증 및 디자인 시스템 접근용) |
FIGMA_MCP_SERVER_URL | ❌ | Figma MCP 서버 URL (기본값: http://127.0.0.1:3845/mcp) |
⚠️ 참고:
GITHUB_TOKEN은 dealicious-inc 조직 멤버십 확인에 사용됩니다. 조직 멤버만 Palette MCP를 사용할 수 있습니다.
Figma Access Token 발급:
- Figma → Settings → Account
- Personal Access Tokens → Generate new token
📖 사용법
Cursor에서 사용
Figma에서 디자인을 선택하고 "Copy link to selection"으로 URL을 복사한 후:
https://www.figma.com/design/akI7EwlWemAf8KJup9F2ZS/...?node-id=45733-32370
를 React 코드로 작성해줘
지원하는 명령
| 명령 | 설명 |
|---|---|
convert_figma_to_react | Figma 디자인을 React 컴포넌트로 변환 |
convert_figma_to_vue | Figma 디자인을 Vue 컴포넌트로 변환 |
list_design_system_components | 사용 가능한 디자인 시스템 컴포넌트 목록 |
analyze_figma_file | 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 |
🔧 로컬 개발
설치
git clone https://github.com/Opti-kjh/palette.git
cd palette
yarn install
환경 설정
cp .env.example .env
# .env 파일에 FIGMA_ACCESS_TOKEN 추가
빌드 및 실행
# 빌드
yarn build
# 개발 모드
yarn dev
# MCP 서버 실행
yarn mcp
테스트
# MCP Inspector로 테스트
npx @anthropic-ai/mcp-inspector ./dist/index.js
📁 프로젝트 구조
src/
├── index.ts # MCP 서버 메인 파일
├── services/
│ ├── figma.ts # Figma API 연동
│ ├── design-system.ts # 디자인 시스템 메타데이터
│ └── code-generator.ts # React/Vue 코드 생성
└── utils/
├── figma-mcp-client.ts # Figma MCP 클라이언트
└── request-manager.ts # 요청 관리
⚠️ 중요: 디자인 시스템 사용 원칙
이 MCP 서버는 항상 디자인 시스템 컴포넌트를 사용합니다.
- ❌ Tailwind CSS 사용 금지
- ❌ 일반 HTML/CSS 사용 금지
- ✅ 디자인 시스템 컴포넌트만 사용
🤝 기여
이슈 및 PR은 GitHub에서 환영합니다.
📄 라이선스
MIT License - LICENSE 참조