Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Charts and dashboards as images for AI agents. No browser, same data same bytes. Local and free.
쓰고 있는 AI 앱을 고른 다음 설정을 복사하세요.
검사 5/5 통과 · 내가 묻는 내용은 제작자 서버(mcp.slickfast.com)를 거쳐요 · ✓ 명령 확인 2026년 11월 13일
먼저: 어떤 AI를 쓰시나요?
쓰는 앱을 고르면 아래에 단계가 나옵니다.
Claude에 연결할 수 있어요 · 약 2분
키 필요 없음, 설치 필요 없음 · claude.ai나 데스크톱 앱에서 한 번 설정하면 채팅에서 쓸 수 있어요 · 무료 계정은 1개까지 · Team/Enterprise는 소유자(Owner)가 추가
CustomizeConnectors
여기서 복사해 Claude의 같은 이름 칸에 붙여 넣고 Continue를 누르세요
Slickfast MCPhttps://mcp.slickfast.com/mcpClaude가 찾은 로그인 설정 화면에서 Continue를 누르고 · Authentication은 제작자 안내대로(Sign in now, Sign in when needed, No sign in) 고른 뒤 Add를 누르세요
+ConnectorsSlickfast MCP
Slickfast MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ Claude가 Slickfast MCP을 쓰고 있다고 하거나 답에 Slickfast MCP 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 Anthropic 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
ChatGPT 연결은 요금제에 따라 달라요
전체 MCP: 웹 ChatGPT Business, Enterprise, Edu · Pro: 읽기/가져오기 권한으로 연결, 데이터를 바꾸는 도구는 안 될 수 있어요 · Plus: 공식 문서 미확인, 플러그인 화면에 사용자 지정 MCP 추가 항목이 보이면 시도해 볼 수 있어요 · 웹만
Plugins+Add custom MCP server
이름을 넣고 Connection에 주소를 붙여 넣은 뒤 경고에 체크하고 Create as a plugin을 누르세요
Slickfast MCPhttps://mcp.slickfast.com/mcp새 채팅을 열고 입력 전에 플러그인 목록에서 Slickfast MCP을 고르세요
Slickfast MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ ChatGPT가 Slickfast MCP을 쓰고 있다고 하거나 답에 Slickfast MCP 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 OpenAI 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
Claude Code에 연결할 수 있어요 · 약 2분
키 필요 없음, 설치 필요 없음
Mac: Command+스페이스를 누르고 Terminal 입력 · Windows: PowerShell 열기
claude mcp add --transport http --scope user slickfast https://mcp.slickfast.com/mcpSlickfast MCP이 목록에 있고 연결됨으로 보이면 돼요
Slickfast MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ Claude Code가 Slickfast MCP을 쓰고 있다고 하거나 답에 Slickfast MCP 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 Anthropic 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
Cursor에 연결할 수 있어요 · 약 2분
키 필요 없음, 설치 필요 없음
Slickfast MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ Cursor가 Slickfast MCP을 쓰고 있다고 하거나 답에 Slickfast MCP 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 Cursor 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
VS Code에 연결할 수 있어요 · 약 2분
키 필요 없음, 설치 필요 없음
Slickfast MCP을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ VS Code가 Slickfast MCP을 쓰고 있다고 하거나 답에 Slickfast MCP 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 VS Code 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
Windsurf, Zed, Gemini CLI 같은 다른 MCP 앱은 추가 방법이 저마다 달라요. 앱 목록에서 확인하세요
웹으로 연결하는 앱용 주소
https://mcp.slickfast.com/mcpJSON 설정은 아래 “개발자용”에 있어요
Claude Code
claude mcp add --transport http --scope user slickfast https://mcp.slickfast.com/mcpCursor (~/.cursor/mcp.json)
{
"mcpServers": {
"slickfast": {
"url": "https://mcp.slickfast.com/mcp"
}
}
}VS Code (mcp.json)
{
"servers": {
"slickfast": {
"type": "http",
"url": "https://mcp.slickfast.com/mcp"
}
}
}Claude Code
claude mcp add --scope user slickfast -- npx -y @slickfast/mcpClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"slickfast": {
"command": "npx",
"args": [
"-y",
"@slickfast/mcp"
]
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"slickfast": {
"command": "npx",
"args": [
"-y",
"@slickfast/mcp"
]
}
}
}VS Code (mcp.json)
{
"servers": {
"slickfast": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@slickfast/mcp"
]
}
}
}이 설정은 제작자의 레지스트리 정보로 만들었어요. README와 다르면 README를 따르세요.
npm: @slickfast/mcp이 서버의 연결 방식과 각 앱의 공식 문서를 바탕으로 했어요. 2026년 11월 10일 확인.
인터넷으로 연결하는 앱
ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
내 컴퓨터에서 실행하는 앱
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
서버가 도구 목록을 보여 주기 전에 로그인을 요구해요.
누구나 볼 수 있는 정보를 점검했고, 코드는 읽지 않았어요. 해당하지 않는 항목은 개수에서 뺐어요. · 2026년 11월 15일 점검
레지스트리 이름이 도메인 slickfast.com 기준으로 확인되었어요(레지스트리가 도메인 소유를 확인해요)
코드 마지막 변경: 5일 전
AGPL-3.0 사용
293ms 만에 응답(HTTP 401)
OAuth 로그인을 지원한다고 밝혀서, AI 앱이 로그인 화면으로 안내해 줘요
아직 점검하지 않았어요. 엔드포인트를 점검할 때 도구 목록을 읽어요
질문하고, 팁을 나누고, 안 되는 점을 알려 주세요. "도움이 됨"이 많은 순서예요.
아직 리뷰가 없어요
레지스트리에서 이 카테고리의 활성 서버 전체와 비교했어요. 스타는 게시자가 저장소를 소유한 경우에만 세요.
해당하는 기본 점검 5개 중 5개를 통과했어요. 코드는 읽지 않았어요. 키나 토큰을 넣기 전에 서버가 어떤 권한을 요구하는지 확인하고, 꼭 필요한 권한만 있는 키를 쓰세요.
레지스트리에 필수 키가 나와 있지 않아요. 다만 처음 쓸 때 로그인을 요구하는 서버도 있어요.
둘 다 가능해요. 내 컴퓨터에 설치해도 되고, 클라우드 버전에 연결해도 돼요.
GitHub 저장소는 마지막으로 5일 전 변경됐고, 최신 버전(0.7.39)은 4일 전 레지스트리에 올라왔어요.
Claude Desktop, Claude Code, Cursor, VS Code처럼 MCP를 지원하는 앱에서 쓸 수 있어요. URL로 연결되므로 원격 MCP를 받는 앱에서도 쓸 수 있어요. 예: 웹 ChatGPT(Business 이상은 전체 MCP, Pro는 읽기 전용).
같은 카테고리에는: 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, 이미지, 스크립트는 제거했어요. 링크를 누르면 이 사이트를 벗어나요.
A deterministic render engine. Spec in, same bytes out. Forever. Charts, boards, and whole Pages. No headless browser.
↑ Engine output — one JSON spec, one image. Get this exact board on your README with the dashboard template (teal-hero layout).
Local MCP is free forever. A public URL is a plan (free key is enough to learn).
The spec is the chart. A pagespec is a Page. Add `.json` — that’s the twin. The hash is on the page. Don’t trust us. Check the math.
@slickfast/mcp@0.7.37The dashboard below is not a screenshot. It's a SlickFast live chart: a permanent image URL whose numbers update on their own. A scheduled job pushes fresh stats; every visitor sees current data. Live Charts — embed once, update forever.
A seller ops board (funnel, bullet graph, goal ring, gauge, calendar heatmap, leaderboard — demo data):
And the board that explains the engine — it times its own render into its title:
Don't take the speed or determinism claims on faith — run the benchmark on your own machine:
git clone https://github.com/SlickFast/slickfast && cd slickfast
node scripts/bench.mjs
It renders all 47 chart types, times each, runs a 10,000-chart throughput burst, and double-renders everything to verify byte-identical output. On an M1 Max: median 15µs per chart, ~140,000 renders/sec, 47/47 deterministic. Your numbers are your numbers.
One-click:
Add to your MCP client config (Claude Code, Claude Desktop, Cursor, …):
{
"mcpServers": { "slickfast": { "command": "npx", "args": ["-y", "@slickfast/mcp"], "env": { "SLICKFAST_API_KEY": "sf_free_…" } } } }
Omit env to stay local-only (draw free forever). Add a free key from slickfast.com when you want a live URL, share, or a published Page.
No install: clients that take a URL (claude.ai Connectors, Cursor, …) can use the hosted server at https://mcp.slickfast.com/mcp.
Then: `get_started` → `news` → `gallery` → one `render_chart`. Full tool docs: apps/mcp/README.md.
“Save it” is two jobs. On disk: render_page + keep the pagespec JSON (no key). In the world: publish_page (free key) → pages.slickfast.com/s/… + .json twin. The hash is on the page. Find it later with my_pages.
| Path | What it is |
|---|---|
packages/render-core/ | The engine: pure (spec) → SVG string. All 47 types, the type registry, SPEC.md (the spec contract), examples, gallery, and the golden snapshot net. |
packages/palette-core/ | The color library: palettes, nested themes, WCAG contrast, tokens. |
packages/raster/ | SVG → PNG rasterization (resvg). |
packages/fonts/ | The swappable font layer. |
packages/sci-core/ | Scientific charts: scatter, errorbar, lineplot, barplot, survival, Bland–Altman, Q–Q, volcano — log axes and curve fits. README |
apps/mcp/ | The MCP server published as @slickfast/mcp — a thin surface over the engine. |
apps/api/ | The hosted HTTP API — API.md is the how-to-call-it guide (no MCP needed: curl, , any language), openapi.yaml the machine-readable contract. Live at api.slickfast.com; free tier at slickfast.com. |
scripts/ | The safety net: golden checks, registry-drift check, 323-case torture suite, palette hex check. |
templates/ | Ready-made spec presets. |
cd apps/mcp && npm install && npm run build # builds dist/index.js
cd ../../packages/raster && npm install # native resvg binding (PNG)
node packages/render-core/generate.mjs --check # golden snapshots (all types) node packages/sci-core/golden/generate.mjs --check # sci-core golden snapshots node packages/sci-core/verify-stats.mjs # sci-core statistics checks node scripts/check-surfaces.mjs # type-registry drift check node scripts/torture.mjs # 323 empty/edge-case renders node scripts/check-palettes.mjs # palette hex validation
The engine is pure and deterministic by contract: no IO, no Date.now(), no Math.random() in drawing code, and nothing ships without a snapshot test.
report_issue tool writes a ready-to-paste report for you.AGPL-3.0-only. Local MCP is free. Closed commercial products (embed or self-host without AGPL) need a commercial license from $99/year: slickfast.com/license.html · licensing@slickfast.com. Hosted API / hosted MCP: slickfast.com/#pricing.