Почему инфографика от нейросети выглядит как мусор и как я это исправила без дизайнера

Нашла на GitHub скилл для инфографики, и через полчаса у меня на сайте висели 19 картинок в восьми статьях, на русском и на английском. Claude я написала 11 сообщений, графический редактор ни разу не открывала.

Но пишу я не про картинки. По дороге выяснилось, что «нарисуй инфографику» — это на самом деле три разные задачи, и если сваливать их в одну, нейросеть выдаёт ровно тот визуальный шум, за который её инфографику и не любят. Ниже шесть шагов в том порядке, в каком я их делала, и правила, которые убрали мусор.

Оговорюсь: я маркетолог, не дизайнер и не разработчик. Код писал Claude, моя часть — поставить задачу и принять результат.

Шаг 1. Проверить чужой инструмент до установки

Скилл называется EpicInfographics: собирает инфографику как веб-страницу и превращает её в PNG, внутри двенадцать стилей. Но скилл из интернета — это инструкции, которые нейросеть выполняет у вас на компьютере. Поэтому ставить вслепую я не стала:

Хочу протестировать этот скилл: <ссылка на GitHub>. Проверь его на безопасность и установи глобально, если всё чисто.

Claude за минуту поискал в коде отправку данных наружу, обращения к ключам и личным файлам, спрятанные команды в описаниях. Чисто, поставил.

Шаг 2. Первая картинка: прикольно, но не моё

Дала ссылку на свою статью про алгоритм Threads* и попросила нарисовать инфографику. Получила шесть картинок, все цифры честно из статьи.

К моему сайту это вообще никак: клетчатая бумага, кобальтовая ручка, пометки от руки. Деталей столько, что взгляд не понимает, куда смотреть. Чужой инструмент приносит чужой вкус, и это нормально, он написан под всех.

Шаг 3. Перекрасить в свой стиль

Можешь изменить визуальный стиль на мой фирменный? Цвета, шрифты, отступы и прочее.

Шесть минут. Но не потому, что нейросеть такая умная: мой стиль уже лежал в файле — палитра, шрифты, знак бренда, правило «один акцентный цвет на материал». Claude его прочитал и переписал оформление. Заодно картинки похудели в восемь раз, с 1,4 МБ до 170 КБ.

И тут главное наблюдение всей истории: шум остался на месте. Надзаголовок, подзаголовок, две оси, пометки курсивом, сноска внизу. Я так и написала: выглядит как мусор.

Стиль и вёрстка — две разные задачи. Перекраска не делает картинку читаемой. Это как отдать макет в брендбук-цвета и удивиться, что он всё ещё перегружен.

Шаг 4. Вёрстка — отдельной задачей

У меня стоит отдельный скилл UI/UX-дизайнера с базой правил вёрстки и читаемости. Его и подключила:

Подключи скилл UI/UX и проверь вёрстку. На инфографике должно быть меньше элементов и разных шрифтов, чтобы читалось нормально. Сейчас выглядит как мусор.

Причина шума оказалась чистой арифметикой. Картинка рисуется шириной 1920 пикселей, а в колонке статьи занимает около 720, то есть сжимается в 2,7 раза. Мелкие подписи у читателя превращались в текст размером 9 пикселей. Элементов на картинке было больше 30, разных размеров текста — до восьми.

Из этого выросли правила:

1. Одна картинка — одна мысль. Заголовок сразу говорит вывод, график его доказывает.
2. Не больше 9 элементов данных. Остальное пусть живёт в тексте.
3. Три размера текста: заголовок, подпись, подпись помельче. Плюс одна крупная цифра, если она главная.
4. Ничего мельче 36 пикселей на холсте шириной 1920 — после сжатия это нормальные 13–14.
5. Выкинуть надзаголовки, пояснения про методику, сноски, оси с делениями, легенды и пометки от руки. Подпись ставится прямо у полосы.

Всё это я попросила сохранить как свой скилл — с моим стилем, правилами читаемости и шаблоном. Теперь инфографика в фирменном виде рисуется одной фразой.

Шаг 5. Проверить, что графики не врут

Полосы рисует нейросеть. Если «−22%» нарисовать длиннее, чем «−25%», читатель поверит картинке, а не цифре. Я спросила, как это проверить, и Claude добавил две проверки:

1. Цифры сверяются со статьёй. Если на картинке есть число, которого нет в тексте, сборка останавливается.
2. Пропорции меряются на готовой картинке, допуск 1%.

Проверку испытали на нарочно испорченной картинке — растянули полосу на 7%, скрипт поймал. А потом нашлась настоящая неточность: доли на одной картинке были вписаны руками, 24% и 76%, а по исходным данным выходит 23,6% и 76,4%. Перерисовали.

Шаг 6. Весь блог — только в самом конце

Когда одна статья получилась, я отдала Claude весь блог и попросила не выкатывать сразу, а показать мне страницу с предложениями: где картинка, какой кусок текста до и после. Листала глазами и по ходу добавила ещё два правила.

Только точные цифры. Никаких «примерно», «треть», «половина», «вдвое». Картинку к статье, где точных цифр нет, просто убрали.

Одна тема на статью. Светлая, тёмная и песочная картинки вперемешку смотрелись сумбурно — теперь внутри статьи все графики на одном фоне.

Осталось 19 картинок, Claude сделал английские версии и выкатил сайт.

Почему это заняло полчаса, а не неделю

Волшебного промта нет, вы их все видели — короткие, как обычные сообщения. Скорость дали три вещи.

Окружение было готово заранее. Стиль лежал в файле, скилл дизайнера стоял. Без файла со стилем нейросеть нарисовала бы «что-то в тёплых тонах», и мы бы долго спорили.

Порядок шагов. Одна статья → стиль → вёрстка → свой скилл → проверка точности → весь блог. Начни я с «нарисуй инфографику ко всему блогу» — получила бы 19 шумных картинок в чужом стиле и переделывала бы каждую руками.

Правки превращаются в правила. Если что-то не нравится, я не правлю картинку, а формулирую правило и кладу его в скилл. Поправленная картинка помогает один раз, правило работает всегда.

Памятка: как повторить

1. Найти готовый скилл и попросить нейросеть проверить его на безопасность до установки.
2. Сделать инфографику к одной статье, не ко всему блогу.
3. Перекрасить в свой стиль. Если стиль нигде не записан — взять с сайта: цвета, шрифты, отступы.
4. Отдельной задачей почистить вёрстку: одна мысль, до 9 элементов, три размера текста, ничего мельче 36 пикселей.
5. Сохранить результат как свой скилл.
6. Добавить проверку: цифры сверяются с текстом, пропорции меряются на картинке.
7. Пройтись по всему блогу через страницу предложений и только потом выкатывать.

Полная версия с промтами для каждого шага и бонусом про тёмную тему — в моём блоге. Такие кейсы разбираю в Telegram-канале «Надя Пак || AI-native PMM».

*Threads — продукт компании Meta, признанной экстремистской и запрещённой в РФ.