Элементы, из которых собран pismenny.ru: как они выглядят, что делают и где уже используются.
Это источник принятых UI/UX-правил сайта. Примеры используют действующие стили; сложные сценарии открываются на настоящих страницах. Точные значения цветов и шрифтов задаёт tokens.css. Брендбук офисных документов не задаёт правила интерфейса сайта.
01 / подход
Принципы
Содержание первым
Заголовок, материал и основное действие появляются без декоративного вступления. Навигация помогает дойти до содержания, а не задерживает перед ним.
Типографика, воздух и разделители группируют материал. Подложка или рамка появляются там, где действительно обозначают действие, состояние или границу.
На широком экране статья начинается близко к верхней строке бокового меню, без высокого пустого поля. Над заголовком одна строка: слева возврат к публикациям, справа только статус черновика, если он нужен. Тип материала, «Из практики» и авторство не создают дополнительных строк над заголовком. Дата и время чтения идут под ним; имя автора — в конце текста.
Первое содержательное употребление специального слова получает краткое русское объяснение. На широком экране наведите мышь или поставьте фокус клавишей на подчёркнутый термин: тёмная плашка появляется только тогда. Стрелку, постоянную подсветку и отдельный бейдж не добавляем. Текст должен быть понятен и без всплывающей подсказки.
Если действия всегда одинаковые, я пишу обычный скрипт — небольшую программу из последовательности команд.
Если есть статья в глоссарии, термин становится ссылкой на неё с той же подсказкой.
Запрос агенту
Промпт, который читатель отправляет агенту, показываем как сообщение в чате: синее облачко справа, обычный шрифт текста и перенос строк без горизонтальной прокрутки. Подстановки в квадратных скобках выделены только курсивом с лёгкой прозрачностью, без отдельного цвета. Под облачком кнопка «Скопировать» с иконкой; после нажатия иконка становится галочкой. Команду терминала так не оформляем. Если в статье несколько промптов, первый показываем внутри экрана агента .terminal-preview: читатель видит, куда вводится запрос. Дальше промпты идут облачками.
Сделай [задачу] и используй FPF для принятия аргументированного решения.
Команда в терминале
Команду, которую читатель вводит в оболочке, показываем окном терминала. Знак $ рисует CSS, поэтому он не попадает в копию. В заголовке окна указана оболочка. Длинная команда переносится под себя, без прокрутки внутри окна. Если читателю нужно сверить результат, ответ программы идёт приглушённо и без $. Обычный светлый блок кода для команд не используем.
pass insert project/personal-api-tokenEnter password for project/personal-api-token:Retype password for project/personal-api-token:
Файл и короткая команда
Содержимое файла показываем светлым блоком: имя файла в шапке, иконка копирования в правом нижнем углу. После нажатия иконка на мгновение становится галочкой. Та же светлая плашка в одну строку, без шапки и с иконкой справа, подходит для короткой команды в плотном списке, например для установки каждой программы в обзоре. В пошаговой инструкции команда остаётся окном терминала.
Дерево директорий и файлов показываем светлым блоком pre.file-tree: один путь на строку, вложенность — отступом в два пробела, директория заканчивается на /. Пояснение к строке — комментарий после #: он выровнен в одну колонку и приглушён, чтобы не спорить с именами файлов. На телефоне комментарий переносится под свою строку и не уезжает за край. Кнопки копирования нет: структуру читают, а не вставляют. Содержимое файла показываем компонентом «Файл и короткая команда». В исходнике статьи блок помечается языком tree.
Логотип, статус, название и короткое объяснение образуют одну строку-ссылку. Декоративная карточка и лишние рамки не окружают каждый продукт; состояние указано текстом и не конкурирует с названием.
Карточка нужна там, где читатель выбирает путь по своей ситуации. Её площадь целиком является ссылкой; внутри нет второй ссылки. На главной четыре карточки стоят сеткой 2×2 и ведут в разделы публикаций: над заголовком — название раздела, в заголовке — ситуация читателя в кавычках, ниже — одна строка о содержании. Три карточки в ряд и одна под ними не допускаются.
Карточка формата отвечает на вопросы руководителя в одном порядке: цена со сроком и условиями, «Подходит, если» — ситуация читателя без кавычек, чтобы её не приняли за отзыв, результат, состав работы, границы, затем действия. Доказательство ставим одной ссылкой «Пример результата» и только там, где есть настоящий кейс.
Под заголовком — три строки о том, как я работаю, затем одна строка доказательства с огоньком и ссылкой на кейс, затем два шага: сначала бесплатный созвон, формат выбираем на нём. Самодиагностика — необязательная подготовка, отдельной строкой. На широком экране поверх иллюстрации — панель форматов с ценами и кнопкой созвона; формат на экране в ней подсвечен.
Снимок работающей программы занимает ширину содержания. Сайт не добавляет белую подложку, рамку или вложенную карточку. Подпись объясняет, что видно; увеличение открывает исходное изображение. В обзоре интерфейсов несколько снимков одного инструмента собирают в карусель, сохраняя читаемый размер каждого кадра.
Рабочее окно superfile: справа виден предпросмотр PDF. Увеличить снимок.
Фотографии в микро-кейсах
На странице /micro-cases/ доказательный кадр ставим после заголовка, перед результатом и его границей. Каждая фотография сама ведёт к подробной истории; текстовая ссылка повторяет переход. На странице истории каждый кадр открывает полный размер. Это правило относится к подборке микро-кейсов и их подробным историям; для остальных материалов действуют их собственные компоненты. До публичного выпуска проверяем происхождение, приватность и подпись каждого кадра.
Сохраняем активное окно вместе с его родной тенью на прозрачном фоне. Видимый контур занимает всю ширину содержания, а тень выходит за её края. Цветные кнопки в заголовке проверяем после съёмки; кадр с бесцветными кнопками переснимаем. Сайт не добавляет рамку или подложку.
Новые статьи об агентной разработке — без лишних писем.
04 / поведение
Составные паттерны
Паттерн задаёт порядок и поведение нескольких элементов. Его важно смотреть и целиком, и внутри настоящего материала.
Концовка статьи
После текста может появиться один CTA: «Работать со мной» и вторичная ссылка на Telegram-канал. Если у статьи есть подтверждённый маршрут обсуждения, следом идёт блок «Обсуждение». Затем статья предлагает три связанные статьи, каждая целиком кликабельна, и спокойный выход в каталог. Форму подписки статья не повторяет: она находится в каталоге.
Частота CTA. Чтобы блок не примелькался, он показывается не на каждой статье. Счётчик общий для всех страниц с блоком: показ на 1-м и 2-м просмотре, дальше паузы растут на один просмотр до предела «1 из 10» (1, 2, 4, 7, 11, 16, 22, 29, 37, 46, 56, 66…). Повторное открытие той же статьи не считается. После клика по ссылке в блоке читатель сразу переходит на предел; после 90 дней без просмотров отсчёт начинается заново. Без JS или хранилища блок виден всегда. В пропущенный раз на месте блока ничего нет.
Блок нужен, когда в Telegram-канале вышел анонс со ссылкой на эту страницу и подтверждён адрес его обсуждения. Длина и формат материала на сайте не определяют показ. Сейчас компонент подключён к шаблону статей и стоит после текста и возможного CTA, перед связанным чтением; для страницы другого типа его нужно добавить в её шаблон. Без подтверждённого маршрута в реестре, на закрытой от индексации странице или без JavaScript блок не появляется.
Оглавление статьи на широком экране начинается на уровне заголовка. При прокрутке оно остаётся ниже полосы чтения и, если разделов много, прокручивается внутри доступной высоты экрана. В статье с иллюстрацией справа смещается только оглавление, а не сама иллюстрация.
Мини-карта материалов на карте сайта
Только на `/map/` дерево разделов остаётся основной структурой: под «Публикациями» оно ведёт к полной карте материалов, а справа его сопровождает компактная карта пяти тематических групп. Выбор узла показывает короткий маршрут и переход к материалу. На узком экране мини-карта стоит после заголовка, перед деревом.
Карта сайтаГлавнаяРаботать со мнойПриёмы работы с агентомПубликации → Карта материалов
СВЯЗИ МАТЕРИАЛОВОт темы к практике
ПромптАгентная разработкаЗадачиИнциденты
Выбранная тема → материал
Карта материалов как рабочий экран
Карта занимает окно без сайдбара. Заголовок, фильтры, масштаб и крестик возврата плавают поверх поля. На широком экране все фильтры видны в одной строке без внутренней прокрутки; при нехватке места они переходят под заголовок. Карточки можно перемещать, всю карту — сдвигать и масштабировать; материалы раздела объединяет полупрозрачная папка с язычком. При выборе карточки панель даёт краткий конспект и ссылку на полный материал.
Выбранный материалКраткий конспект и переход к полному тексту →
− 100% +
Выбор встречи
Сначала посетитель выбирает цель и длительность, затем дату и время. Календарь показывает полные недели с понедельника по воскресенье: недоступные дни остаются на месте, а текущий день имеет отдельную рамку независимо от доступности. Часовой пояс посетителя виден рядом со временем; недоступное действие не выглядит активным.
Схема состояний · свободное время и часовой пояс показывает рабочая форма
У лонгрида после заголовка появляется закреплённая полоса с названием и прогрессом. Если боковое оглавление видно рядом с текстом, кнопка «Разделы» его не дублирует; когда оглавление скрыто, кнопка открывает список разделов. На телефоне полоса находится под шапкой сайта.
Внутри обзора
Если читатель выбирает программу по виду интерфейса, после короткого вступления показываем снимки. Для каждого инструмента рядом держим название, снимки, оценку и практические сведения; не разрываем объяснение на две несвязанные части до и после галереи.
Текст сохраняет удобную меру чтения. Снимок, схема или таблица могут занять всю доступную ширину; широкая таблица прокручивается внутри себя. Поля и прокрутка не должны закрывать подписи или текст.
Один и тот же переход не ставим рядом дважды. Просмотры и авторство не занимают место перед первым абзацем: данные об авторе располагаются после текста, перед следующим действием.
В микро-кейсах номер стоит в одной строке с заголовком без отдельной левой колонки. Затем идут связанные с материалом фотографии или скриншот, после них — результат и его граница. Каждое изображение открывает историю кейса либо публичный источник.
Общий левый край и верхняя линия связывают разные страницы. Отступ сверху и слева задаёт общий шелл; обёртки страниц не центрируют колонку и не добавляют второй верхний отступ. Выбор колонок зависит от содержимого: тексту нужна мера чтения, схеме — ширина, рабочему экрану — всё окно. Схемы ниже показывают состав, а ссылки ведут на настоящие страницы.
На странице «Обо мне» короткое вступление ведёт к двум биографическим разделам: 🚀 Сейчас и 📚 В прошлом. Эмодзи здесь сохранены как часть авторской страницы. Отдельного блока «Связь» в её содержании нет: ссылка на контакты уже есть в общем меню.
Широкое сравнение с правым оглавлением. В обзоре desktop-агентов текст сохраняет меру чтения, а таблицы занимают всю ширину основной колонки и прокручиваются внутри себя. Перед таблицами можно выбрать до четырёх программ; выбор действует во всех трёх таблицах, пустой выбор показывает все программы. Начиная с широкого десктопа оглавление стоит в отдельной прозрачной колонке у правого края и не перекрывает текст. На более узком экране разделы доступны из закреплённой полосы чтения. Заголовки колонок сочетают логотипы с текстовыми названиями программ. Вся ячейка оценки залита приглушённым цветом, поверх показан белый значок; легенда перед таблицами раскрывает их смысл, а каждая оценка сохраняет пояснение и ссылку на источник. Это правило относится к обзору desktop-агентов →.
Сравнить выбранные программы☑ goose☑ Hermes□ ClaudeВыбор действует во всех таблицах
✓Да◐С оговоркой×Нет?Не подтверждено
Строка выступления
Только на странице выступлений: обложка занимает меньшую часть строки, название и описание остаются рядом. Логотип события виден на обложке; по нажатию видео открывается крупнее. На узком экране строка складывается в одну колонку.
2016 · 15×4, Чебоксары15 минут о том, как мозг учится
Как обучение меняет мозг: нейропластичность и освоение навыков.
Хабы не собираются из обязательных блоков
Общий шелл, левый край и типографика связывают их между собой. Состав основного содержания следует задаче раздела: шапка, маршруты, иллюстрация и подвал появляются там, где помогают читателю.
Компонент называется «липкая иллюстрационная панель справа». На длинных страницах она занимает правый край окна и остаётся на месте при чтении. Текст сохраняет свою ширину и левое выравнивание. На узком экране панель скрывается; у порога её появления кадр сужается, а не сжимает текст.
Автор и сотрудничествоКадр держится за правый край · Обо мне →ПроверкаКадр держится за левый край · Диагностика →Комплект: инцидентыОдна иллюстрация на все материалы · Правила →Комплект: промпт и контекстОбщая панель для хаба и документов · Хаб →
Выбор изображения
У страниц вне комплекта композиция соответствует задаче читателя. У комплекта своё изображение: его не назначают другому комплекту или обычной странице.
Кадрирование
Для каждой композиции выбирают закреплённый край. Проверяют не только полный кадр, но и выразительность узкого видимого фрагмента.
Проверка
Новую иллюстрацию смотрят на пяти ширинах от скрытой панели до 2000 px, прокручивают страницу и проверяют чтение, обрезку и отсутствие горизонтального скролла.
Правая самопроверка может располагаться поверх иллюстрации на полупрозрачной подложке, а широкая таблица прокручивается внутри своей области: самопроверка →процесс →
В черновой статье «Агенты и большой код» по решению Данила используется панель класса «Справка»: с 1400 px оглавление читается поверх иллюстрации, а таблицы реестра сохраняют прокрутку внутри текстовой колонки. Это назначение относится к данной статье.
07 / глобальная навигация
Меню в сайдбаре
Меню этой страницы — действующий образец. На десктопе оно закреплено слева и сгруппировано по задаче читателя: «Начать», «Внедрить ИИ-агентов», «Материалы», «Связь». Кнопка с лупой рядом с «Материалами» раскрывает поиск по всему сайту; отдельной ссылки «Поиск» в списке нет. Если страница или её раздел представлены в меню, соответствующий пункт отмечается. Сам гид пока не входит в навигацию сайта.
Обычная страница
Сайдбар открыт и остаётся видимым. Состав ссылок общий для сайта; страница не копирует его HTML.
Кнопка в сайдбаре раскрывает компактное поле и переводит в него фокус; Escape закрывает поле, сохраняя открытым мобильное меню. Без JavaScript поле остаётся доступным. На странице поиска один заголовок, подписанное поле с примером запроса и результаты по страницам, услугам, статьям и документам. После обычного входа черновики включаются в выдачу автоматически. Форма на странице «Публикации» ведёт к тому же поиску по всему сайту. Каждый результат — целиком кликабельная строка: тип, название и короткое описание; при отсутствии описания используется фрагмент текста. Неопубликованные материалы помечены и доступны только владельцу.
Меню открыто по умолчанию. «Свернуть меню» оставляет узкую рейку; из неё полное меню выезжает поверх статьи без сдвига текста. «Закрепить» возвращает обычный вид. Выбор сохраняется в текущей вкладке.
Карта материалов — отдельный полноэкранный рабочий экран →: вместо сайдбара у неё один крестик возврата к публикациям.
08 / связанный материал
Комплекты и их меню
Комплект соединяет хаб, статью, правила, процесс, шаблоны и справку одной темой. Хаб помогает выбрать маршрут; внутри материалов верхняя полоса показывает состав раздела и текущее место. В публичном тексте она называется меню раздела.
Действующий компонент меню / пример инцидентного раздела
Меню идёт первым, без пустой полосы над ним. На широкой странице оно занимает область до иллюстрации, а название документа начинается на линии текста.
При прокрутке
Полоса остаётся сверху. На телефоне пункты прокручиваются внутри неё по горизонтали; весь документ горизонтально не едет.
Конец материала
Подвал ведёт к следующему материалу и ко всему разделу. Те же ссылки не повторяются рядом ещё одним списком.
Иллюстрация комплекта общая для его хаба и материалов. Рабочая панель, например самопроверка приёмов →, может располагаться поверх иллюстрации с полупрозрачной подложкой. В черновом комплекте метка «Черновик» стоит в строке названия комплекта на каждой странице и не повторяется над заголовком документа.
09 / 18–28 сентября
Что закрепили недавно
Эти решения прошли через обсуждение и проверяются на действующих страницах. Эксперименты, от которых отказались, здесь не показаны как правила.
Общий шелл и одна линия начала. Сайдбар, первый элемент и левый край согласованы между типами страниц.Пример →
Навигация длинного чтения. Полоса прогресса появляется после заголовка; кнопка разделов не повторяет видимое оглавление.Пример →
Термин в тексте. Краткое определение появляется в тёмной подсказке при наведении или фокусе, без постоянно горящей стрелки.Образец →
Комплекты без дублей. Хаб показывает маршруты, документ начинается с меню раздела, подвал ведёт дальше.Пример →
Липкая иллюстрационная панель. Изображения назначены по классу страницы; широкие рабочие объекты сохраняют место для чтения.Пример →
Каталог без лишних маршрутов. Выделенные статьи, тематический фильтр и компактный список комплектов помогают выбрать материал.Пример →
Снимок без обвязки. Скриншот занимает ширину содержания, а подпись остаётся рядом с ним; лишний белый бокс не добавляется.Образец →
Управляемый сайдбар статьи. Обычное меню открыто; читатель может свернуть его и закрепить обратно.Пример →
Подписка в одном месте. Форма остаётся в каталоге; статья заканчивается CTA и связанным чтением.Пример →
Карта как рабочий экран. Граф занимает окно, фильтры и выход плавают поверх него, комплекты собраны полупрозрачными папками.Пример →
Одинаковое «Что читать дальше». Три целиком кликабельные строки и ссылка на каталог завершают обычную статью.Пример →
Структура файлов. Дерево директорий — светлый блок, пояснения после # приглушены и на телефоне переносятся под строку.Образец →
Промпт как сообщение. Запрос агенту — синее облачко с кнопкой копирования; подстановки выделены курсивом.Образец →
Команды и файлы. Команда в оболочке — окно терминала, при необходимости с ответом программы; файл и короткая команда в списке — светлый блок с иконкой копирования внизу справа.Образец →
Разделы и путь к услуге. Публикации делятся на четыре раздела по ситуации читателя; главная ведёт в них карточками 2×2, услуги начинаются с доказательства и созвона.Образец →
10 / источник правил
Как менять гид
Правила выше — принятые решения для интерфейса сайта. Обсуждения, память агента и работающие страницы помогают установить их происхождение и проверить реализацию; частое повторение варианта само по себе не делает его правилом.
Принять решение
Сверить прямое решение Данила, действующие инструкции агенту, историю обсуждения и реальные страницы. Проверить более поздние исправления и отказ от варианта. Спорный вариант не выдавать за канон до разрешения расхождения.
Показать и записать
Повторяемое правило сопровождают явной инструкцией, видимым образцом и ссылкой на действующую страницу. При изменении компонента обновляют их вместе с HTML, CSS или JavaScript. Техническая карта в docs/design-registry.md показывает файлы и исключения.
Сохранить границы
Значения палитры и шрифтов менять в tokens.css; URL и статус материала — в контентных контрактах. История эксперимента не становится новым правилом без принятого решения.
Общие ограничения
Один шелл и один компонент. Страницы используют общий шелл; повторяющийся элемент определяется в общем CSS-слое. Секционный CSS добавляет уникальное, не переписывая общие стили.
Одна система действий. Кнопки используют .btn и варианты --primary, --ghost. Кнопки бронирования и CTA статьи повторяют значения из-за действующих скриптов; Telegram-кнопка статьи — отдельное цветовое исключение.
Прямая геометрия. Контейнеры, кнопки, чипы и таблицы без скруглений. Скруглены только изображения в статье, аватар и всплывающая подсказка.
Два масштаба заголовка. Обычная страница и документ используют общий h1; плакатный размер принадлежит шапке хаба и hero услуги.
Токены вместо новых цветов. Повторяемая палитра и типографика живут в tokens.css. Локальный цвет допустим лишь у изолированного внешнего бренда или одноразовой визуализации с объяснением и проверенным контрастом.
Без второго слоя оформления. Страницы не используют инлайн-стили или CSS-фреймворк с CDN; служебные архивы отдельно отмечаются как исключения.
11 / качество
Как проверять интерфейс
Содержание и навигация
Название ссылки обещает то, что откроется. Повторные пути не заставляют выбирать между одинаковыми действиями.
Клавиатура и контраст
До каждого действия можно дойти клавишей Tab; видимый фокус и текст сохраняют читаемость на своих подложках.
Шесть ширин
Проверять весь экран и всю страницу на 360, 390, 820, 1024, 1440 и 1800 px. Длинная строка, таблица или схема не сдвигает страницу горизонтально.
