CodeKitHubЧто это за инструмент?
Генератор комментариев Instagram — это инструмент для создания макетов в браузере, воссоздающий плоскую структуру ветки комментариев Instagram под постом: цветной аватар для каждого комментатора, его имя пользователя жирным шрифтом, за которым следует текст комментария в той же строке, маленькая иконка сердечка со счётчиком лайков справа, и строка «время · лайки · Ответить» под ним — чтобы вы могли ввести собственную ветку комментариев и экспортировать её как изображение для публикации.
Только для развлечения и дизайна: этот инструмент создан для шуток, мемов, слайдов презентаций, UI/UX-прототипов и контента для соцсетей. Его никогда нельзя использовать для фабрикации мошеннических доказательств, преследования или клеветы, а также для выдачи себя за реальные комментарии реальных людей — в зависимости от юрисдикции это может быть незаконно и полностью противоречит назначению этого инструмента.
Ничто из того, что вы вводите, никогда не покидает ваше устройство — вся ветка комментариев рисуется с помощью HTML Canvas API прямо в вашем браузере, а PNG создаётся и скачивается локально. Никакой отправки на сервер, никакого аккаунта, никакого отслеживания вашего контента.
Зачем его использовать?
- Вы монтируете скетч, где шутка строится на абсурдной реакции интернета — соберите ветку с вымышленными именами, нелепыми ответами и разным числом лайков, чтобы завершить кадр скриншотом.
- Завтра презентация нового функционала комментариев клиенту, а времени собирать макет в Figma нет — соберите его здесь за пару минут и вставьте прямо в слайд.
- Как UX-дизайнер вы хотите сравнить, как выглядит раздел комментариев под вирусным постом (сотни лайков) и под тихим постом с парой откликов, не дожидаясь реальных данных.
- Вы готовите кейс с положительными отзывами клиентов в формате комментариев Instagram и хотите ясно обозначить, что это иллюстрация, а не настоящий скриншот.
- Для сцены в рассказе или сценарии, где один ответ в комментариях становится вирусным, нужно увидеть точно, как это будет выглядеть на экране.
- 100% локальный рендеринг — ваши комментарии никогда не попадают на сервер.
Как использовать
- Задайте имя пользователя поста, цвет аватара или загруженное фото, и напишите подпись.
- Переключите, показывать ли область-заглушку для фото над комментариями.
- Добавьте строки комментариев: введите имя комментатора, текст его комментария и счётчик лайков.
- Удалите любую ненужную строку и перестройте свою мысль, редактируя текст напрямую.
- Наблюдайте, как превью ветки комментариев обновляется в реальном времени, затем нажмите «Download PNG», чтобы сохранить изображение.
Пример
Ввод
Имя пользователя поста: «@alex.rivera» · Подпись: «Золотой час на побережье никогда не разочаровывает ✨» · Комментарий 1: «maya.codes» — «Это просто невероятно красиво 😍» (24 лайка) · Комментарий 2: «theo.d» — «А где это??» (8 лайков)Результат
PNG-изображение 600×700, показывающее заголовок поста Instagram с подписью и областью-заглушкой для фото, за которым следует плоский список комментариев — каждый с цветным аватаром-инициалом, именем пользователя жирным шрифтом, текстом комментария и маленьким сердечком со счётчиком лайков справа.Изображение генерируется мгновенно в canvas живого превью и скачивается одним кликом — без ожидания, без загрузки на сервер.
Что можно настроить
- Заголовок поста: имя пользователя, аватар, подпись и необязательная область-заглушка для фото.
- Неограниченное количество строк комментариев, каждая со своим именем комментатора, текстом и счётчиком лайков.
- Плоская компоновка комментариев без пузырей, соответствующая реальному стилю Instagram, с иконкой сердечка у каждого комментария.
- Свободно добавляйте или удаляйте строки комментариев по мере построения ветки.
Ответственное использование
Этот генератор создан, чтобы легко делать явно вымышленные ветки комментариев Instagram для юмора, историй и дизайна. Это не инструмент для фабрикации доказательств, организации травли или введения кого-либо в заблуждение относительно того, что фейковая ветка комментариев настоящая. Если вы планируете делиться изображением, созданным этим инструментом, рассмотрите возможность добавить пометку (например, «фейк» или «макет»), чтобы зрители понимали, что это не настоящий раздел комментариев Instagram — особенно если участников можно спутать с реальными аккаунтами.
Реалистичное соотношение комментариев и лайков
В реальном Instagram число комментариев и распределение лайков сильно зависят от охвата поста. Ориентируясь на эту таблицу при сборке ветки, вы получите заметно более убедительный макет.
| Тип поста | Рекомендуемое число комментариев | Типичное распределение лайков |
|---|---|---|
| Спокойный повседневный пост | 2–4 | Однозначные числа у каждого, разница небольшая |
| Пост с умеренным вовлечением | 5–8 | У верхнего комментария — десятки, у остальных — единицы |
| Виральный пост | 10 и больше | У главного комментария — сотни, у остальных — на порядок меньше |
Часто задаваемые вопросы
Законно ли и этично ли использовать этот инструмент?
Сам инструмент законен для использования в развлекательных, макетных, презентационных и дизайнерских целях. Незаконно и неэтично использовать созданное изображение, чтобы кого-то обмануть — например, выдавая его за настоящую ветку комментариев для мошенничества, преследования или клеветы на человека, либо выдавая его за реальные комментарии кого-либо. В зависимости от места вашего проживания такое злоупотребление может представлять собой мошенничество, клевету или преследование. Пожалуйста, используйте это только в явно вымышленных или иллюстративных целях.
Загружает ли инструмент мои комментарии куда-либо?
Нет. Каждый комментарий, имя и счётчик лайков, которые вы вводите, остаются в памяти вашего браузера и рисуются прямо на элементе canvas с помощью JavaScript. Файл PNG создаётся и скачивается на вашем устройстве — ничего никогда не отправляется на сервер.
Сколько комментариев можно добавить?
В форме нет жёсткого лимита — добавляйте столько строк комментариев, сколько хотите. Превью на canvas отрисует столько, сколько поместится в высоту изображения; для очень длинных веток стоит экспортировать более короткую выборку для более аккуратного скриншота.
Может ли у каждого комментатора быть своё фото аватара?
Аватары комментаторов автоматически генерируются как цветные круги с инициалами на основе каждого имени — это сделано, чтобы инструмент оставался простым и не возникало соблазна использовать чьё-то настоящее фото без согласия. Собственный аватар поста вверху может использовать загруженное фото.
Использовать этот генератор или другой генератор макетов Instagram?
Если вас интересует ветка комментариев под постом, используйте этот Генератор комментариев. Если нужен сам пост ленты целиком (подпись, хэштеги, счётчик лайков), используйте Генератор постов Instagram; для вертикальной истории — Генератор историй Instagram; для целой страницы профиля — Генератор профилей Instagram.
Можно ли изменить порядок комментариев после того, как они уже добавлены?
Каждая строка комментария остаётся редактируемой в любой момент — вы можете поменять имя, переписать текст или изменить счётчик лайков, и превью сразу обновится. Кнопки для перетаскивания строк нет, но удаление строки и добавление её заново на нужном месте даёт тот же результат.
Корректно ли отображаются кириллица и эмодзи в тексте комментариев?
Да. Текст рисуется через Canvas API, который поддерживает Unicode, поэтому имена на кириллице, текст комментариев и эмодзи отображаются без проблем. Русский текст обычно занимает больше места по горизонтали, чем английский, поэтому для очень длинных комментариев стоит проверить перенос строк в превью перед экспортом.
Будет ли изображение выглядеть естественно на экране смартфона?
Да — пропорции canvas соответствуют реальным пропорциям экрана телефона, поэтому картинка смотрится органично при просмотре на смартфоне. Тем не менее это макет: точный шрифт и мелкие детали интерфейса настоящего приложения не воспроизводятся пиксель в пиксель.
Можно ли экспортировать PNG с прозрачным фоном?
Напрямую нет — итоговый PNG включает заголовок поста и список комментариев на сплошном фоне, как обычный скриншот. Если нужна прозрачность, удалите фоновый цвет в графическом редакторе после экспорта.