p
palatte
@Opti-kjh/palatte
0 Stars
4 次浏览
Opti-kjh
更新于 2026-08-23
MCP 服务配置
复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用
{
"mcpServers": {
"palette": {
"args": [
"-y",
"@anthropic/palette-mcp"
],
"command": "npx",
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN_HERE"
},
"type": "stdio"
}
}
}服务介绍
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", "@anthropic/palette-mcp"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN_HERE"
}
}
}
}
FIGMA_ACCESS_TOKEN |
Figma Personal Access Token | |
GITHUB_TOKEN |
GitHub ( ) | |
FIGMA_MCP_SERVER_URL |
Figma MCP URL (: http://127.0.0.1:3845/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
