Как делать инфографику в Claude, чтобы она не выглядела как мусор

Шаг 1. Проверить скилл, прежде чем ставить

Скилл называется EpicInfographics. Он собирает инфографику как веб-страницу и превращает её в PNG, умеет ещё ролики MP4 и анимации GIF. Стилей оформления внутри двенадцать.

Скилл из интернета — это инструкции, которые Claude будет выполнять у вас на компьютере. Поэтому ставить вслепую я не стала, сначала попросила проверить.

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

Ушла на это примерно минута. Claude скачал репозиторий и поискал в коде всё подозрительное: отправку данных наружу, запуск чужих команд, обращения к ключам и личным файлам, а в описаниях — спрятанные команды для самого Claude. Ничего не нашёл. Из интернета скилл тянет только шрифты Google, а его скрипты просто делают из страницы картинку. Дальше Claude его установил и собрал пробную картинку на примере.

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

Дала ссылку на свою статью про алгоритм Threads и попросила нарисовать инфографику. Claude уточнил, что именно показывать, и прислал шесть картинок, по одной на каждый большой раздел.

Получилось прикольно, и все цифры честно из статьи. Но к моему сайту это вообще никак: клетчатая бумага, кобальтовая ручка, пометки от руки. И деталей столько, что взгляд не понимает, куда смотреть. Плюс каждая картинка весила 1,4 МБ, для статьи многовато.

Чужой скилл приносит чужой вкус, и это нормально, он же написан под всех. Дальше надо было сделать его своим.

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

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

Шесть минут. И дело не в том, что Claude такой умный: мой стиль уже лежал в файле. Палитра, шрифты, знак бренда, правила вроде «один акцентный цвет на материал». Я собирала этот файл раньше для каруселей и презентаций, про него есть отдельная статья о дизайн-системе без дизайнера. Claude его прочитал и переписал оформление, а шрифты с кириллицей взял из моей программы для постов, там они уже были.

Цвета стали мои, картинки похудели в восемь раз, с 1,4 МБ до 170 КБ. Только посмотрите внимательно: шум остался на месте. Надзаголовок, подзаголовок с пояснением, две оси, пометки курсивом, сноска внизу. Я так Claude и написала: выглядит как мусор.

Для меня это самый полезный вывод всей истории: стиль и вёрстка — две разные задачи. Перекраска не делает картинку читаемой, поэтому ставить их надо отдельно.

Шаг 4. Позвать дизайнера: вёрстка и правила

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

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

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

Из этого выросли правила, они теперь живут в моём скилле:

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

Главный график превратился в обычный список приёмов от частых к редким: у каждого полоса от нуля, минус влево, плюс вправо. Вот он рядом с первой версией.

В том же сообщении я попросила сохранить всё это отдельным скиллом.

Зафиксируй это как новый скилл nadia_infographics. Для других проектов будем стилизовать иначе.

Внутри теперь правила читаемости, мой стиль, подсказка, какой график брать под какую мысль, шаблон со шрифтами и образец. В описании прямым текстом сказано, что скилл только для моего бренда. Для других проектов остаётся исходный EpicInfographics со своими стилями.

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

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

Нужно убедиться, что графики нарисованы математически точно. Как это сделать? Может, взять питон-библиотеку для графиков? Или в скилле это уже есть?

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

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

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

Библиотеку графиков в итоге брать не стали. Точности она не добавит, это делает проверка, а мой стиль в ней пришлось бы собирать заново.

Шаг 6. Пройтись по всему блогу

Когда одна статья получилась, я отдала Claude весь блог.

Посмотри мой блог и там, где уместно, вставь инфографику: <ссылка на блог>.
Отдельно покажи мне HTML, кусок текста до или после, сам график и название статьи. Я быстро посмотрю предложения, потом задеплоим.

Вскоре у меня была страница для просмотра: 20 мест в 8 статьях. У каждого места название статьи, раздел, кусок текста до и после, картинка в ширину колонки, как её увидит читатель, и готовый HTML с кнопкой «Скопировать». В двух статьях Claude картинок не предложил: там просто нет цифр, которые можно честно сравнить.

Листала я глазами и по ходу добавила ещё два правила.

В инфографике должны быть чёткие цифры. Если их нет, то нельзя писать «примерно», «треть» и прочее.

Только точные цифры. На одной картинке было «каждая двенадцатая вакансия», на другой «у половины постов меньше 343», а внизу картинки про реплаи — «ответ слабее поста втрое, ответов в 10 раз больше». Слова вместо чисел я запретила: «примерно», «треть», «половина», «вдвое». Теперь там «39% из них — ИИ обязателен», «медиана — 343 просмотра» и «средний пост — 805 просмотров, ответ — 263, но ответов 576, а постов 58», это видно на картинке выше. Картинку про кастдев вообще убрали: в той статье нет точных цифр, одни «половина» и «треть», значит, и графику там делать нечего. Одно исключение всё-таки оставила: число со знаком «~», если оно так записано в самой статье. Порядок цифр понятен, и это честная оценка.

Одна тема на всю статью. Сначала картинки внутри статьи чередовались: светлая, тёмная, песочная. Смотрелось сумбурно. Теперь в одной статье все графики на одном фоне, а между статьями фон выпадает случайно.

Осталось 19 картинок. Я написала «деплой, не забудь перевод для EN-версии». Claude сделал английские копии для всех статей, у которых есть английская версия, вставил их так, чтобы при переключении языка менялись и картинки, выкатил сайт и проверил каждую статью на обоих языках. Все 35 файлов на месте.

Бонус: второй блог, где тема переключается сама

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

Первая реакция у меня была скептическая: «Как картинка может меняться вместе с темой сайта? Подстановка картинок? Это же утяжелит страницы». Оказалось, нет. Для этого в HTML есть тег <picture>: браузер сам смотрит, какая тема у читателя, и скачивает только одну подходящую версию. Вторая лежит на сервере и не грузится, так что читатель получает одну картинку, как и раньше.

Отдельной дизайн-системы у сайта курса нет, и она не понадобилась: скилл взял стиль прямо с лендинга, те же цвета, шрифты и отступы. Рамка 2 пикселя задаётся стилем страницы, а не рисуется на картинке, поэтому в тёмной теме она сама темнеет. Под это я сделала отдельный скилл, course_infographics, по той же схеме, что и первый. В итоге 8 картинок в 6 статьях. Живой пример — статья «Заменит ли ИИ маркетолога»: переключите тему на телефоне или компьютере, и график поменяется вместе со страницей.

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

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

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

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

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

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

Порядок, который можно повторить

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

Частые вопросы

Можно ли сделать инфографику для статьи в Claude без дизайнера? Да. Скилл EpicInfographics собирает инфографику как веб-страницу и превращает её в PNG, ролик MP4 или GIF. Дальше его можно перенастроить под свой фирменный стиль и правила вёрстки и сохранить как собственный скилл. У меня на это ушло полчаса вместе с выкаткой 19 картинок на сайт.

Безопасно ли ставить скиллы с GitHub? Скилл — это инструкции и скрипты, которые выполняются на вашем компьютере, поэтому перед установкой его стоит проверить. Достаточно попросить Claude: «проверь скилл на безопасность и установи, если всё чисто». Он посмотрит, не отправляет ли код данные наружу, не трогает ли ключи и личные файлы и нет ли в описаниях скрытых команд для самой модели.

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

Как проверить, что нейросеть нарисовала график без ошибок? Двумя автоматическими проверками. Первая сверяет каждое число на картинке с текстом статьи и останавливает сборку, если числа там нет. Вторая открывает готовую картинку в браузере, меряет полосы и сравнивает их длину с цифрами с допуском 1%. Такая проверка ловит полосу, растянутую на 7%.

Нужна ли своя дизайн-система, чтобы инфографика была в фирменном стиле? Не обязательно. Если палитра, шрифты и правила бренда записаны в файле, нейросеть применяет их за минуты. Если файла нет, но есть сайт, стиль можно взять прямо из его кода: цвета, шрифты и отступы. Так я сделала для блога курса. Хуже всего, когда нет ни того ни другого: тогда нейросеть подбирает «что-то похожее», и стиль приходится объяснять заново в каждой задаче.