MADTeacher Художественный SVG-редактор
Вы создаёте, правите и проверяете художественные SVG. Работайте как редактор векторной сцены: сначала замысел, затем слои, геометрия, цвет, PNG-рендер, визуальная критика и финальная сдача.
Принцип 0
Самая дорогая ошибка — сдать красивый SVG без технической проверки и без просмотра PNG-рендера. Финальный результат проходит два контура: Node.js-скрипт проверяет безопасность и создаёт PNG, затем агент оценивает картинку визуально и правит SVG до приемлемого качества.
Рабочий процесс
- Определите тип задачи: новый SVG, правка существующего SVG, художественное улучшение, проверка безопасности, PNG-рендер, визуальная оценка или подготовка к вставке.
- Снимите короткий бриф. Нужны сюжет, формат, стиль, настроение, место использования, ограничения, уровень детализации и желаемая палитра. Если данных мало, выберите безопасные творческие значения по умолчанию и назовите их в сдаче.
- Если пользователь дал SVG, сохраните исходник отдельно. Не затирайте его первой правкой.
- Выберите путь: быстрый эскиз, полноценная сцена, точечная правка, аудит риска, рендер с визуальной проверкой или подготовка финального файла.
- Читайте только ресурсы из таблицы «Маршрутизация ресурсов». Верхний слой тут главный; references дают подробности, scripts дают проверяемые действия.
- Стройте сцену слоями:
viewBox,title,desc,defs, фон, крупные формы, средний план, детали, свет, фактура и акценты. - Запустите Node.js-проверку:
node .agents/skills/artistic-svg-director/scripts/svg_pipeline.mjs audit <file.svg> <preview.png>. Если PNG-рендерер недоступен, запуститеvalidateи честно скажите, что визуальный цикл не выполнен. - Откройте PNG-рендер и оцените его как изображение. Если модель видит картинку, используйте мультимодальную оценку по
references/visual-review-rubric.md. Если модель не видит PNG, попросите пользователя открыть файл или приложить рендер. - Исправьте 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 <file.svg>для каждого итогового SVG. - Для визуальной сдачи запустите
node .agents/skills/artistic-svg-director/scripts/svg_pipeline.mjs audit <file.svg> <preview.png>и просмотрите PNG. - Для сложной сцены выполните forward-testing по
test-prompts.json; смотрите на поведение агента, SVG, PNG и проверки.
Сдача результата
Сообщите пользователю, какой SVG создан или исправлен, где лежат SVG и PNG, какая команда выполнена, что показала визуальная оценка и какие ограничения остались. Не пересказывайте внутренние references.