svg-art — скилл для Claude Code: генерация SVG из Python-скриптов
Скилл для генерации SVG-графики кодом: иконки, паттерны, фракталы, диаграммы и графики через исполняемые Python-скрипты.
npx skills add kv0906/cc-skills --skill svg-art -a claude-codeЧто делает svg-art
Скилл svg-art подключает к агенту набор Python-скриптов, которые создают SVG-файлы программно. Восемь инструментов закрывают разные задачи: сетки, радиальные и спиральные узоры, фракталы (дерево, кривая Коха, треугольник Серпинского), волны, частицы, диаграммы и готовые UI-иконки. Отдельный скрипт optimize_svg.py сжимает уже существующий SVG.
Скрипты принимают параметры через флаги: количество колонок и строк, форму элементов, вариацию размера, прозрачности и оттенка, глубину фрактала, данные для графика. Есть --seed для воспроизводимой случайности. Результат уходит в stdout или в файл через -o. Скрипты можно соединять конвейером: сгенерировать сетку и тут же прогнать через оптимизатор.
Для работы нужен Python — скрипты исполняемые, и агент запускает их напрямую. Если в проекте нет Python в окружении, скилл не сработает. В репозитории есть справочник references/svg-fundamentals.md по структуре SVG, элементам, путям, градиентам и требованиям доступности.
Какие задачи решает
- сгенерировать сетку из кругов с вариацией размера и прозрачности
- построить фрактальное дерево заданной глубины
- сделать столбчатую или кольцевую диаграмму из набора чисел
- собрать созвездие из точек с соединениями по расстоянию
- сжать готовый SVG-файл и посмотреть статистику оптимизации
Примеры запросов агенту
- сгенерируй спиральный паттерн из 60 точек на 4 оборота и сохрани в spiral.svg
- сделай столбчатую диаграмму по данным 30,50,80,45,90 с подписями A,B,C,D,E
- оптимизируй input.svg в агрессивном режиме и выведи статистику
Как установить svg-art
1Через Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a claude-code2Вручную: положить файлы
~/.claude/skills/svg-art/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/svg-art/
1Через Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a codex2Вручную: положить файлы
.agents/skills/svg-art/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a cursor2Вручную: положить файлы
.cursor/skills/svg-art/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install kv0906/cc-skills svg-art2Вручную: положить файлы
.github/skills/svg-art/SKILL.md1Через Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a gemini-cli2Командой платформы
gemini skills install https://github.com/kv0906/cc-skills --path skills/svg-artВручную: положить файлы
.devin/skills/svg-art/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add kv0906/cc-skills --skill svg-art -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о svg-art
Как установить svg-art в Claude?
Выполните npx skills add kv0906/cc-skills --skill svg-art -a claude-code. Скилл появится в ~/.claude/skills/svg-art/SKILL.md.
Что делает svg-art?
Создаёт SVG-графику через Python-скрипты: иконки, логотипы, паттерны, фракталы, волны, диаграммы и визуализации данных. Каждый скрипт выдаёт готовый SVG в stdout или в файл.
Чем оптимизировать существующий SVG?
Скриптом optimize_svg.py — он принимает файл на вход и умеет сжимать в агрессивном режиме. Флаг --stats показывает статистику оптимизации.
