Spotkit — скилл
Скилл пишет SVG-иллюстрации функций продукта вручную: одно семейство по правилам SPEC.md, одна палитра для светлой и темной темы.
- 104 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл пишет SVG-файлы и запускает локальные Python-скрипты проверки.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/spotkitОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл пишет SVG-файлы и запускает локальные Python-скрипты проверки.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Spotkit превращает описание функции в абстрактную иллюстрацию продукта в виде настоящего SVG. Агент называет, о какой связи идет речь (группировка, доступ, последовательность), выбирает метафору и один из двенадцати макетов и затем пишет код вручную, без генератора изображений. Иллюстрация абстрагирует интерфейс, а не идею: остаются узнаваемые части, остальное убрано. Для темы хватает двенадцати CSS-переменных, а один файл работает и в светлой, и в темной теме. Проверочный скрипт `check.py` находит вторую толщину линии, лишнюю тень, фон и текст.
Для кого. Дизайнерам и разработчикам продуктов, которым нужны единообразные иллюстрации для пустых состояний, документации и страниц функций.
Подходит, если
- Для страницы функции «API gateway» нужна иллюстрация в стиле остальных.
- Набор из двадцати картинок должен выглядеть как одно семейство.
- Иллюстрацию надо вставить в Figma слоями, а не растром.
- Сайт переключает темы, и картинка должна менять цвета без второго файла.
Не подходит, если
- Нужен фотореализм или сложная иллюстрация-повествование.
- Картинку подключают через `<img src>`, и темы должны работать без плоских копий.
- Нужен скриншот самого продукта.
Пример запроса к агенту
Сделай иллюстрацию для управления версиями API: подбери метафору, макет и выдай готовый SVG.Ограничения
Стиль узкий: тонкие линии, одна толщина штриха, одна тень и иконки Phosphor, а текста внутри иллюстрации нет. CSS-переменные не работают, если SVG вставлен через `<img>` или `<object>`: нужен инлайн либо плоские файлы из `examples/flat/`. Если на странице несколько иллюстраций, в каждой иллюстрации `id` получает свой суффикс, иначе маски и фильтры перекроются. Фильтры SVG Figma при вставке отбрасывает, и тень придется добавить заново.
Как отключить. Удалите папку `~/.claude/skills/spotkit` (для Codex `~/.agents/skills/spotkit`) и перезапустите агента. Уже сделанные SVG остаются в проекте.
Частые вопросы
Почему SVG, а не картинка от нейросети?
Стиль состоит из геометрии: тонкие линии, точные радиусы, один набор иконок. Модель пишет SVG напрямую, поэтому результат точный, редактируемый и одинаковый по всему набору.
Как включить скилл в Codex?
Клонируйте репозиторий в `~/.agents/skills/spotkit` и перезапустите Codex. Вызвать можно по имени: `$spotkit an illustration for audit logs`.
Как перенести иллюстрацию в Figma?
Скопируйте содержимое файла из `examples/flat/light/` и вставьте на холст: слои останутся векторными.
Какие зависимости нужны?
Только Python 3, и то для пересборки или `check.py`.
Как проверить готовый SVG?
Командой `python3 check.py my-feature.svg`: она находит вторую толщину линии, лишнюю тень, фон, текст и неуникальные `id`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл рисует интерактивные изометрические иллюстрации в SVG: шейдеры WebGL, страница HTML или компонент React, идея объясняется работающим устройством
Скилл генерации научных иллюстраций: 24 шаблона схем и плакатов для биологии, химии, физики, инженерии и математики.
Скилл превращает растровый логотип в чистый SVG и собирает анимацию логотипа в виде готового HTML с проверкой движения
Скилл для научных статей: векторные схемы в SVG и PDF вместе с кодом, который их рисует, чтобы править любой элемент.
Скилл собирает готовые промпты для рисунка в ручной технике по набору проверенных стилей: детский рисунок, минимальная линия, восковые мелки, стиль Гибли и друг
Скилл генерирует одноцветные и двухцветные редакционные постеры: бумажная подложка, полутон, воздух и сдержанная типографика
Коротко о README
В галерее `examples/gallery.html` двенадцать иллюстраций в светлой и темной теме. Правила лежат в `SPEC.md`, а `AGENTS.md` подсказывает прочим агентам, что читать.