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.
Elige la app de IA que usas y copia la configuración.
Pasó 2/2 revisiones · Funciona en tu computadora
Primero: ¿qué IA usas?
Elige tu app y los pasos aparecen abajo.
Funciona con Claude, pero hay que preparar algo antes
Necesitas una clave de Vecline (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez) · Solo en la app de Claude para computadora (Windows o Mac), no en la web ni en el móvil
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
SettingsDeveloperEdit Config
{
"mcpServers": {
"vecline": {
"command": "npx",
"args": [
"-y",
"vecline",
"mcp"
],
"env": {
"VECLINE_SOFFICE": "your-value"
}
}
}
}Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Usa Vecline y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si Claude dice que está usando Vecline o muestra una herramienta de Vecline en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión
ChatGPT todavía no puede conectar Vecline
Vecline se instala en tu computadora, pero ChatGPT solo conecta servidores que funcionan en la web
A · Usa una app que pueda conectar Vecline
B · Otros en Diseño, imágenes y audio que funcionan con ChatGPT
Elegidos entre los más usados de la misma categoría, solo los que se conectan con una dirección y sin clave
Funciona con Claude Code, pero hay que preparar algo antes
Necesitas una clave de Vecline (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Mac: pulsa Command+Espacio y escribe Terminal · Windows: abre PowerShell
claude mcp add --scope user vecline --env VECLINE_SOFFICE=your-value -- npx -y vecline mcpCambia “your-value” por tu clave antes de pulsar Enter
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Deberías ver Vecline en la lista como conectado
Usa Vecline y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si Claude Code dice que está usando Vecline o muestra una herramienta de Vecline en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Funciona con Cursor, pero hay que preparar algo antes
Necesitas una clave de Vecline (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
En la configuración de Vecline, VECLINE_SOFFICE está vacío; añade tu clave y guarda
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Usa Vecline y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si Cursor dice que está usando Vecline o muestra una herramienta de Vecline en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de Cursor el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Funciona con VS Code, pero hay que preparar algo antes
Necesitas una clave de Vecline (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
En la configuración de Vecline, VECLINE_SOFFICE está vacío; añade tu clave y guarda
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Usa Vecline y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si VS Code dice que está usando Vecline o muestra una herramienta de Vecline en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de VS Code el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Otras apps que usan MCP, como Windsurf, Zed o Gemini CLI, añaden servidores de forma distinta. Míralo en la lista de apps
Ver todas las apps que usan MCP →
La configuración JSON está en “Para desarrolladores”, abajo
Claude Code
claude mcp add --scope user vecline --env VECLINE_SOFFICE=your-value -- npx -y vecline mcpClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"vecline": {
"command": "npx",
"args": [
"-y",
"vecline",
"mcp"
],
"env": {
"VECLINE_SOFFICE": "your-value"
}
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"vecline": {
"command": "npx",
"args": [
"-y",
"vecline",
"mcp"
],
"env": {
"VECLINE_SOFFICE": "your-value"
}
}
}
}VS Code (mcp.json)
{
"servers": {
"vecline": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"vecline",
"mcp"
],
"env": {
"VECLINE_SOFFICE": "your-value"
}
}
}
}VECLINE_SOFFICE envEsta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.
npm: veclineSegún cómo se conecta este servidor y la documentación de cada app, comprobado el 10 nov 2026.
Se ejecutan en tu computadora en
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
Se ejecuta en tu computadora; la lista de herramientas aparece en tu app de IA después de instalarlo.
Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 12 nov 2026
El nombre en el registro se verificó con la cuenta de GitHub shunyagatha, dueña del repo
Último cambio de código: hace 3 meses
Todavía no hemos leído este repo en GitHub
Este se ejecuta en tu computadora; no hay endpoint en internet
Se ejecuta en tu computadora y usa ajustes locales en su lugar
Se ejecuta en tu computadora; solo podemos leer listas de herramientas de endpoints en internet
Pregunta, comparte un consejo o avisa de que no funciona. Ordenado por lo que la gente marcó como útil.
Aún no hay publicaciones. Sé la primera persona en preguntar o compartir.
Lo publicado aquí lo escriben usuarios, no el equipo de PopNx.
Aún no hay reseñas
Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.
Superó 2 de 2 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.
El registro no indica ninguna clave obligatoria, aunque algunos servidores te piden iniciar sesión la primera vez que los usas.
Se ejecuta en tu computadora. Tu app de IA lo inicia cuando hace falta, y los datos no pasan por los servidores del creador (a menos que el propio servidor llame a un servicio en línea).
El repo de GitHub cambió por última vez hace 3 meses, y la última versión (2.1.4) llegó al registro hace 3 meses.
Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. También necesitas Node.js en tu computadora.
En la misma categoría: Figma Context MCP, AutoClip, Next AI Draw.io
Servidores de la misma categoría hechos por otros creadores, ordenados por estrellas.
Cómo leer una tarjeta:↓ Descargas por semanai★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Clip long videos into short clips with covers and captions. Local CLI and MCP.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
Copiado tal cual del repo del creador. PopNx MCP no lo ha revisado ni lo respalda. Se quitaron HTML, imágenes y scripts. Los enlaces llevan fuera de este sitio.
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