Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
제작자가 쓴 설명(영어 원문)
Local-first image, vector and document toolkit that measures its own output. Nothing uploaded.
이 세 가지는 절대 하나의 점수로 합치지 않아요. 의견, 측정, 인기는 서로 다른 것이니까요.
이 서버는 아직 쉬운 말로 된 요약을 쓰지 못했어요. 아래는 레지스트리에서 읽어 온 사실이에요.
쓰고 있는 AI 앱을 고른 다음 설정을 복사하세요.
VECLINE_SOFFICE필요한 것
어떤 앱을 쓰세요?
위에서 앱을 고르세요. 기억해 두었다가 다음부터는 버튼에 “…에 설치”라고 표시해요.
Claude Desktop → Settings → Developer → Edit Config를 열고 claude_desktop_config.json에 이 내용을 붙여 넣으세요
{
"mcpServers": {
"vecline": {
"command": "npx",
"args": [
"-y",
"vecline",
"mcp"
],
"env": {
"VECLINE_SOFFICE": "your-value"
}
}
}
}터미널에서 이 명령어를 실행하세요
claude mcp add vecline --env VECLINE_SOFFICE=your-value -- npx -y vecline mcp실행하기 전에 빈 값을 채워 주세요.
프로젝트의 .cursor/mcp.json 또는 ~/.cursor/mcp.json에 붙여 넣으세요
{
"mcpServers": {
"vecline": {
"command": "npx",
"args": [
"-y",
"vecline",
"mcp"
],
"env": {
"VECLINE_SOFFICE": "your-value"
}
}
}
}브라우저가 앱을 열지 물어본 다음, 앱이 설정을 보여 주고 확인을 요청해요. 키 값은 비워 두니 직접 입력하세요.
프로젝트의 .vscode/mcp.json에 붙여 넣으세요
{
"servers": {
"vecline": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"vecline",
"mcp"
],
"env": {
"VECLINE_SOFFICE": "your-value"
}
}
}
}브라우저가 앱을 열지 물어본 다음, 앱이 설정을 보여 주고 확인을 요청해요. 키 값은 비워 두니 직접 입력하세요.
이 서버는 내 컴퓨터에서 실행되는데, ChatGPT는 인터넷에 있는 서버에만 연결할 수 있어요. 다른 앱을 고르세요.
선택한 앱은 이 기기의 쿠키에만 저장돼요. 계정은 필요 없어요.
VECLINE_SOFFICE env이 설정은 제작자의 레지스트리 정보로 만들었어요. README와 다르면 README를 따르세요.
내 컴퓨터에서 실행돼요. 설치하면 AI 앱에 도구 목록이 나타나요.
누구나 볼 수 있는 정보를 점검했고, 코드는 읽지 않았어요. 해당하지 않는 항목은 개수에서 뺐어요. · 2026년 11월 9일 점검
레지스트리 이름이 GitHub 계정 shunyagatha 기준으로 확인되었고, 이 계정이 저장소를 소유하고 있어요
아직 GitHub에서 이 저장소를 읽어 오지 않았어요
아직 GitHub에서 이 저장소를 읽어 오지 않았어요
내 컴퓨터에서 실행되는 서버라 인터넷 엔드포인트가 없어요
내 컴퓨터에서 실행되며, 대신 로컬 설정을 사용해요
내 컴퓨터에서 실행돼요. 도구 목록은 인터넷 엔드포인트가 있는 서버에서만 읽을 수 있어요
레지스트리에서 이 카테고리의 활성 서버 전체와 비교했어요. 스타는 게시자가 저장소를 소유한 경우에만 세요.
해당하는 기본 점검 1개 중 1개를 통과했어요. 코드는 읽지 않았어요. 키나 토큰을 넣기 전에 서버가 어떤 권한을 요구하는지 확인하고, 꼭 필요한 권한만 있는 키를 쓰세요.
레지스트리에 필수 키가 나와 있지 않아요. 다만 처음 쓸 때 로그인을 요구하는 서버도 있어요.
내 컴퓨터에서 실행돼요. AI 앱이 필요할 때 실행하고, 데이터는 제작자의 서버를 거치지 않아요(서버 자체가 온라인 서비스를 호출하는 경우는 제외).
GitHub 저장소는 마지막으로 – 변경됐고, 최신 버전(2.1.4)은 3개월 전 레지스트리에 올라왔어요.
Claude Desktop, Claude Code, Cursor, VS Code처럼 MCP를 지원하는 앱에서 쓸 수 있어요. 내 컴퓨터에 Node.js도 있어야 해요.
같은 카테고리에는: Figma Context MCP, Claude Real Video, Figma MCP Server
같은 카테고리에서 다른 제작자가 만든 서버예요. 스타 순으로 정렬했어요.
카드 보는 법:↓ 주간 다운로드i★ GitHub 스타i세 기둥: 리뷰 · 점검 · 사용 정도i업데이트 = 최신 버전을 레지스트리에 공개한 날i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
The Figma MCP server brings Figma design context directly into your AI workflow.
제작자의 저장소에서 쓰인 그대로 가져왔어요. PopNx MCP가 검토하거나 보증한 내용이 아니에요. HTML, 이미지, 스크립트는 제거했어요. 링크를 누르면 이 사이트를 벗어나요.
Measurable raster ⇄ SVG conversion — and a broad image + document toolkit. Ten raster formats, every one convertible to every other, with the accuracy of every conversion actually measured rather than asserted; plus PDF & Office (docx/xlsx/pptx) rendering and conversion, images → PDF, DXF at a real physical cut size alongside EPS and G-code for makers, centerline tracing and content-aware crop — most of it in a zero-dependency core that is CI-proven to bundle for a browser.
On flat artwork — logos, icons, UI, screenshots, pixel art — the output is bit-exact: SSIM 1.0000, PSNR ∞, zero differing pixels, and on a real logo smaller than imagetracerjs or vtracer manage while still only approximating — 24 KB against their 60 and 64. That comes from recognising the image is cheaper to encode exactly than to approximate, not from a better curve fit. Tracing now emits real curves by default — sub-pixel edge placement is on, which is the only thing that lets the curve fitter run at all; before this the default returned a staircase with zero curve commands on real artwork. It costs about 2.35x the gzipped bytes, because moving coordinates off the integer lattice costs compression, and --no-subpixel buys the old smaller output back. Pixel and exact modes are untouched and stay bit-exact. potrace is smaller than everyone and much less accurate, which is a real trade and not one this README will hide. On real photographs it leads all three on SSIM by 0.05–0.18 *at their default settings*; one documented vtracer flag closes part of that. It is not the fastest — imagetracerjs is quicker on every fixture measured. Every number in this README is reproducible: node scripts/fetch-corpus.mjs && npm run compare. (The corpus is fetched rather than committed — the photographs are not ours to redistribute.)
▶ [Vecline Studio — vecline.xyz](https://vecline.xyz) — the whole toolkit in your browser. Drop an image, a PDF, or a TGA/PNM/ICO no browser can read; tune it; watch live SSIM / PSNR / CIEDE2000; export SVG, DXF at a real cut size, EPS, PDF, G-code, React/Vue/Svelte/Solid components, colour separations, sprite sheets, favicons, BlurHash, or just re-encode between ten raster formats. Free, unlimited, no signup, works offline, and nothing is uploaded — every conversion runs in your tab, not on a server. (How it compares · dev playground)
vecline vectorize logo.png --verify
✓ logo.svg 400×300 pixel mode 4 shapes 2.1 KB → 7.5 KB 228 ms
· Auto-selected pixel mode: 4 distinct colours, 1.0% run density. Output is bit-exact.
Accuracy bit-exact (lossless) PSNR ∞ SSIM 1.000000 (luma 1.000000) RMSE 0.0000
vecline vectorize anything.png --lossless
--lossless returns a bit-exact SVG or it fails. It never silently gives you a near-miss.
That is enforced by measurement, not by construction. Every candidate encoding is rendered back to pixels and compared against the source; anything that is not bit-identical is discarded, and if nothing survives, the command errors out. Candidates are tried in order of how useful the result is:
Measured across every fixture in the test suite — flat artwork, pixel art, soft alpha, photographs, JPEG sources, a single pixel — all of them come back PSNR ∞, maxChannelDiff 0.
When the original file is preserved, the SVG records its SHA-256. extract hands the file back and checks the digest:
vecline vectorize logo.png -o keep.svg --mode embed --embed-strategy preserve
vecline extract keep.svg -o recovered.png --against logo.png
✓ recovered.png image/png 2.1 KB sha256 1c4f95f66b28a40a75672614796de762f6ef8a6afec3191b460dbbd556f10366 digest matches the value recorded when the SVG was written payload the original file, preserved byte for byte vs source byte-identical to logo.png
extract exits non-zero on any mismatch, so it works as a CI gate. Note the honest caveat: an *embedded JPEG* survives byte for byte but does not render bit-identically, because resvg's decoder rounds its inverse DCT differently. Strict --lossless detects that, discards the candidate, and says so.
| Input | Result | Size | Exact? |
|---|---|---|---|
| Flat artwork 400×300 | real geometry (contours) | 3.9 KB | ✅ |
| Pixel art 128×128 | real geometry (rectangles) | 0.6 KB | ✅ |
favicon.ico 64×64 | real geometry (rectangles) | 0.5 KB | ✅ |
| BMP 400×300 | real geometry (contours) | 3.9 KB | ✅ |
| Photo 320×240 | embedded PNG | 230 KB | ✅ |
A photograph *can* be emitted as exact geometry, and --prefer geometry will do it — but it costs one rectangle per pixel, so that same photo becomes a 1.99 MB file of 42,933 shapes. It is vector in name only, so auto uses the bitmap and tells you the ratio it measured. Nothing is hidden.
Most vectorizers claim perfect accuracy. Here is what is actually true, because it determines which tool you should use:
| Direction | Can it be exact? | Why |
|---|---|---|
| SVG → raster | Yes, at any resolution you name | Rendering is a well-defined computation. Ask for 4000px wide and you get exactly that, correct to the renderer's rasterisation rules. |
| Raster → SVG, lossless | Yes | Two different ways, both bit-exact. See pixel and embed below. |
| Raster → SVG, traced into curves | No, and it never can be | A photograph holds more independent information than any compact set of Bézier curves can encode. Tracing is approximation by definition. |
Anyone promising exact photo-to-curves vectorization is either embedding a bitmap and calling it vector, or is wrong. Vecline does both exact conversions properly, does the approximate one well, and always tells you which one you got and how close it landed.
| Mode | Output | Exact? | Use it for |
|---|---|---|---|
| `lossless` | Real geometry, or an embedded bitmap | Bit-exact, verified | Anything, when exactness is non-negotiable |
| `pixel` | Real vector geometry (rectangles or contours) | Bit-exact | Logos, icons, pixel art, screenshots, diagrams, flat colour |
| `trace` | Real Bézier curves | Approximate, measured | Photos, complex art, anything you want to *scale* or *edit* |
| `embed` | Bitmap inside an SVG wrapper | Bit-exact | You need this exact image, in an SVG container |
auto (the default) inspects the image and picks between pixel and trace. --lossless overrides everything with the guarantee described above.
`pixel` mode is the one people don't expect. It produces genuine, editable, infinitely-scalable vector paths that rasterise back to your input with zero differing pixels — not "visually identical", literally identical. For flat artwork it is usually what you actually wanted.
npm install -g vecline # the CLI
npm install vecline # the library
Node.js 18.17+. The native dependencies (sharp, resvg) ship prebuilt binaries for Linux, macOS and Windows.
| You want | Import | Native deps |
|---|---|---|
| The full Node toolkit | import { vectorize } from 'vecline' | yes |
| … from CommonJS | const { vectorize } = require('vecline') | yes |
| Just the vectoriser | import { trace } from 'vecline/vectorize' | none |
| Just the metrics | import { compareImages } from 'vecline/metrics' | none |
| Just the pure-TS codecs | import { encodeBmp } from 'vecline/formats' | none |
| Everything portable | import { vectorizeExact } from 'vecline/core' | none |
| Image editing (resize, rotate…) | import { editImage } from 'vecline/ops' | sharp only |
| Register a custom codec | import { registerDecoder } from 'vecline/codecs' | none |
Install only what you use. Every none subpath imports in isolation with the native codecs omitted (npm install vecline --omit=optional), and the package is "sideEffects": false, so a bundler drops everything you never import. vecline/core is the vectorisation and measurement engine with zero dependencies and no Node built-ins. It takes a plain { width, height, data } — byte-for-byte the layout of the browser's ImageData — so canvas pixels go straight in:
import { vectorizeExact } from 'vecline/core';
const { data, width, height } = ctx.getImageData(0, 0, canvas.width, canvas.height); const { svg } = vectorizeExact({ width, height, data }); // bit-exact, no codec needed
The zero-dependency claim is CI-asserted, not stated. Every commit bundles vecline/core for a browser with esbuild — no Node platform, no externals — and fails if a single node: specifier or Node global survives into the output. It comes to 96 KB minified, with a size tripwire either side so nothing large can arrive unnoticed. Reading the import graph would only prove that the imports we can see are clean; bundling proves the thing users actually do works.
Install without the optional native packages (npm install vecline --omit=optional) and core still works, at 2 MB instead of ~100 MB. Reading image files, rendering SVG back to pixels, and the verified lossless guarantee all need real codecs, so those live in the main entry point.
The BMP, ICO, PNM and TGA codecs are written from scratch in this package, so they work with the native packages omitted — no libvips required to read or write any of them. One caveat worth stating rather than discovering: an ICO entry may hold a complete PNG instead of raw pixels (most 256×256 icons do), and decoding that still needs a real PNG codec. The ICO container is parsed here either way; it is the payload inside that has to go somewhere. Entries storing a raw DIB — which is what smaller icons normally use — read with nothing installed.
| Read | Write | |
|---|---|---|
| PNG | ✅ | ✅ |
| JPEG | ✅ | ✅ |
| WebP | ✅ | ✅ lossy + lossless |
| AVIF | ✅ | ✅ lossy + lossless |
| TIFF | ✅ | ✅ |
| GIF | ✅ first frame | ✅ |
| BMP | ✅ all depths, RLE, BITFIELDS | ✅ 24/32-bit |
| ICO / CUR | ✅ largest entry | ✅ PNG or DIB payload |
| PNM (PBM/PGM/PPM) | ✅ P1–P6 | ✅ P4/P5/P6 |
| TGA | ✅ RLE, colour-mapped | ✅ RLE optional |
| SVG | ✅ | ✅ |
The matrix is square: every format it reads, it writes. That is 11 × 11 = 121 conversions, and the test suite runs all of them on every commit — PNG→TGA, ICO→WebP, TGA→SVG, SVG→BMP, whatever you need. Every cell is reachable from one command:
vecline convert photo.png thumb.webp # raster → raster
vecline
앞부분만 보여 드려요. 나머지는 저장소에서 읽어 보세요