Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Routes design tasks to designarena.ai's top-ranked model via OpenRouter across 14 categories.
쓰고 있는 AI 앱을 고른 다음 설정을 복사하세요.
검사 2/3 통과 · 내 컴퓨터에서 실행돼요
먼저: 어떤 AI를 쓰시나요?
쓰는 앱을 고르면 아래에 단계가 나옵니다.
제작자 사이트에서 가입하고 다음 단계에 쓸 API 키를 만드세요. 요금과 무료 요금제는 제작자 사이트에서 확인하세요.
키 받는 방법은 아래 제작자 README에 있어요
SettingsDeveloperEdit Config
{
"mcpServers": {
"bench-router": {
"command": "npx",
"args": [
"-y",
"mcp-bench-router"
],
"env": {
"OPENROUTER_API_KEY": "your-value"
}
}
}
}키는 앱 입력란에만 붙여 넣고, 채팅에 붙이거나 다른 사람에게 보내지 마세요
MCP Bench Router을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ Claude가 MCP Bench Router을 쓰고 있다고 하거나 답에 MCP Bench Router 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 Anthropic 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
ChatGPT는 아직 MCP Bench Router에 연결할 수 없어요
MCP Bench Router는 내 컴퓨터에 설치해서 쓰지만 ChatGPT는 웹에서 도는 서버만 연결할 수 있어요
A · MCP Bench Router에 연결되는 앱 쓰기
B · 디자인, 이미지 및 오디오에서 ChatGPT에 연결되는 다른 서버
같은 분류에서 많이 쓰는 것 중 키 없이 주소만으로 연결되는 것을 골랐어요
Claude Code에 연결할 수 있지만 먼저 준비가 필요해요
MCP Bench Router 키가 필요해요 (제작자 사이트에서 만들기) · 먼저 컴퓨터에 Node.js를 설치하세요 (한 번만)
제작자 사이트에서 가입하고 다음 단계에 쓸 API 키를 만드세요. 요금과 무료 요금제는 제작자 사이트에서 확인하세요.
키 받는 방법은 아래 제작자 README에 있어요
Mac: Command+스페이스를 누르고 Terminal 입력 · Windows: PowerShell 열기
claude mcp add --scope user bench-router --env OPENROUTER_API_KEY=your-value -- npx -y mcp-bench-routerEnter 전에 “your-value”를 내 키로 바꾸세요
키는 앱 입력란에만 붙여 넣고, 채팅에 붙이거나 다른 사람에게 보내지 마세요
MCP Bench Router이 목록에 있고 연결됨으로 보이면 돼요
MCP Bench Router을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ Claude Code가 MCP Bench Router을 쓰고 있다고 하거나 답에 MCP Bench Router 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 Anthropic 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
Cursor에 연결할 수 있지만 먼저 준비가 필요해요
MCP Bench Router 키가 필요해요 (제작자 사이트에서 만들기) · 먼저 컴퓨터에 Node.js를 설치하세요 (한 번만)
제작자 사이트에서 가입하고 다음 단계에 쓸 API 키를 만드세요. 요금과 무료 요금제는 제작자 사이트에서 확인하세요.
키 받는 방법은 아래 제작자 README에 있어요
MCP Bench Router 설정에서 OPENROUTER_API_KEY가 비어 있어요. 내 키를 넣고 저장하세요
키는 앱 입력란에만 붙여 넣고, 채팅에 붙이거나 다른 사람에게 보내지 마세요
MCP Bench Router을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ Cursor가 MCP Bench Router을 쓰고 있다고 하거나 답에 MCP Bench Router 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 Cursor 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
VS Code에 연결할 수 있지만 먼저 준비가 필요해요
MCP Bench Router 키가 필요해요 (제작자 사이트에서 만들기) · 먼저 컴퓨터에 Node.js를 설치하세요 (한 번만)
제작자 사이트에서 가입하고 다음 단계에 쓸 API 키를 만드세요. 요금과 무료 요금제는 제작자 사이트에서 확인하세요.
키 받는 방법은 아래 제작자 README에 있어요
MCP Bench Router 설정에서 OPENROUTER_API_KEY가 비어 있어요. 내 키를 넣고 저장하세요
키는 앱 입력란에만 붙여 넣고, 채팅에 붙이거나 다른 사람에게 보내지 마세요
MCP Bench Router을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ VS Code가 MCP Bench Router을 쓰고 있다고 하거나 답에 MCP Bench Router 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 VS Code 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
Windsurf, Zed, Gemini CLI 같은 다른 MCP 앱은 추가 방법이 저마다 달라요. 앱 목록에서 확인하세요
JSON 설정은 아래 “개발자용”에 있어요
Claude Code
claude mcp add --scope user bench-router --env OPENROUTER_API_KEY=your-value -- npx -y mcp-bench-routerClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"bench-router": {
"command": "npx",
"args": [
"-y",
"mcp-bench-router"
],
"env": {
"OPENROUTER_API_KEY": "your-value"
}
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"bench-router": {
"command": "npx",
"args": [
"-y",
"mcp-bench-router"
],
"env": {
"OPENROUTER_API_KEY": "your-value"
}
}
}
}VS Code (mcp.json)
{
"servers": {
"bench-router": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-bench-router"
],
"env": {
"OPENROUTER_API_KEY": "your-value"
}
}
}
}OPENROUTER_API_KEY 비밀 필수 env이 설정은 제작자의 레지스트리 정보로 만들었어요. README와 다르면 README를 따르세요.
이 서버의 연결 방식과 각 앱의 공식 문서를 바탕으로 했어요. 2026년 11월 10일 확인.
내 컴퓨터에서 실행하는 앱
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
내 컴퓨터에서 실행돼요. 설치하면 AI 앱에 도구 목록이 나타나요.
누구나 볼 수 있는 정보를 점검했고, 코드는 읽지 않았어요. 해당하지 않는 항목은 개수에서 뺐어요. · 2026년 11월 12일 점검
레지스트리 이름이 GitHub 계정 K1ta141k 기준으로 확인되었고, 이 계정이 저장소를 소유하고 있어요
코드 마지막 변경: 9개월 전, 6개월 넘게 지났어요
MIT 사용
내 컴퓨터에서 실행되는 서버라 인터넷 엔드포인트가 없어요
내 컴퓨터에서 실행되며, 대신 로컬 설정을 사용해요
내 컴퓨터에서 실행돼요. 도구 목록은 인터넷 엔드포인트가 있는 서버에서만 읽을 수 있어요
질문하고, 팁을 나누고, 안 되는 점을 알려 주세요. "도움이 됨"이 많은 순서예요.
아직 리뷰가 없어요
레지스트리에서 이 카테고리의 활성 서버 전체와 비교했어요. 스타는 게시자가 저장소를 소유한 경우에만 세요.
해당하는 기본 점검 3개 중 2개를 통과했어요. 코드는 읽지 않았어요. 키나 토큰을 넣기 전에 서버가 어떤 권한을 요구하는지 확인하고, 꼭 필요한 권한만 있는 키를 쓰세요.
입력해야 할 값: OPENROUTER_API_KEY
내 컴퓨터에서 실행돼요. AI 앱이 필요할 때 실행하고, 데이터는 제작자의 서버를 거치지 않아요(서버 자체가 온라인 서비스를 호출하는 경우는 제외).
GitHub 저장소는 마지막으로 9개월 전 변경됐고, 최신 버전(1.0.1)은 9개월 전 레지스트리에 올라왔어요.
Claude Desktop, Claude Code, Cursor, VS Code처럼 MCP를 지원하는 앱에서 쓸 수 있어요. 내 컴퓨터에 Node.js도 있어야 해요.
같은 카테고리에는: Figma Context MCP, AutoClip, Next AI Draw.io
같은 카테고리에서 다른 제작자가 만든 서버예요. 스타 순으로 정렬했어요.
카드 보는 법:↓ 주간 다운로드i★ GitHub 스타i세 기둥: 리뷰 · 점검 · 사용 정도i업데이트 = 최신 버전을 레지스트리에 공개한 날i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
제작자의 저장소에서 쓰인 그대로 가져왔어요. PopNx MCP가 검토하거나 보증한 내용이 아니에요. HTML, 이미지, 스크립트는 제거했어요. 링크를 누르면 이 사이트를 벗어나요.
MCP server that delegates design tasks to whichever model currently tops designarena.ai's crowdsourced leaderboard, via OpenRouter.
AI coding assistants produce mediocre frontend/design output. designarena.ai maintains a live leaderboard of the best design models, updated every 2 hours. This MCP server lets Claude (or any MCP client) automatically route design tasks to the current best model.
| Tool | Description |
|---|---|
get_best_design_model | Get the current #1 design model, optionally by category |
get_leaderboard | Browse full rankings with category filter and pagination |
query_design_model | Send a prompt to the best available model via OpenRouter |
query_specific_model | Send a prompt to a specific model via OpenRouter |
query_design_model and query_specific_model)claude mcp add mcp-bench-router -s user -e OPENROUTER_API_KEY=sk-or-... -- npx -y mcp-bench-router
Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):
{
"mcpServers": { "mcp-bench-router": { "command": "npx", "args": ["-y", "mcp-bench-router"], "env": { "OPENROUTER_API_KEY": "sk-or-..." } } } }
Add to .cursor/mcp.json in your project root:
{
"mcpServers": { "mcp-bench-router": { "command": "npx", "args": ["-y", "mcp-bench-router"], "env": { "OPENROUTER_API_KEY": "sk-or-..." } } } }
OPENROUTER_API_KEY=sk-or-... npx -y mcp-bench-router
git clone https://github.com/K1ta141k/mcp-bench-router.git
cd mcp-bench-router npm install npm run build
Filter by design category: allcategories, website, gamedev, 3d, dataviz, uicomponent, image, logo, svg, video, imagetoimage, slides, graphicdesign, tts.
Check who's #1:
"Use get_best_design_model to see the current top design model"
Browse rankings:
"Show me the top 20 design models for websites"
Generate a design:
"Use query_design_model to create a landing page for a SaaS product"
Use a specific model:
"Use query_specific_model with claude-sonnet-4-5 to design a dashboard"
MIT