Skip to main content
Glama
Opti-kjh

Palette MCP

by Opti-kjh
OverviewSchemaSourceRelated ServersScoreDiscussionsAdmin
TypeScript
Remote

Palette MCP

Figma 디자인을 기존 Design System 컴포넌트를 활용하여 React/Vue 코드로 변환하는 MCP(Model Context Protocol) 서버입니다.

Smithery npm version License: MIT

🚀 빠른 시작

Smithery.ai에서 설치 (권장)

  1. Smithery.ai에서 palette-mcp 검색

  2. "Install" 클릭

  3. 환경 변수 입력:

    • 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 발급:

  1. Figma → Settings → Account

  2. 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 참조

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Opti-kjh/palette'

If you have feedback or need assistance with the MCP directory API, please join our Discord server