适合谁
- 使用Claude、Cursor或Zed等支持MCP的AI助手
- 需要无需JavaScript的动画SVG的项目
- 希望在GitHub或网页上嵌入动画的用户
- 想要快速原型和迭代生成的矢量图形的设计师
N
66FMRS · C
Nakkas是一个创新且功能丰富的MCP服务器，为AI生成动画SVG提供了高效的工作流程。其独特之处在于通过PNG预览和工件系统实现迭代优化，减少了上下文窗口的垃圾。服务器配置灵活，支持各种元素和动画类型，但用户需注意其局限性，如不支持嵌套组、外部字体和GitHub上的JavaScript。整体而言，这是一个高质量的工具，适合希望利用AI生成矢量图形的开发者。
Nakkas是一个MCP服务器，让AI助手（如Claude）通过声明式JSON配置创建动画SVG图形：标志、图标、加载动画、GitHub README横幅、徽章和生成艺术。它使用CSS @keyframes和SMIL动画，无需JavaScript，输出可在GitHub README和任何渲染<img>标签的地方工作。每次渲染都返回PNG预览和服务器端工件ID，AI能立即看到自己的成果并迭代，无需将SVG文本传入上下文窗口。
工具能力
render_svg
接受SVGConfig JSON，返回PNG预览+工件ID（+设计分析警告）。
preview
将存储的工件（或原始SVG）以任意宽度重新渲染为PNG。
save
将存储的工件（或原始内容）以SVG（文本）或PNG（光栅）格式保存到磁盘。
安装接入
在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"
]
}
}
}
选型与风险
不适合谁
- 需要JavaScript交互（如onclick）的SVG应用
- 使用外部字体且需要精确依赖的场景（GitHub不加载）
- 需要嵌入服务器端存储的长期持久化工件（工件仅存在于进程生命周期，最多32个）
- 需要复杂的多嵌套组结构（不支持嵌套组）
所需权限
- 本地文件系统写权限（用于save工具）
- 访问网络以下载或加载图像（如果指定URL）
- 运行本地服务器进程（stdio传输）
风险与副作用
- save工具可覆盖文件（但自动添加计数器以避免覆盖）
- 设计可能无法在GitHub上正常显示，如果使用脚本或外部字体
- 大型或复杂动画可能导致输出过大
- MCP客户端序列化问题可能导致验证错误
常见排障
- MCP错误 -32602: 检查渐变类型（使用'linearGradient'或'radialGradient'而非'linear'或'radial'），关键帧偏移量必须为数字或'from'/'to'，颜色必须为十六进制，元素必须有'type'字段。
- 预览空白：检查元素是否有填充或描边，坐标是否在画布内，滤镜是否正确引用定义的滤镜。
- GitHub上动画不工作：避免脚本和事件处理器，使用通用字体，避免CSS @import。
- 大输出：减少参数曲线的步数，使用minify: true。
使用场景
创建动画SVG图形：标志、图标、加载动画、生成艺术
生成GitHub README横幅和徽章
创建数据可视化（如动画条形图）
快速迭代设计：渲染→预览→修改→保存
支持客户端
Claude Desktop完整支持
Claude Code完整支持
Cursor部分支持
Zed部分支持