S
SkillNav

palette

内容与创意

by Opti-kjh

基于现有 Design System 组件，将 Figma 设计转换为 React/Vue 代码的 MCP 服务器，供 Delicious 前端团队专用。

1GitHub

什么是 palette？

基于现有 Design System 组件，将 Figma 设计转换为 React/Vue 代码的 MCP 服务器，供 Delicious 前端团队专用。

README

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 파일에 다음 추가:

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을 복사한 후:

code
https://www.figma.com/design/akI7EwlWemAf8KJup9F2ZS/...?node-id=45733-32370
를 React 코드로 작성해줘

지원하는 명령

명령설명
convert_figma_to_reactFigma 디자인을 React 컴포넌트로 변환
convert_figma_to_vueFigma 디자인을 Vue 컴포넌트로 변환
list_design_system_components사용 가능한 디자인 시스템 컴포넌트 목록
analyze_figma_fileFigma 파일 구조 분석

🎨 지원하는 Design System 컴포넌트

React Components (@dealicious/design-system-react)

카테고리컴포넌트
ActionsButton, TextLink
FormsInput, Check, Radio, Switch, Dropdown, TextField
Data DisplayText, Tag, Chip, Badge, LabeledText
FeedbackToast, Notice, Error, LoadingSpinner, Tooltip
NavigationTab, Pagination, ArrowPagination, Accordion
OverlaysLayerPopup, LayerAlert

Vue Components (@dealicious/design-system)

카테고리컴포넌트
ActionsSsmButton, SsmTextLink
FormsSsmInput, SsmCheck, SsmSwitch, SsmDropdown
Data DisplaySsmText, SsmTag, SsmChip, SsmBadge
NavigationSsmTab, SsmPagination, SsmAccordion

🔧 로컬 개발

설치

bash
git clone https://github.com/Opti-kjh/palette.git
cd palette
yarn install

환경 설정

bash
cp .env.example .env
# .env 파일에 FIGMA_ACCESS_TOKEN 추가

빌드 및 실행

bash
# 빌드
yarn build

# 개발 모드
yarn dev

# MCP 서버 실행
yarn mcp

테스트

bash
# MCP Inspector로 테스트
npx @anthropic-ai/mcp-inspector ./dist/index.js

📁 프로젝트 구조

code
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 참조

常见问题

palette 是什么？

基于现有 Design System 组件，将 Figma 设计转换为 React/Vue 代码的 MCP 服务器，供 Delicious 前端团队专用。

相关 Skills

文档共著

by anthropics

Universal
热门

围绕文档、提案、技术规格、决策记录等写作任务，按上下文收集、结构迭代、读者测试三步协作共创，减少信息遗漏，写出更清晰、经得起他人阅读的内容。

✎ 写文档、方案或技术规格时容易思路散、信息漏，它用结构化共著流程帮你高效传递上下文、反复打磨内容，还能从读者视角做验证。

内容与创意
未扫描151.3k

内部沟通

by anthropics

Universal
热门

按公司常用模板和语气快速起草内部沟通内容，覆盖 3P 更新、状态报告、领导汇报、项目进展、事故复盘、FAQ 与 newsletter，适合需要统一格式的团队沟通场景。

✎ 按公司偏好的模板快速产出状态汇报、领导更新和 FAQ，既省去反复改稿，也让内部沟通更统一、更专业。

内容与创意
未扫描151.3k

平面设计

by anthropics

Universal
热门

先生成视觉哲学，再落地成原创海报、艺术画面或其他静态设计，输出 .png/.pdf，强调构图、色彩与空间表达，适合需要高完成度视觉成品的场景。

✎ 做海报、插画或静态视觉稿时，用它能快速产出兼顾美感与版式的PNG/PDF成品，原创设计更省心，也更适合规避版权风险。

内容与创意
未扫描151.3k

相关 MCP Server

Crypto News Aggregator

by nirholas

免费的加密新闻聚合 MCP，汇集 Bitcoin、Ethereum、DeFi、Solana 与 altcoins 资讯源。

内容与创意
237

io.github.alisaitteke/photoshop-mcp

by alisaitteke

热门

用于Adobe Photoshop自动化的MCP server，让AI assistants直接控制Photoshop。

内容与创意
105

MediaWiki

by ProfessionalWiki

让 Large Language Model 客户端无缝连接任意 MediaWiki 站点，可创建、更新、搜索页面，并通过 OAuth 2.0 安全管理内容。

内容与创意16 个工具
96

评论