Рабочая библиотека · не публиковать

UI kit «Нейросети + контент»

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

Палитра

  • #ffffffОсновной фон страницы
  • #f7f7f7Только вторичный фон: карточка задания, блок перехода
  • #1a1a1aОсновной текст, тёмные сцены
  • #ff8200Главный акцент и действие: кнопки, чертёнок, линия реплики
  • #2fb6b9Объяснение и грамотная работа: ангелочек, ответ нейросети
  • #383387Служебный интерфейс: метки заданий, подписи образцов
  • #fdc715Гипотеза и внимание: «Сохраните», маркер на финале
  • #c3d228Завершённое действие: «Скопировано», пройденный лонгрид

Типографика

Заголовок сцены · Montserrat 700 · 32–56 px / 1,15

Горячие новости сырыми не бывают

Подзаголовок · Montserrat 700 · 26–36 px / 1,2

Вика проверяет карту

Повествование · Montserrat 400 · 18 px (на телефоне 17) / 1,7 · строка до 680 px

Вика пробежала глазами по карте. Больше сотни пунктов на карте. Поставила галочку. Потом ещё.

Прямая речь, цитаты · Kurale · 20 px / 1,6 · без курсива

— Всё, — ответила Вика.

Подпись · Montserrat 400 · 13 px / 1,5 · цвет #555

Художественная реконструкция дискуссии. Реплики и участники вымышлены.

Кнопки и метки

Главное действиеСкопировано ✓Второстепенное
Запрос ВикиОтвет нейросетиПопробуйте самиСохраните
  • Кнопка — это действие. Заливка #ff8200, текст #1a1a1a, форма пилюля 999 px, при наведении заливка темнеет (#e87400). Выполненное действие меняет заливку на салатовую #c3d228. Второстепенная кнопка («Закрыть», «Свернуть»): тонкая обводка 2 px, при наведении заливка #1a1a1a.
  • Метка — это подпись. Тонкая обводка 1 px цвета роли, прозрачный фон, тёмный текст, прямоугольник с радиусом 6 px, заглавные буквы 11 px. Не нажимается: курсор обычный, наведения нет. Роль: оранжевая — действие читателя, бирюзовая — ответ и проверка, фиолетовая — служебная, жёлтая — внимание.
  • Не смешивать. Заливка и пилюля только у кнопок, обводка и угол только у меток. Так читатель сразу видит, что можно нажать.

Сетка и отступы

  • Desktop 1440 px. Контейнер 1200 px по центру, поля не меньше 60 px. Повествование стоит в колонке 680 px, сцены и документы выходят в контейнер.
  • Mobile 390 px. Поля 20 px, одна колонка, шрифт повествования 17 px, горизонтальной прокрутки нет. Проверено до 320 px.
  • Ритм. Шаги отступов: 8, 16, 24, 40, 64, 96 px. Между блоками повествования 64–96 px, внутри сцены 24–40 px.
  • Скругления и рамки. Крупные поверхности 20 px, мелкие элементы 12 px, кнопки 999 px, метки 6 px. Рамка 1 px #e4e4e4. Цветных полос слева у карточек нет.
  • Анимация. Часть повествования, а не украшение: движение видно с первой секунды и не прячет содержимое. На телефоне та же логика, только короче. Системная настройка «уменьшить движение» показывает конечное состояние сразу.
  • Единицы. Размеры шрифтов и отступы заданы в px и брейкпоинтах 1024 и 640, а не в vw: так блок выглядит одинаково и в редакторе Tilda, и на опубликованной странице.

Как копировать блок

  1. Найдите образец ниже. Название блока написано в плашке над ним.
  2. Скопируйте блок в редакторе Tilda («Дублировать» или «Копировать в другую страницу») без плашки.
  3. Замените тексты и картинки. Классы и идентификаторы не меняйте.
Блок 1Полноэкранная сюжетная сценаКопируйте блок ниже целиком. Меняются картинка и реплика-заголовок. На телефоне картинка стоит сверху, текст под ней.
Вика и выпускающий редактор Игорь с кружками в редакции

Нейросети + контент · Глава 1

— Привет, последняя практикантка в истории.

Блок 2ПовествованиеДлинный текст в колонке 680 px: абзацы повествования, прямая речь шрифтом Kurale, подзаголовок внутри главы.

Игорь засмеялся один. Вика улыбнулась из вежливости. Отличное начало практики, что сказать.

— Ладно. — Он протянул ей кружку с чаем. Надпись «Горячие новости сырыми не бывают» почти стёрлась. — Что ты умеешь?

— Всё, — ответила Вика.

— Хороший ответ. Неправильный, но хороший. Уверенность в себе — залог ментального здоровья.

Подзаголовок внутри главы (образец)

Игорь протянул ей распечатку.

— Карта медийных навыков. Скачал её у Силантьевой, на тебе как раз и опробуем. Отметь галочками то, что умеешь сейчас. Не то, что хотелось бы уметь. А вот прям я тебе дам задачу, а ты пойдёшь и сделаешь.

Вика пробежала глазами по карте. Больше сотни пунктов на карте. Поставила галочку. Потом ещё. Пробежалась по списку, особо не вчитываясь. Все задачи вполне себе знакомые.

— Был бы интернет, а там найдётся всё, — сказала Вика вслух.

Выпускающий редактор посмотрел на весёлую стаю галочек, рассосредоточившихся по карте.

— Амбициозненько.

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

Вошла Ирина, главред. Горячий кофе в одной руке, в другой ворох распечаток, в третьей ноутбук. Или Вике так показалось.

— Игорь, фестиваль приютов. Мы договорились с «Тёплым углом» на информационную поддержку. Так что покреативнее и не на отвали. На сайт и поста три в соцсети. Придумайте интересный ход. К вечеру.

— Сделаем, — сказал Игорь.

Главред кивнула, скользнула взглядом по Вике.

— На практику? Добро пожаловать. Сегодня без экскурсии, извините. Всё завтра.

И вышла.

Блок 4АДокумент: пресс-релизИсточник внутри повествования: целый текст, подпись и кнопка «Читать крупно». Подходит для любого текстового документа.
Пресс-релиз

24 сентября пройдёт городской фестиваль приютов «Дом для каждого»

Благотворительный фонд помощи бездомным животным «Тёплый угол» и пять городскихприютов проведут в субботу, 24 сентября, фестиваль, на котором горожане смогут познакомиться с животными, получить консультацию по осознанному пристройству и стать волонтёрами. Вход свободный. На часть программы нужна предварительная запись.

Когда и где. 24 сентября, с 11:00 до 17:00, пространство «Мастерская», ул. Придорожная, 12.

В программе:

  • Знакомство с животными. В течение дня на площадке будут собаки и кошки из пяти приютов.
  • Консультации по осознанному пристройству в 12:00, 14:00 и 16:00, в группах до десяти человек.
  • Запись в волонтёры. Анкета и короткий разговор с координатором на стенде фонда.
  • Сбор помощи для приютов. Принимаем сухой и влажный корм, пелёнки, одеяла, миски и переноски. Корм и вещи, пожалуйста, приносите в закрытой упаковке.
  • Детская программа с 11:00 до 15:00 для детей от шести лет в сопровождении взрослых: игры и мастер-классы. Запись не нужна.
  • Выставка-продажа комнатных растений. Весь доход идёт на корм и лечение животных в приютах-участниках.
«Мы хотим, чтобы решение взять животное принимали спокойно и осознанно, а не под влиянием эмоций, — говорит координатор фонда «Тёплый угол» Светлана Ермакова. — Поэтому в день фестиваля мы знакомим людей с приютами, рассказываем, что такое ответственность за питомца, и помогаем решить, как каждый может поучаствовать».
Пресс-релиз фонда «Тёплый угол», исходный документ целиком.
Блок 4БДокумент: публикация и реконструкция чатаСкриншот на экране смартфона, кнопка «Запустить чат» движет переписку 30 секунд. Подпись про вымысел не удалять.

Повисла пауза. Игорь переключился на экран смартфона. Чай был допит, атмосфера требовала какого-то продолжения.

— Видела? — спросил Игорь и показал чат.

— Вот это фейл! Вика пролистала чат. — Я придумала, про что я могу написать для начала. Что люди думают о нейросетях.

— А кому такой текст нужен?

— Все об этом говорят.

— Все — это кто? — Игорь отхлебнул остывший чай. — Представь медсестру после смены. Ей зачем читать, что мы думаем о нейросетях?

— Ну… Но ведь это хайповая тема.

— Вот именно. Найдёшь ракурс, затрагивающий реальных людей — вернёмся к теме.

Дедлайн сгорел2 114 members
Скриншот новости на сайте novos.mk.ru: вместо заголовка стоит задание для нейросети Запустить чат
14 июля
Gleb
Скриншот новости с заданием вместо заголовка

Это опубликовали на региональном портале. Без комментариев.

😁 11
Boris A.
Gleb[Фото]

Уволил бы за такое. И не за ИИ, а за формулировку. Это задание стажёру-первокурснику из нулевых, а не нейросети.

👍 5
Рита Т.
Boris A.Уволил бы за такое. И не за ИИ…

А какое надо?

Boris A.
Рита Т.А какое надо?

Хотя бы с редакционной задачей: для кого, зачем, сколько знаков, что проверить, какой тон.

Kirill L.
Boris A.Хотя бы с редакционной задачей…

С чего ты взял, что длинный промпт лучше короткого? Это рерайт про погоду, не диссертация.

Deleted Account
Kirill L.С чего ты взял…

Поддерживаю

Nina V.
Gleb[Фото]

Все всё рерайтят. Теперь ещё и с кнопкой. Релизы синоптиков вручную перепечатывать, что ли?

👍 6
Stepan
Gleb[Фото]

Это ещё что. У меня таких скринов десяток, но в чат их нельзя, правила канала.

😁 3
Vera N.

Две беды у журналистики. Когда журналист пользуется ИИ. И когда не пользуется.

❤️ 9 👍 4
k
Vera N.Две беды у журналистики…

Журналистики больше нет. Одни нейросети.

Художественная реконструкция дискуссии. Реплики и участники вымышлены.
Скриншот новости на сайте novos.mk.ru: вместо заголовка стоит задание для нейросети: сделай качественный и уникальный полный рерайт этой новостной статьи на русском языке, переведи прямую речь в косвенную и придумай интересный и кликабельный новостной заголовок и подзаголовок

Реальная ошибка редактора новосибирского МК сохранилась в Web Archive.

Блок 5Экран нейросети / промптИсходник, запрос Вики и ответ системы — три разные плашки. Чертёнок сидит на мониторе. Длинный ответ свёрнут до начала и раскрывается кнопкой «Читать ответ целиком» на десктопе и на телефоне. Без скрипта текст виден полностью.

Она открыла браузер, вставила релиз целиком в нейросетку и уверенно написала: «Сделай по этому релизу новость для городского сайта».

Чертёнок сидит на мониторе и указывает пальцем на запрос
ИсходникПресс-релиз фонда «Тёплый угол», вставлен целикомПоказать текст

24 сентября пройдёт городской фестиваль приютов «Дом для каждого»

Благотворительный фонд помощи бездомным животным «Тёплый угол» и пять городскихприютов проведут в субботу, 24 сентября, фестиваль, на котором горожане смогут познакомиться с животными, получить консультацию по осознанному пристройству и стать волонтёрами. Вход свободный. На часть программы нужна предварительная запись.

Когда и где. 24 сентября, с 11:00 до 17:00, пространство «Мастерская», ул. Придорожная, 12.

В программе:

  • Знакомство с животными. В течение дня на площадке будут собаки и кошки из пяти приютов.
  • Консультации по осознанному пристройству в 12:00, 14:00 и 16:00, в группах до десяти человек.
  • Запись в волонтёры. Анкета и короткий разговор с координатором на стенде фонда.
  • Сбор помощи для приютов. Принимаем сухой и влажный корм, пелёнки, одеяла, миски и переноски. Корм и вещи, пожалуйста, приносите в закрытой упаковке.
  • Детская программа с 11:00 до 15:00 для детей от шести лет в сопровождении взрослых: игры и мастер-классы. Запись не нужна.
  • Выставка-продажа комнатных растений. Весь доход идёт на корм и лечение животных в приютах-участниках.

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

Запрос Вики к нейросети

Сделай по этому релизу новость для городского сайта

Ответ нейросети · Qwen

Вот готовый вариант новости, адаптированный для публикации на городском портале, в СМИ или в телеграм-канале:

Найти друга и помочь приютам: 24 сентября в городе пройдет фестиваль «Дом для каждого»

В субботу, 24 сентября, благотворительный фонд «Тёплый угол» совместно с пятью городскими приютами организует фестиваль «Дом для каждого». Мероприятие направлено на популяризацию осознанного пристройства животных и сбор необходимой помощи для хвостатых подопечных. Вход на фестиваль свободный.

Главными гостями праздника станут собаки и кошки из пяти городских приютов, которые ищут свои семьи. Посетители смогут пообщаться с животными, узнать их истории и понять, кто из них может стать новым членом семьи.

Организаторы делают особый акцент на ответственном подходе к заведению питомца. В течение дня пройдут групповые консультации по осознанному пристройству. Эксперты расскажут о тонкостях содержания животных и помогут оценить свои силы.

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

Тем, кто пока не готов взять питомца, предложат стать волонтерами: на стенде фонда можно будет заполнить анкету и пообщаться с координатором. Кроме того, на площадке организуют пункт сбора помощи. Приюты нуждаются в сухом и влажном корме, пеленках, одеялах, мисках и переносках (всё должно быть в закрытой упаковке).

Для маленьких посетителей с 11:00 до 15:00 будет работать детская программа: игры и мастер-классы для детей от шести лет в сопровождении взрослых. Также состоится выставка-продажа растений — все собранные средства пойдут на корм и лечение животных.

Справка:

Когда: 24 сентября (суббота), с 11:00 до 17:00.

Где: пространство «Мастерская» (ул. Придорожная, 12).

Вход: свободный.

Важно: на консультации по пристройству (в 12:00, 14:00 и 16:00) требуется предварительная запись, группы ограничены до 10 человек. На детскую программа запись не нужна.

Блок 6Попробуйте сами (сквозная карточка)Карточка стоит справа от действия Вики и на телефоне идёт сразу после него. Метка, название, цель, шаги, исходник, промпт, кнопки копирования, «Сохраните».

Она открыла браузер, вставила релиз целиком в нейросетку и уверенно написала: «Сделай по этому релизу новость для городского сайта».

Блок 7АРеплика чертёнкаРобот сидит на оранжевой линии рядом с его репликой. Ставьте в месте истории, к которому она относится; подпись «образец» перепишите.
Чертёнок: робот с оранжевыми рожками и хвостом-стрелкой сидит и показывает пальцем

Чертёнокобразец: реплика у действия Вики, привязанная к конкретному месту истории

— В пресс-релизах всегда пишут, кто источник. Ставь.

Блок 7БРеплика ангелочкаТот же механизм, бирюзовая линия и робот справа. Какого робота ставить в каждом месте, решает автор.

Ангелочекобразец: реплика у места проверки, привязанная к конкретному месту истории

— Ты правда сможешь найти первоисточник новости?

Ангелочек: робот с нимбом и белыми крыльями, мягко улыбается
Блок 8Финальная репликаТёмная полоса на всю ширину с крупной репликой на конце сюжетного или смыслового фрагмента. Жёлтый маркер подчёркивает главную фразу.

— Хороший ответ. Неправильный, но хороший.

Уверенность в себе — залог ментального здоровья.

Игорь, выпускающий редактор · образец финальной реплики

Блок 9Переход к следующему лонгридуНазвание следующей страницы и кнопка. Место для ссылки пустое: добавьте href, когда страница будет создана. Якорей внутри лонгрида нет.

Дальше · лонгрид 2 из 3

Тема — ещё не материал

Одно-два предложения о том, что читатель увидит на следующей странице. Текст пишет автор.

Перейти к лонгриду →

Здесь пока нет ссылки: место для URL страницы «Тема — ещё не материал». Страница ещё не создана.

  1. Лонгрид 1пройден
  2. Тема — ещё не материалследующий
  3. Как и зачем нас пугают нейросетямипотом
Блок 10Слайдер «Было / стало»Два состояния и вертикальный разделитель, который тащат мышью, пальцем или стрелками. Стороны и подписи под ними меняются текстом или картинкой. Подходит для историй профессий, сравнения процессов и результатов нейросети.
Было

Первое состояние

Здесь может быть картинка, скриншот или текст. Замените этот блок содержимым стороны «Было».

Стало

Второе состояние

Здесь то же место после изменений. Замените этот блок содержимым стороны «Стало».

Как было

Комментарий к левой стороне слайдера: что было до изменений и почему это было проблемой. Один абзац, текст пишет автор.

Как стало

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

Блок 11Видео Kinescope в монитореМетка и название над видео, подпись под ним и раскрывающийся конспект. Вставьте ID видео в data-kinescope-id у iframe. Без автовоспроизведения. На телефоне ножка монитора убрана, пропорция 16:9 сохранена.

Видео

Название видео

Здесь появится видео Kinescope

Вставьте ID видео в атрибут data-kinescope-id у iframe или замените iframe кодом встраивания из Kinescope. Автовоспроизведение не включать.

Короткая подпись под видео: что на нём и сколько оно идёт.

Текстовый конспект видеоОткрыть

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

  1. 00:00 — первый фрагмент: о чём речь.
  2. 00:00 — второй фрагмент: главная мысль.
  3. 00:00 — итог: что запомнить.
Блок 12Иллюстрация по центру с подписьюУже обложки: картинка до 720 px по центру, подпись 13 px под ней тоже по центру. Подходит для любой иллюстрации внутри повествования. Текст подписи — образец.
Вика подперла щёку рукой и читает экран. На краях монитора сидят ангелочек с нимбом и чёртенок с рожками
Вика читает ответ нейросети. Ангелочек и чёртенок сидят на краях монитора.