SVG Lab

Name: SVG Lab
Author: ottoman9

作者：ottoman9版本 0.1.3i★ –i在云端运行

注册名称app.svglab/svglab

安装

概览

作者提供的说明（英文原文）

SVG Lab MCP: the Design Engine for AI. App screens, icons, illustrations and charts as SVG.

PopNx MCP 的三大支柱

这三项永远不会合并成一个分数：意见、测量和人气是不同的东西。

用户评价i暂无评价评价功能将在后续阶段与账户功能一起开放
我们的基础检查i3 项中通过 3 项依据公开信息检查；尚未扫描代码
使用情况i非常新★ –

它能帮你做什么

我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。

连接方式: 在云端运行
传输方式: Streamable HTTP
分类: 设计、图片与音频

安装

选择你使用的 AI 应用，然后复制设置。

安装之前

基础检查：3 项中通过 3 项
在作者的服务器上运行：你向它提出的内容会经过他们的服务器。
可以做 60 件事（工具） account_status, create_shapes, create_path, pencil …
注册中心没有列出需要填写的密钥。

你需要

在云端运行无需安装任何东西，通过互联网连接

你用的是哪个应用？

ClaudeClaude CodeCursorVS CodeChatGPT

在上方选择你的应用。我们会记住它，下次按钮会显示“安装到 …”。

适用于网页版、桌面版和手机版 Claude：

打开 Settings → Connectors
点击 Add custom connector
粘贴下面的地址，然后点击 Add
如果要求登录，请登录作者的服务

https://svglab.app/mcp/agents

在终端中运行这条命令

claude mcp add --transport http svglab https://svglab.app/mcp/agents

在 Cursor 中打开

或者自己复制设置

粘贴到项目中的 .cursor/mcp.json，或 ~/.cursor/mcp.json

{
  "mcpServers": {
    "svglab": {
      "url": "https://svglab.app/mcp/agents"
    }
  }
}

浏览器会先询问是否打开应用，然后应用会显示设置并请你确认。密钥的值会留空，由你自己填写。

在 VS Code 中打开

或者自己复制设置

粘贴到项目中的 .vscode/mcp.json

{
  "servers": {
    "svglab": {
      "type": "http",
      "url": "https://svglab.app/mcp/agents"
    }
  }
}

浏览器会先询问是否打开应用，然后应用会显示设置并请你确认。密钥的值会留空，由你自己填写。

ChatGPT 只能连接互联网上的服务器：

打开网页版 ChatGPT → Settings → Connectors (Apps)
点击 Create 或 Add（部分套餐需要先在 Advanced 中开启 Developer mode）
粘贴下面的地址，起个名字，然后保存
如果要求登录，请登录作者的服务

https://svglab.app/mcp/agents

菜单名称可能因套餐和版本不同而略有差异。

你的选择通过 Cookie 保存在这台设备上，无需账户。

这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同，请以 README 为准。

它能做什么

工具名称和描述与服务器在 2026年11月7日报告的完全一致。这些内容由作者撰写，不是我们写的；我们以纯文本形式显示。

account_status
Report the plan, access, SVG Lab credits left and what actions cost.
create_shapes
Draw up to 80 shapes, text, paths and pencil strokes in one call; illustrations are copied from a reference. With a shell (Claude Code): write the fields to a JSON file, curl it to the upload link new_project gave and pass only upload_id, so the user approves a short call.
create_path
Draw one path from anchors with optional absolute handles. With a shell (Claude Code): write the fields to a JSON file, curl it to the upload link new_project gave and pass only upload_id, so the user approves a short call.
pencil
Draw a freehand stroke the way the Pencil tool does. With a shell (Claude Code): write the fields to a JSON file, curl it to the upload link new_project gave and pass only upload_id, so the user approves a short call.
edit_path
Change a path's anchors and handles in place. With a shell (Claude Code): write the fields to a JSON file, curl it to the upload link new_project gave and pass only upload_id, so the user approves a short call.
smooth_path
Fill missing handles, refit curves, or turn a stroke into ink.
boolean_op
Union, subtract, intersect or exclude shapes into one new path.
offset_path
Draw a new path at a set distance outside or inside a path.
transform
Move, scale or rotate shapes.
align
Align shapes to a shared edge or centre.
distribute
Space three or more shapes evenly.
align_to_artboard
Position shapes relative to their artboard.
set_style
Change fill, stroke, caps, joins, taper or opacity.
set_gradient
Paint fill or stroke with a linear or radial gradient.
set_filter
Set blur, soft shadows and opacity, or clear them.
set_pattern
Fill shapes with a built-in pattern.
clip_shapes
Clip or mask shapes with another shape.
clip_to_artboard
Clip shapes that cross their artboard's frame.
text_on_path
Set a text shape along a path.
set_text
Change text content or typography.
duplicate
Copy shapes in place or at an offset.
group
Group shapes.
ungroup
Break groups into their shapes.
name_group
Name a group.
reorder
Change stacking order.
resize
Set the exact width or height of shapes.
fit_to_box
Scale and move shapes together into a box; placing an illustration removes its drawing board.
fit_to_children
Resize a container to wrap its children.
repeat
Copy shapes into a row, grid or circle.
mirror
Make a mirrored copy, or join a half outline with its reflection.
flip
Flip shapes horizontally or vertically.
scatter
Place many seeded copies of one item inside an area.
add_texture
Add hatch, stipple, facet or strata marks clipped to a shape of a drawing on its "Drawing · " board. On a screen the marks are refused as a picture drawn onto it.
create_icon
Draw a built-in monoline icon (docs {components} names them).
create_layout
Build a screen or section from a layout tree; returns boxes, ids and measured warnings. With a shell (Claude Code): write the fields to a JSON file, curl it to the upload link new_project gave and pass only upload_id, so the user approves a short call.
update_layout
Patch or replace a layout made by create_layout. With a shell (Claude Code): write the fields to a JSON file, curl it to the upload link new_project gave and pass only upload_id, so the user approves a short call.
design_tokens
Change the project's design tokens. With a shell (Claude Code): write the fields to a JSON file, curl it to the upload link new_project gave and pass only upload_id, so the user approves a short call.
define_styles
Define named style presets. With a shell (Claude Code): write the fields to a JSON file, curl it to the upload link new_project gave and pass only upload_id, so the user approves a short call.
list_design_styles
List style presets.
measure_text
Measure how text wraps and renders, without drawing it.
list_layouts
List this project's layouts.
list_shapes
List shapes with ids, boxes and stacking order.
describe_document
Describe the artboards and shapes.
inspect_path
Read a path's anchors, handles and construction issues.
inspect_layout
Measure overlap, overflow and alignment; changes nothing.
apply_layout_fixes
Move misaligned layout children to their suggested positions.
check_contrast
Compute WCAG contrast between two colours.
check_contacts
Measure whether parts touch what they belong to.
optical_center
Move an icon so its visual centre sits on its container's centre.
measure_optical_center
Report the optical-centre correction without moving anything.
snap_to_grid
Snap shapes to a grid.
normalize_spacing
Set one equal gap between shapes.
normalize_radii
Give rectangles one corner radius.
resolve_overflow
Move shapes back inside a frame.
add_artboard
Add a screen, slide, page or post (preset sizes it). What a control opens (dropdown, filter, menu) is add_hidden_ui.
set_artboard
Resize, move, rename, recolour or delete an artboard; notes holds a slide's speaker notes.
list_artboards
List the artboards.
set_active_artboard
Make an artboard the active one.
fit_artboard
Fit the active artboard to the artwork on it, plus optional padding.
delete_shapes
Delete shapes.

基础检查i

我们检查的是任何人都能看到的信息；我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月9日

✓ 通过
作者与仓库一致
注册名称已通过域名 svglab.app 验证（注册中心会核实域名所有权）
… 尚未检查
仍在维护
我们还没有从 GitHub 读取这个仓库
… 尚未检查
有许可证
我们还没有从 GitHub 读取这个仓库
✓ 通过
端点有响应
在 1393 毫秒内响应（HTTP 200）
– 不适用
使用 OAuth 登录
无需登录
✓ 通过
工具描述中没有隐藏指令
已读取 60 个工具描述，未发现针对 AI 的隐藏指令

与“设计、图片与音频”中的其他服务器比较i

星标数多于此分类中其他 2801 个服务器的 0%
发布到注册中心的时间比此分类中其他 2801 个服务器的 58% 更新
基础检查结果等于或优于此分类中其他 2801 个服务器的 100%

与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时，星标数才计入。

常见问题

SVG Lab 安全吗？

它在 3 项适用的基础检查中通过了 3 项。我们没有阅读代码。在添加密钥或令牌之前，请先看看这个服务器要求哪些权限，并使用只具备所需权限的密钥。

它需要哪些密钥或代码？

注册中心没有列出必需的密钥，不过有些服务器会在首次使用时要求你登录。

它在我的电脑上运行还是在云端？

它在作者的云端运行。通过互联网连接，无需安装，但你发送的内容会经过作者的服务器。

它还在维护吗？

GitHub 仓库最后更新于–，最新版本（0.1.3）于22天前进入注册中心。

哪些应用可以使用它？

支持 MCP 的应用，例如 Claude Desktop、Claude Code、Cursor 和 VS Code。它通过 URL 连接，所以接受远程 MCP 服务器的应用也可以使用，例如开启开发者模式的 ChatGPT。

有什么可以替代它？

同一分类中有：Figma Context MCP, Claude Real Video, Figma MCP Server

替代选择

同一分类中其他作者的服务器，按星标数排序。

如何看卡片：↓ 每周下载量i★ GitHub 星标i三大支柱：评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i

Figma Context MCP

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

作者：GLips广泛使用↓ 16.1万/周★ 1.6万5个月前更新

在你的电脑上运行

安装

Claude Real Video

Let any LLM watch a video locally — and search everything it has ever watched.

作者：HUANGCHIHHUNGLeo广泛使用↓ 1106/周★ 22842个月前更新

在你的电脑上运行

安装

Figma MCP Server

The Figma MCP server brings Figma design context directly into your AI workflow.

作者：figma广泛使用★ 215213个月前更新

在云端运行✓ mcp.figma.com

安装

作者的 README

打开 README

按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。

SVG Lab MCP

Add to Claude opens Claude's Add custom connector dialog with SVG Lab already filled in; press Add, then Connect. The Cursor and VS Code buttons open SVG Lab's install step for that app, which hands over to the app (GitHub cannot link to an app directly).

Listed on Smithery and Glama. Facts, offer and setup: https://svglab.app/mcp-server

SVG Lab MCP lets your AI design inside SVG Lab (svglab.app), and you watch it live. Connect Claude, ChatGPT, Codex, Cursor or any other MCP client and ask for app screens, icons, illustrations or charts: your AI designs them in your SVG Lab project with SVG Lab's Design Engine (layout, spacing, type, colour and drawing, checked before anything is finished). claude.ai, ChatGPT and Codex show a live card in the chat with the screen being drawn; in any app the AI can open the project in the SVG Lab editor so you watch the work on SVG Lab's canvas. The finished designs are saved to your SVG Lab projects as clean SVG, ready to export as SVG, PNG or PDF.

The AI brings the idea (content, palette, direction); SVG Lab guarantees the structure (spacing, alignment, sizing, type, valid vector geometry). It runs on SVG Lab's servers, so there is nothing to install and no browser tab needs to stay open.

https://svglab.app/mcp

Streamable HTTP, OAuth sign-in, no key needed.

This repository holds documentation, ready-made client configs and an agent skill. It contains no server code. The full, always current setup guide is at svglab.app/mcp-setup.

For AI agents
Before you start
Quick setup: Claude · Claude Code · ChatGPT · Codex · Cursor · VS Code · OpenCode · Windsurf · Gemini CLI · Any MCP client
Check it works
Examples
Access
FAQ
Links
Files in this repository

For AI agents

You are probably setting this up for a user. Facts:

name:              svglab

server_url: https://svglab.app/mcp transport: streamable HTTP (remote). Not SSE, not stdio. Nothing to install. auth: OAuth 2.1, authorization code with PKCE (S256), dynamic client registration resource_metadata: https://svglab.app/.well-known/oauth-protected-resource/mcp auth_server_meta: https://svglab.app/.well-known/oauth-authorization-server registration: https://svglab.app/oauth/register scope: mcp client_id: not needed; leave client ID and client secret empty no_credentials: POST /mcp answers 401 with a WWW-Authenticate header pointing at resource_metadata key_alternative: header "Authorization: Bearer svl_KEY" (the user creates the key at svglab.app: account menu, SVG Lab MCP, Generate key). Never invent a key. access: every account gets 100 free credits (up to 24 app screens) once to try it, no form; then a plan (Starter, Plus, Max, Ultra or Team) or a top-up: https://svglab.app/billing cost: credits: 1 a tool call, 2 a reference image search, failed calls free; 100 free credits (up to 24 app screens) once per account, then monthly plan credits or top-up credits (never expire) usage: https://svglab.app/usage (the signed in account's credits and its calls by tool, project and day) browser_tab: not needed; the server runs the Design Engine and saves to the user's My Projects first_call: can take 10 to 30 seconds while the Design Engine starts sessions: up to 2 AI sessions per SVG Lab account at once, each in its own artboard group one_click_claude: https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=SVG%20Lab&connectorUrl=https%3A%2F%2Fsvglab.app%2Fmcp (opens Add custom connector with SVG Lab filled in; the user presses Add, then Connect) one_click_cursor: cursor://anysphere.cursor-deeplink/mcp/install?name=svglab&config=eyJ1cmwiOiJodHRwczovL3N2Z2xhYi5hcHAvbWNwIn0= one_click_vscode: vscode:mcp/install?%7B%22name%22%3A%22svglab%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fsvglab.app%2Fmcp%22%7D app_steps: https://svglab.app/mcp-server?app=NAME opens one app's steps; NAME is claude, chatgpt, codex, claude-code, cursor or vscode. Every app: https://svglab.app/mcp-server#connect registry_name: app.svglab/svglab setup_markdown: https://svglab.app/mcp-setup (send the header Accept: text/markdown) agent_skill: skills/svglab-mcp/SKILL.md in this repository (npx skills add ottoman9/svglab-mcp)

Procedure:

Find the app. Work out which app the user is in (Claude Code, OpenCode, Codex, Cursor, VS Code, Gemini CLI, Windsurf, Claude, ChatGPT). If you cannot tell, ask once. If the user is not sure their account has access, ask them to open https://svglab.app/billing while signed in: it shows the current plan and the credits left (plan, free and top-up). Every account gets 100 free credits (up to 24 app screens); after that the SVG Lab MCP needs a plan (Starter, Plus, Max, Ultra or Team) or a top-up.
Add the server. Use that app's block below exactly as written, with the name svglab. Prefer the user level config (every project) unless the user asks for one project. When editing a config file, merge the entry into the existing file and keep every other server and setting. Never put a key in a project file that could be committed to git; use the environment variable form.
Start the sign-in. Run the app's sign-in step (for example opencode mcp auth svglab, or /mcp in Claude Code). It opens the browser and waits until the user signs in to SVG Lab and presses Approve, so either run it and wait, or ask the user to run it in their own terminal. You cannot approve for them; tell them what to expect.
Reload. Restart the app or start a new session so it loads the SVG Lab tools. If you are running inside the app you are configuring, a restart ends your own session: finish the steps above first, then ask the user to restart and paste the test prompt from Check it works into a new session.
Verify. In the new session, check your own tool list for tools from svglab. With access there are dozens of design tools. If there is only one tool, an account status tool, the connection works but the account cannot design yet (its 100 free credits are used up and it has no plan credits and no top-up credits, the account is suspended, or a key was replaced): call it and pass its message to the user. With sign-in, an account without access usually stops earlier: the SVG Lab sign-in page says the free credits are used up; the user can still approve, and the account status tool then says how to get credits.
Test. Run the test prompt from Check it works and give the user the project link it returns. The first design step can take 10 to 30 seconds; that is not a failure.
If access is not granted, tell the user: "SVG Lab is set up, but your SVG Lab account has no SVG Lab credits left: its 100 free credits are used up. Choose a plan, or buy a top-up, at https://svglab.app/billing with the same account, and then it works with no more setup."

Before you start

An SVG Lab account. Sign in at https://svglab.app/ with Google or an email link.
Nothing to buy to try it: every account gets 100 free credits (up to 24 app screens) once, with no form (a tool call costs 1 credit). After that, choose a plan (Starter, Plus, Max, Ultra or Team) or buy a top-up at https://svglab.app/billing : $10 for 5,000 credits (up to 1,200 app screens), $25 for 10,000 credits (up to 2,400 app screens) or $50 for 25,000 credits (up to 6,100 app screens). Top-up credits never expire; all purchases are final.

Sign in with the same account every time: when the AI app opens the SVG Lab sign-in page, use the same account, so its free credits, plan or top-ups apply. Designs are saved to that account's My Projects.

Every app signs in the same way: add the address, the app opens a "Sign in to SVG Lab" page, sign in, check which app is asking, press Approve.

Quick setup

Short versions below. Ready config files are in configs/. The full guide, with key-based setups and troubleshooting, is at https://svglab.app/mcp-setup .

Claude (claude.ai and Claude Desktop)

Custom connectors are available on the Free, Pro, Max, Team and Enterprise plans; a Free account can add one custom connector.

One click: open Add SVG Lab to Claude. Claude opens Add custom connector with the name SVG Lab and the URL https://svglab.app/mcp already filled in. Check them and leave Advanced settings (OAuth Client ID and Secret) empty.
Press Add, then Connect next to SVG Lab. Sign in to SVG Lab and press Approve.
In a chat, press + at the lower left, open Connectors and make sure SVG Lab is switched on.

By hand instead: in Claude, open Customize, then Connectors (on the web: https://claude.ai/customize/connectors), press +, then Add custom connector. Name it SVG Lab, paste https://svglab.app/mcp as the remote MCP server URL, and continue from step 2.

Team or Enterprise: an owner adds the connector once under Organization settings, then Connectors; each person presses Connect and signs in with their own SVG Lab account.

Claude Code

claude mcp add --transport http --scope user svglab https://svglab.app/mcp

--scope user makes SVG Lab available in every project. Leave it out to add it to the current project only. Then start Claude Code, type /mcp, choose svglab and pick Authenticate. The browser opens the SVG Lab sign-in page; press Approve. /mcp should show svglab as connected.

ChatGPT

Install the SVG Lab plugin in one click, no developer mode:

Open the SVG Lab plugin and press +, or in ChatGPT open Plugins, search SVG Lab and press +.
Sign in to SVG Lab when asked and press Approve.
Ask for a design in any chat.

Codex

Codex installs the same SVG Lab plugin:

In the Codex app, open Plugins, search SVG Lab and press +. In the Codex CLI, type /plugins.
Sign in to SVG Lab when asked and press Approve.
Start a new Codex thread so it loads the SVG Lab tools.

The Codex IDE extension has no plugins. There, add the server by hand (the app, the IDE extension and the CLI share ~/.codex/config.toml):

codex mcp add svglab --url https://svglab.app/mcp

Or add to ~/.codex/config.toml by hand:

[mcp_servers.svglab]

url = "https://svglab.app/mcp" `

只显示了开头部分；其余内容请在仓库中阅读