arikusi/nakkas

arikusi/nakkas

от arikusi
Nakkas - MCP сервер, который даёт ИИ возможность создавать анимированные SVG: от простых иконок до сложной инфографики. Сервер генерирует чистый SVG с CSS и SMIL анимациями без внешних зависимостей, работая локально.

nakkas

MCP server that turns AI into an SVG artist.
One rendering engine. AI decides everything.

npm version downloads license Marketplace

Officially listed on the MCP Registry, Glama, LobeHub, and PulseMCP.

Official MCP Registry LobeHub Ask DeepWiki

Glama Badge

nakkaş means painter/artist in Turkish (old).

"make a neon terminal logo with animated binary digits"
  → AI constructs JSON config
  → nakkas renders to animated SVG
  → clean animated SVG output

Why

  • One tool, infinite designs. render_svg takes a JSON config. AI fills in everything.
  • AI-native schema. Every field has .describe() annotations so the model knows what to do.
  • Pure declarative SVG. CSS @keyframes + SMIL animations, no JavaScript.
  • Zero external deps. No cloud API, no API keys. Runs locally.

Install

Claude Desktop

Add to your config file:

  • 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"]
    }
  }
}
Инструменты были проиндексированы:
preview

Преобразует содержимое SVG в PNG-изображение, чтобы ИИ мог визуально проверить результат. Когда использовать: - render_svg уже возвращает изображение для предпросмотра по умолчанию; вызывайте этот инструмент, чтобы повторно просмотреть сохранённый артефакт с другой шириной, или для предпросмотра SVG, который не получен от render_svg. - Прекращайте итерации, когда визуальный результат соответствует замыслу. Входные данные: передайте ЛИБО artifact (идентификатор из render_svg, например "art-1" - предпочтительно, не нужно повторно отправлять SVG), ЛИБО content (строка с сырым SVG). Поведение: - Возвращает PNG-изображение (base64), отрендеренное из SVG. - Фон прозрачный по умолчанию. - CSS-анимации и SMIL рендерятся как статический снимок (t=0) - движение не захватывается. Ширина: - Опустите ширину, чтобы использовать собственную объявленную ширину/viewBox SVG. - Передайте ширину, чтобы масштабировать результат (полезно для маленьких SVG, которым нужен увеличенный предпросмотр).

Предварительный просмотр SVG

Параметры
  • artifactstring

    Artifact id returned by render_svg (e.g. "art-1"). Preferred over content.

  • contentstring

    SVG string to render as PNG. Only needed when no artifact id exists.

  • formatenum

    Content format; auto-detected from content if omitted

  • widthnumber

    Render width in pixels; defaults to SVG's own declared width

render_svg

Преобразует анимированный SVG из JSON-конфига. ИИ управляет всеми параметрами дизайна. Рабочий процесс: render_svg возвращает PNG-превью результата и идентификатор артефакта — оцените изображение, исправьте конфиг, снова отрендерьте. Итерируйте как минимум 3 раза перед финализацией. Текст SVG остаётся на сервере: передайте идентификатор артефакта в save (и в preview для другой ширины). Параметры вывода (форма ответа, не содержимое): {"svg":false,"preview":true,"previewWidth":800,"minify":false,"frames":4} — все необязательны. minify:true сжимает пробелы в сохранённом SVG. frames:N (2-10) заменяет статическое превью на один кадр-плёнку, сэмплирующую CSS-анимации в N моментов времени — используйте для проверки движения (направление вращения, тайминг, easing), так как одно превью показывает только t=0. SMIL не сэмплируется. Типы элементов: rect, circle, ellipse, line, polyline, polygon, path, image, text, textPath, group, use, radial-group, arc-group, grid-group, scatter-group, path-group, parametric Группы-паттерны (для повторяющихся дизайнов): radial-group (круговое: cx, cy, radius, count), arc-group (дуга: cx, cy, radius, count, startAngle, endAngle), grid-group (матрица: cols, rows, colSpacing, rowSpacing), scatter-group (случайное: width, height, count, seed), path-group (вдоль ломаной: waypoints, count). Каждая принимает ОДИН дочерний элемент. Дочерний элемент рисуется в локальном начале координат и, при rotateChildren true (по умолчанию), поворачивается так, чтобы локальная ось +x была направлена наружу от центра: рисуйте спицы, лучи и лепестки длинными вдоль оси x, никогда вдоль оси y, иначе они отобразятся как кольцо из хорд. Параметрические кривые (поле fn): rose, heart, lissajous, spiral, star, superformula, epitrochoid, hypotrochoid, wave. Размер задаётся полем "scale". Сервер вычисляет координаты. defs: градиенты (линейные/радиальные, SMIL-анимированные остановки), фильтры (пресеты: glow, neon, blur, drop-shadow, glitch, chromatic-aberration, noise, outline, inner-shadow, emboss + ещё 5), clipPaths, masks, patterns (заливки-плитки), markers (наконечники стрелок: triangle, arrow,…)

Рендерит SVG

Параметры
  • animationsobject[]
  • canvasobjectобязательный
  • defsobject
  • elementsunknown[]обязательный
  • outputobject
save

Сохраняет отрисованный контент на диск. Учитывает формат: сохраняет как текст или отрисовывает в растровое изображение. ВАЖНО: Используйте это ТОЛЬКО ПОСЛЕ итераций по дизайну с preview-изображениями render_svg. Не сохраняйте при первом отрисовывании. Сначала просмотрите и доработайте. Ввод: передайте ЛИБО артефакт (id из render_svg, например "art-1" - предпочтительно, без повторной отправки SVG), ЛИБО контент (сырую строку). Определение формата: - 'auto' (по умолчанию): определяет формат по расширению файла. .svg сохраняет как текст, .png отрисовывает в изображение. - 'svg': сохраняет контент как текстовый файл в UTF-8 - 'png': отрисовывает контент (предположительно SVG) в PNG-изображение, затем сохраняет его Если файл уже существует, перед расширением добавляется числовой счетчик, чтобы предотвратить перезапись: design.svg становится design-1.svg, затем design-2.svg. Фактический путь сохранения возвращается в ответе.

Сохраняет содержимое

Параметры
  • artifactstring

    Artifact id returned by render_svg (e.g. "art-1"). Preferred over content.

  • contentstring

    Raw content to save. Only needed when the content did not come from render_svg.

  • formatenum

    Output format. 'auto' infers from file extension (.svg saves as text, .png renders to image). 'svg' saves content as a UTF-8 text file. 'png' renders SVG content to a PNG image before saving.

  • outputPathstringобязательный

    File path to save to. The directory must already exist. If the file already exists, a numeric counter is appended before the extension: design.svg becomes design-1.svg, then design-2.svg, and so on. The actual saved path is returned in the response.

  • widthnumber

    For raster formats (png): render width in pixels. Defaults to the source content's own declared dimensions.

Похожие MCP-сервера

GenWaveLLC/svgmaker-mcp

GenWaveLLC/svgmaker-mcp

SVGMaker MCP сервер на базе ИИ: генерирует, редактирует и конвертирует SVG по текстовому описанию. Подходит дизайнерам и разработчикам: создавайте векторную графику, редактируйте естественным языко...

TypeScript87
albertnahas/icogenie-mcp

albertnahas/icogenie-mcp

MCP сервер @icogenie/mcp дает AI-агентам генерировать SVG-иконки по тексту. Помогает разработчикам быстро создавать иконки для интерфейсов в Claude. Поддерживает пакетную работу, библиотеку и ежедневные кредиты.

TypeScript6
botmonster/image2svg-mcp

botmonster/image2svg-mcp

MCP-сервер для конвертации растровых изображений в SVG. Работает с PNG, JPG, WEBP, принимает base64 или URL, даёт полный контроль над параметрами векторизации. Идеален для автоматизации дизайна и п...

Python5
Explorer-64/imagcon-mcp

Explorer-64/imagcon-mcp

Imagcon MCP-сервер генерирует полные наборы PWA-иконок и iOS-сплэш-скринов через API. Подходит разработчикам, автоматизирующим иконки для веб-приложений: AI-генерация, ресайз, manifest.json — всё л...

Python1
diivi/aseprite-mcp

diivi/aseprite-mcp

MCP-сервер для полного управления Aseprite через AI-ассистентов. Содержит 104 инструмента для создания пиксель-арта и анимаций: холст, рисование, слои, палитры, эффекты и экспорт. Автоматизируйте р...

Python529
kenneives/design-token-bridge-mcp

kenneives/design-token-bridge-mcp

MCP сервер для трансляции дизайн-токенов: извлекает из Tailwind, CSS, Figma или W3C DTCG и генерирует темы под Kotlin, SwiftUI, Tailwind и CSS-переменные. Полезен разработчикам и дизайнерам в пайплайне v0 → Figma → Claude Code.

TypeScript5
© Каталог MCP, 2026. Все права защищены.
Проект не аффилирован с Anthropic и любыми упомянутыми продуктами.
Все названия и торговые марки принадлежат их владельцам.
Контакты для связи: hi@mcp-katalog.ru

Лука Никитин