# Palette MCP Server - 서비스 개요
## 목적
Palette는 **Figma 디자인을 자동으로 React/Vue 컴포넌트 코드로 변환**하는 MCP(Model Context Protocol) 서버입니다.
### 핵심 목표
1. **디자인-개발 간극 해소**: Figma에서 디자인된 UI를 개발자가 수동으로 코드로 변환하는 시간과 노력을 절감
2. **디자인 시스템 일관성 보장**: 생성되는 모든 코드가 `@dealicious/design-system-react` 및 `@dealicious/design-system` 컴포넌트를 사용하도록 강제
3. **AI 도구 통합**: Cursor, Claude Desktop 등 AI 코딩 도구에서 MCP 프로토콜을 통해 직접 사용 가능
---
## 주요 기능
### 1. Figma to React 변환
Figma 디자인 URL을 입력하면 디자인 시스템 컴포넌트를 활용한 React TSX 코드를 생성합니다.
```
입력: https://www.figma.com/design/xxxxx?node-id=45733-32370
출력: ProductCard.tsx (디자인 시스템 컴포넌트 사용)
```
### 2. Figma to Vue 변환
동일한 방식으로 Vue 3 Single File Component(SFC)를 생성합니다.
### 3. 디자인 시스템 컴포넌트 조회
사용 가능한 모든 디자인 시스템 컴포넌트와 props 정보를 조회할 수 있습니다.
### 4. Figma 파일 분석
변환 전 Figma 파일의 구조(페이지, 프레임, 컴포넌트 계층)를 분석하여 파악할 수 있습니다.
---
## 지원 컴포넌트
### React (`@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 (`@dealicious/design-system`)
| 카테고리 | 컴포넌트 |
|----------|----------|
| Actions | SsmButton, SsmTextLink |
| Forms | SsmInput, SsmCheck, SsmSwitch, SsmDropdown |
| Data Display | SsmText, SsmTag, SsmChip, SsmBadge |
| Navigation | SsmTab, SsmPagination, SsmAccordion |
| Overlays | SsmLayerModal, SsmLayerAlert |
---
## 핵심 원칙
### 디자인 시스템 강제 사용
Palette는 **항상 디자인 시스템 컴포넌트만 사용**합니다.
| ✅ 허용 (필수 사용) | ❌ 금지 (절대 사용 금지) |
|------|------|
| `@dealicious/design-system-react` 컴포넌트 | Tailwind CSS |
| `@dealicious/design-system` 컴포넌트 | 일반 HTML/CSS |
| 디자인 시스템 스타일 가이드 | MUI, Ant Design, Chakra UI 등 **모든 외부 UI 라이브러리** |
> ⚠️ **중요**: 외부 디자인 시스템(MUI, Ant Design, Chakra UI 등)은 **어떤 상황에서도 사용하면 안 됩니다**. 반드시 `@dealicious/design-system` 컴포넌트만 사용해야 합니다.
---
## 기술 스택
| 항목 | 기술 |
|------|------|
| Runtime | Node.js 18+ |
| Language | TypeScript |
| Protocol | MCP (Model Context Protocol) |
| Package Manager | Yarn |
| 주요 라이브러리 | `@modelcontextprotocol/sdk`, `axios`, `@octokit/rest` |
---
## 배포 현황
| 플랫폼 | 상태 | 링크 |
|--------|------|------|
| npm | 배포됨 | `@anthropic/palette-mcp` |
| Smithery.ai | 배포됨 | [Smithery](https://smithery.ai) 에서 `palette-mcp` 검색 |
| GitHub | 공개 | [Opti-kjh/palette](https://github.com/Opti-kjh/palette) |
