Nakkas MCP Server

社区

将AI变成SVG艺术家的MCP服务器。一个渲染引擎，AI决定一切。

分类: 开发工具第 38 / 438
Stars: ★ 30 热门
传输方式: stdio（本地进程）
运行环境: Node.js 18+
凭据: 无需凭据
许可证: MIT
最近提交: 3 个月前
工具数: 3

66FMRS · C

Nakkas是一个创新且功能丰富的MCP服务器，为AI生成动画SVG提供了高效的工作流程。其独特之处在于通过PNG预览和工件系统实现迭代优化，减少了上下文窗口的垃圾。服务器配置灵活，支持各种元素和动画类型，但用户需注意其局限性，如不支持嵌套组、外部字体和GitHub上的JavaScript。整体而言，这是一个高质量的工具，适合希望利用AI生成矢量图形的开发者。

最强项 · 文档质量 17/20 最弱项 · 可靠性 11/20

可靠性

11/20

安全与权限

13/20

维护活跃度

11/20

文档质量

17/20

安装易用性

14/20

查看各项评分依据

可靠性 11/20: README 描述了清晰的三工具工作流（render_svg/preview/save）、详细的校验错误诊断（字段级报错、引用完整性检查、自动数值强转），并声称 397 个测试和浏览器真值交叉验证。但这些均为不可执行的声明性证据：未提供实际源码、CI 工作流或测试文件内容，无法静态验证初始化握手、工具行为一致性或测试真实性。README 自身还承认存在 SDK -32602 校验错误等首次调用失败路径，说明边界问题真实存在。按校准规则，无源文件级可验证执行证据，不超过 12 分。
安全与权限 13/20: 无恶意行为迹象：本地运行、无云 API、无密钥、无网络数据外发需求。但 save 工具接受任意 outputPath 写盘（虽有防覆盖计数器），且未提及任何路径范围限制、写盘确认机制或对 content 参数的净化；image 元素支持外部 href（潜在 SSRF/远程资源加载面）。未发现红线风险，但权限边界与危险操作确认不完整，扣分。
维护活跃度 11/20: MIT 许可、v0.5.0 语义化版本、npm 包与 GitHub 仓库一致、已列入官方 MCP Registry，README 显示活跃的自我维护（v0.3.0 修复记录、dogfooding 流程）。但未提供提交频率、发布节奏、issue 响应时间、依赖更新策略或安全响应渠道的证据；无 SECURITY.md 证据。治理与持续维护证据不足，只能给中等分。
文档质量 17/20: 文档质量显著高于同类：安装（三客户端+本地开发）、完整的 SVGConfig 结构、全部元素类型表、滤镜参数表、动画示例、字体兼容性矩阵、专门的使用限制披露（GitHub camo 限制、SMIL 不采样、外部字体不可用）、详细故障排查章节和测试方法论说明。扣分点：cost/性能限制仅部分披露（32 个 artifact 上限有提到），且文档声明无法与实际行为静态核对。
安装易用性 14/20: 安装路径非常清晰：npx -y nakkas@latest 一行即接入 Claude Desktop/Claude Code/Cursor/Zed，含各平台配置文件路径与本地开发步骤，零外部依赖、无需密钥。扣分：依赖 npx 拉取 npm 包（网络与供应链信任未讨论），npm 与 registry 版本一致性无法静态验证，故不给满分也不超 15 上限。

静态评测 · 未实际运行收录于 2026-09-08

查看 FMRS 评分方法 →

选型与风险

能访问什么写入 / 删除本地文件

适合谁

使用Claude、Cursor或Zed等支持MCP的AI助手
需要无需JavaScript的动画SVG的项目
希望在GitHub或网页上嵌入动画的用户
想要快速原型和迭代生成的矢量图形的设计师

不适合谁

需要JavaScript交互（如onclick）的SVG应用
使用外部字体且需要精确依赖的场景（GitHub不加载）
需要嵌入服务器端存储的长期持久化工件（工件仅存在于进程生命周期，最多32个）
需要复杂的多嵌套组结构（不支持嵌套组）

所需权限

本地文件系统写权限（用于save工具）
访问网络以下载或加载图像（如果指定URL）
运行本地服务器进程（stdio传输）

风险与副作用

save工具可覆盖文件（但自动添加计数器以避免覆盖）
设计可能无法在GitHub上正常显示，如果使用脚本或外部字体
大型或复杂动画可能导致输出过大
MCP客户端序列化问题可能导致验证错误

安装接入

准备工作

运行环境：Node.js 18+

在Claude Desktop配置文件中添加以下内容（macOS: ~/Library/Application Support/Claude/claude_desktop_config.json; Linux: ~/.config/Claude/claude_desktop_config.json; Windows: %APPDATA%\Claude\claude_desktop_config.json）:

{
"mcpServers": {
"nakkas": {
"command": "npx",
"args": ["-y", "nakkas@latest"]
}
}
}

使用Claude Code CLI:

claude mcp add nakkas npx nakkas@latest

或通过Git克隆并构建本地版本。

claude_desktop_config.json

{
  "mcpServers": {
    "nakkas": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}

以 Claude Desktop 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

{
  "servers": {
    "nakkas": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add nakkas -- npx -y nakkas@latest

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

在客户端配置中添加 nakkas（npx -y nakkas@latest）后重启客户端，工具列表中应出现 render_svg、preview、save 三个工具；也可以用 claude mcp add nakkas npx nakkas@latest 验证。

常见排障

MCP错误 -32602: 检查渐变类型（使用'linearGradient'或'radialGradient'而非'linear'或'radial'），关键帧偏移量必须为数字或'from'/'to'，颜色必须为十六进制，元素必须有'type'字段。
预览空白：检查元素是否有填充或描边，坐标是否在画布内，滤镜是否正确引用定义的滤镜。
GitHub上动画不工作：避免脚本和事件处理器，使用通用字体，避免CSS @import。
大输出：减少参数曲线的步数，使用minify: true。

试试这样问

连接成功后，可以直接对 AI 助手这样说：

制作一个动画 SVG：深色终端边框（800×200），带霓虹发光的青色文字 'NAKKAS'，加载时淡入。
创建一个加载动画：一个圆形，描边绘制动画，每 1.5 秒循环一次。
做一个个人资料徽章（400×120）：蓝紫渐变、白色用户名文字、投影和轻微的脉冲动画。
把 art-1 这个 artifact 保存为 ./design.svg。

工具能力 3

render_svg 写入

接受SVGConfig JSON，返回PNG预览+工件ID（+设计分析警告）。

preview 只读

将存储的工件（或原始SVG）以任意宽度重新渲染为PNG。

save 写入

将存储的工件（或原始内容）以SVG（文本）或PNG（光栅）格式保存到磁盘。

使用场景

创建动画SVG图形：标志、图标、加载动画、生成艺术

生成GitHub README横幅和徽章

创建数据可视化（如动画条形图）

快速迭代设计：渲染→预览→修改→保存

支持客户端

Claude Desktop

Claude Code

Cursor部分支持

Zed部分支持

依据项目文档列出，未经本站实测。

详细介绍

Nakkas是一个MCP服务器，让AI助手（如Claude）通过声明式JSON配置创建动画SVG图形：标志、图标、加载动画、GitHub README横幅、徽章和生成艺术。它使用CSS @keyframes和SMIL动画，无需JavaScript，输出可在GitHub README和任何渲染<img>标签的地方工作。每次渲染都返回PNG预览和服务器端工件ID，AI能立即看到自己的成果并迭代，无需将SVG文本传入上下文窗口。