nakkas — MCP-сервер для Claude Code: что делает и как установить
Генерирует анимированные SVG по JSON-описанию без JavaScript. Присылает PNG-превью ассистенту для быстрой доработки макета.
claude mcp add nakkas -- npx -y nakkasЧто делает nakkas
Инструмент превращает языковую модель в векторного иллюстратора. Ассистент передаёт серверу декларативный JSON-конфиг, а nakkas собирает SVG с анимациями на чистом CSS @keyframes или SMIL. Никакого JavaScript внутри графики нет. Поэтому готовые файлы без проблем отображаются в тегах <img> и работают в README.md на GitHub в обход ограничений camo-прокси.
Во время генерации модель получает в ответ готовое PNG-превью и идентификатор артефакта вроде art-1. Модель видит результат правок своими глазами и корректирует параметры. Текст векторного файла не забивает контекстное окно, экономя токены при частых правках. В памяти сервер держит до 32 артефактов одновременно, вытесняя старые при заполнении.
Для работы предусмотрены три инструмента: render_svg, preview для масштабирования и save для записи на диск в SVG или PNG. Если файл с таким именем уже существует, сервер автоматически допишет к имени числовой счётчик. Внешние ключи API не нужны, процесс крутится локально через Node.js.
Какие задачи решает
- создавать анимированные спиннеры загрузки и бейджи для интерфейсов
- рендерить векторные баннеры со стилями CSS для GitHub README
- дорабатывать графику по шагам с визуальным PNG-контролем
- сохранять сгенерированные макеты на диск в векторном или растровом виде
Примеры запросов агенту
- Сделай тёмную плашку 800 на 200 с неоновой надписью NAKKAS и плавной анимацией появления
- Собери круговой спиннер загрузки с зацикленной анимацией обводки на полторы секунды
- Сохрани текущий макет art-1 в файл logo.svg в корне проекта
Как установить nakkas
Командой платформы
claude mcp add nakkas -- npx -y nakkasКомандой платформы
codex mcp add nakkas -- npx -y nakkasФайл настроек
{
"mcpServers": {
"nakkas": {
"command": "npx",
"args": [
"-y",
"nakkas"
]
}
}
}Файл настроек
{
"servers": {
"nakkas": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"nakkas"
]
}
}
}Командой платформы
gemini mcp add nakkas npx -y nakkasПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о nakkas
Как установить nakkas в Claude Code?
Выполните команду claude mcp add nakkas -- npx -y nakkas. Пакет запустится локально через npx без предварительного клонирования репозитория.
Зачем нужен локальный рендеринг через nakkas?
Он отдаёт модели растровый снимок и сохраняет разметку в артефактах на сервере. Ассистент сразу видит геометрию и не тратит контекст на громоздкий текст SVG.
Будут ли анимации работать на GitHub?
Да, графика использует чистые правила CSS @keyframes и SMIL без скриптов. Такие файлы успешно проходят через кэширующий прокси GitHub.
