--- name: artistic-svg-director description: >- Создавайте, рисуйте, дорабатывайте, проверяйте, рендерьте и визуально оценивайте сложные художественные SVG-иллюстрации: постеры, сцены, персонажей, орнаменты, логотипы, обложки, декоративную графику и векторные ассеты. Используйте, когда пользователь просит «нарисуй SVG», «сделай красивую векторную иллюстрацию», «улучши SVG», «проверь SVG», «перегони SVG в PNG», «оцени качество картинки», «собери безопасный SVG для сайта, документа, презентации или репозитория», включая PNG-рендер, мультимодальную художественную проверку, Node.js-валидацию и правку результата. metadata: author: Stanislav [MADTeacher] Chernyshev url: https://github.com/MADTeacher version: "1.0" --- # Художественный SVG-редактор Вы создаёте, правите и проверяете художественные SVG. Работайте как редактор векторной сцены: сначала замысел, затем слои, геометрия, цвет, PNG-рендер, визуальная критика и финальная сдача. ## Принцип 0 Самая дорогая ошибка — сдать красивый SVG без технической проверки и без просмотра PNG-рендера. Финальный результат проходит два контура: Node.js-скрипт проверяет безопасность и создаёт PNG, затем агент оценивает картинку визуально и правит SVG до приемлемого качества. ## Рабочий процесс 1. Определите тип задачи: новый SVG, правка существующего SVG, художественное улучшение, проверка безопасности, PNG-рендер, визуальная оценка или подготовка к вставке. 2. Снимите короткий бриф. Нужны сюжет, формат, стиль, настроение, место использования, ограничения, уровень детализации и желаемая палитра. Если данных мало, выберите безопасные творческие значения по умолчанию и назовите их в сдаче. 3. Если пользователь дал SVG, сохраните исходник отдельно. Не затирайте его первой правкой. 4. Выберите путь: быстрый эскиз, полноценная сцена, точечная правка, аудит риска, рендер с визуальной проверкой или подготовка финального файла. 5. Читайте только ресурсы из таблицы «Маршрутизация ресурсов». Верхний слой тут главный; references дают подробности, scripts дают проверяемые действия. 6. Стройте сцену слоями: `viewBox`, `title`, `desc`, `defs`, фон, крупные формы, средний план, детали, свет, фактура и акценты. 7. Запустите Node.js-проверку: `node .agents/skills/artistic-svg-director/scripts/svg_pipeline.mjs audit `. Если PNG-рендерер недоступен, запустите `validate` и честно скажите, что визуальный цикл не выполнен. 8. Откройте PNG-рендер и оцените его как изображение. Если модель видит картинку, используйте мультимодальную оценку по `references/visual-review-rubric.md`. Если модель не видит PNG, попросите пользователя открыть файл или приложить рендер. 9. Исправьте SVG по итогам оценки. Для сложной работы сделайте до двух циклов «SVG → PNG → критика → правка», затем сдайте файлы и проверки. ## Правила работы с входными данными - Если нет размера, используйте `viewBox="0 0 1200 800"` для горизонтальной сцены, `0 0 800 1200` для постера, `0 0 1024 1024` для квадратной иллюстрации и `0 0 512 512` для эмблемы. - Если пользователь просит стиль живого художника, замените запрос на нейтральное описание: эпоха, техника, палитра, ритм линий, плотность деталей и настроение. - Если пользователь просит точное сходство с человеком, товарным знаком или защищённым персонажем, уточните права либо предложите обобщённый образ. - Если текст должен попасть внутрь SVG, пишите его на русском языке, кроме кода, команд, названий файлов, API и терминов без удобного русского аналога. - Если пользователь просит PNG, PDF, анимацию или встраивание в сайт, обещайте только тот формат, для которого есть доступный инструмент и проверка. ## Маршрутизация ресурсов | Ситуация | Ресурс | Действие | Проверка | |---|---|---|---| | Новый художественный SVG, расплывчатый бриф или запрос «сделай красиво» | `references/art-direction-workflow.md` | Выбрать композицию, слои, палитру и критерии качества | Есть замысел, фокус, иерархия и ограничение по деталям | | Нужна визуальная оценка результата через PNG | `references/visual-review-rubric.md` | Оценить PNG как картинку и сформулировать правки для SVG | Правки привязаны к видимым дефектам, а не к вкусу вообще | | Нужны глубина, свет, фактура, маски, градиенты, фильтры или анимация | `references/svg-techniques.md` | Подобрать безопасные SVG-приёмы | Эффекты работают без внешних ресурсов и скриптов | | Получен чужой SVG, нужен веб-файл или есть подозрение на риск | `references/svg-safety.md` | Проверить опасные элементы, атрибуты и ссылки | Скрипты, события, `data:` и внешние загрузки отсутствуют | | Нужно писать ответ, подписи, комментарии или текстовые элементы по-русски | `references/russian-language-rules.md` | Проверить язык и убрать случайный английский текст | Текст звучит естественно и единообразно | | Проверка падает, рендер не создаётся, файл тяжёлый или сцена выглядит слабой | `references/troubleshooting.md` | Найти симптом, причину, действие и повторную проверку | Ошибка устранена и повторная команда проходит | | Создание файла с нуля без заданного размера | `assets/templates/artboard.svg` | Взять как стартовый самодостаточный холст | Шаблон проходит Node.js-валидацию | | Любой финальный SVG или правка существующего SVG | `scripts/svg_pipeline.mjs` | Запустить `validate`, `render` или `audit` | Команда завершается без ошибок; PNG создан при доступном рендерере | ## Ограничения и резервный путь - Не добавляйте `script`, `foreignObject`, `iframe`, `object`, `embed`, внешние `href`, `data:` и обработчики событий вида `onclick`. - Не вставляйте изображения, шрифты, стили или маски из сети. Сначала спросите пользователя либо замените их внутренними SVG-формами. - Не обещайте фотореализм. Для SVG выбирайте стилизованную векторную форму, выразительный силуэт, свет, ритм линий и ограниченную палитру. - Не растягивайте `SKILL.md` новыми справочниками. Если правило длинное и повторяемое, вынесите его в `references/` и добавьте маршрут. - Если Node.js недоступен, выполните ручную проверку из `references/svg-safety.md`, отдайте SVG как черновик и попросите среду с Node.js для финальной проверки. - Если PNG-рендерер недоступен, сдайте проверенный SVG и прямо напишите, что визуальная оценка по PNG не выполнена. ## Проверка - Проверьте YAML frontmatter: только `name` и `description`, имя совпадает с папкой `artistic-svg-director`. - Проверьте, что все routed resources существуют и не задают другие правила вместо этого файла. - Запустите `node .agents/skills/artistic-svg-director/scripts/svg_pipeline.mjs --smoke` после изменения скрипта. - Запустите `node .agents/skills/artistic-svg-director/scripts/svg_pipeline.mjs validate ` для каждого итогового SVG. - Для визуальной сдачи запустите `node .agents/skills/artistic-svg-director/scripts/svg_pipeline.mjs audit ` и просмотрите PNG. - Для сложной сцены выполните forward-testing по `test-prompts.json`; смотрите на поведение агента, SVG, PNG и проверки. ## Сдача результата Сообщите пользователю, какой SVG создан или исправлен, где лежат SVG и PNG, какая команда выполнена, что показала визуальная оценка и какие ограничения остались. Не пересказывайте внутренние references.