Кейс: Битрикс + Codex
Как превратить файл стилей в навык, который сам оформляет уроки
Один раз разбираем реальные возможности шаблона модуля «Обучение», переводим их на понятный для нейросети язык — и получаем не просто текст, а готовые, структурные и визуально выразительные HTML-статьи.
В чём идея
В CSS-файле уже хранится визуальный язык курса: как выглядят предупреждения, советы, код, спойлеры, ссылки, изображения и служебные сообщения. Но сама нейросеть не знает, какой класс означает «критическая ошибка», а какой — «полезный совет». Навык становится переводчиком между смыслом статьи и возможностями шаблона.
В нашем кейсе используется тёмная тема, поэтому исходной точкой стал файл /bitrix/templates/learning_dark/template_styles.css. У светлой темы есть собственный template_styles.css в папке её шаблона: перед разбором важно проверить, какой шаблон действительно назначен страницам курса.
Мы не просим нейросеть каждый раз «придумать красивое оформление». Мы один раз объясняем ей реальные правила конкретного шаблона, а затем она выбирает нужный компонент по смыслу материала.
Находим источник
Определяем активный шаблон курса и открываем его template_styles.css.
Составляем каталог
Отделяем классы контента от классов меню, шапки, навигации и служебного интерфейса.
Описываем правила
Фиксируем назначение каждого блока, точную HTML-структуру и ограничения.
Генерируем уроки
Навык превращает исходный текст в готовый фрагмент для поля урока Битрикса.
Что обнаружилось внутри шаблона
Предоставленный файл — это не просто оформление всей страницы. В нём есть отдельный набор классов, которые можно безопасно применять непосредственно в тексте урока.
| Класс или элемент | Что означает | Когда применять |
|---|---|---|
| .warning | Предупреждение о риске | Удаление данных, опасное действие, частая критическая ошибка |
| .note | Важная заметка | Обязательное условие, ключевой факт или результат |
| .tip | Практический совет | Более быстрый, удобный или надёжный способ |
| .hint | Подсказка | Необязательное пояснение, ориентир или расшифровка |
| pre.syntax | Многострочный код | HTML, CSS, PHP, команды и конфигурация |
| table.learning-spoiler | Раскрываемый блок | Длинный пример, ответ или дополнительная справка |
| .play / .playdoc | Видео или документ | Только когда есть реальная ссылка на материал |
| .leftimg / .rightimg | Обтекание изображения | Небольшая иллюстрация слева или справа от текста |
| .errortext / .notetext | Статус операции | Фактическая ошибка или подтверждение успешного результата |
Большая часть файла управляет интерфейсом курса: шапкой, боковым меню, поиском, навигацией между уроками и журналом оценок. Классы вроде courses-header, courses-left-side или courses-page-link не предназначены для текста статьи.
Как из CSS получается навык
Сам CSS отвечает на вопрос «как выглядит элемент». Навык добавляет ответы ещё на три вопроса: «что он означает», «когда его использовать» и «какая разметка нужна Битриксу».
Семантика
warning — только риск, tip — рекомендация, hint — необязательная помощь.
Точная структура
Навык хранит готовые HTML-скелеты, включая особую табличную структуру спойлера.
Ограничения
Не дублировать заголовок урока, не выдумывать ссылки и не смешивать контент с интерфейсом курса.
Минимальная структура навыка может выглядеть так:
write-bitrix-learning-html/
├── SKILL.md
└── references/
└── style-catalog.md
В основном файле задаётся рабочий процесс:
--- name: write-bitrix-learning-html description: Создавать HTML-статьи для модуля «Обучение» Битрикс --- 1. Прочитать каталог подтверждённых стилей. 2. Построить структуру урока с h2 и h3. 3. Выбирать warning, note, tip и hint по смыслу. 4. Помещать многострочный код в pre.syntax. 5. Возвращать HTML-фрагмент без html, head и body.
А каталог хранит не только название класса, но и эталон разметки:
<div class="tip"> <div class="courses-info-title">Совет</div> <p>Сначала проверьте оформление на тестовом уроке.</p> </div>
Каталог стилей лучше хранить отдельно от общих инструкций навыка. Тогда при изменении темы достаточно обновить справочник, не переписывая весь сценарий генерации статей.
Что навык делает с обычным запросом
Пользователь пишет: «Подготовь урок о резервном копировании перед обновлением сайта». Навык распознаёт структуру задачи и собирает её из подходящих компонентов:
Используй навык для создания HTML-статьи в модуле «Обучение». Подготовь урок о резервном копировании перед обновлением сайта. Добавь предупреждение, контрольную точку, практический совет и пример команды.
Создайте резервную копию файлов и базы данных. Не начинайте обновление, пока не убедитесь, что архив можно восстановить.
Запишите версию системы и список установленных модулей до начала работ.
Сначала проведите обновление на тестовой копии сайта, а затем повторите проверенный сценарий на рабочем проекте.
Путь к текущему файлу темы удобно выделять так: /bitrix/templates/learning_dark/template_styles.css.
Показать, почему у спойлера именно такая разметка |
|---|
|
Скрипт стандартного шаблона ожидает таблицу |
Где заканчивается готовый шаблон
Исходный CSS прекрасно решает базовые задачи, но в нём заметны ограничения своего времени: фиксированная ширина основного контейнера, спрайтовые иконки, старые префиксы и отсутствие адаптивных медиазапросов. Это не повод выбрасывать шаблон — это точка для аккуратного расширения.
Что уже работает
- понятные смысловые блоки;
- заголовки, списки и ссылки;
- код и штатный спойлер;
- видео, документы и изображения.
Что можно добавить
- адаптивные карточки и сетки;
- CSS-переменные для быстрой смены темы;
- нативные аккордеоны без JavaScript;
- доступный фокус и режим без анимации.
Перед изменением файла в /bitrix/templates/ сделайте резервную копию и проверьте, не будет ли активный шаблон заменён при обновлении. Для постоянной кастомизации безопаснее работать с собственной копией шаблона и сначала тестировать изменения на отдельном уроке.
Как сделать модуль обучения «в огне»
Ниже — не абстрактный список идей, а компоненты, которые уже работают в этой статье. Все новые правила находятся в теге style в начале HTML и ограничены единым префиксом learning-fire.
Контентные карточки
Этапы, возможности и короткие тезисы легче сканировать, чем длинное полотно текста.
Контейнерная адаптивность
Компонент реагирует на ширину области урока, а не только на ширину всего экрана.
Нативное раскрытие
details и summary создают доступный аккордеон без отдельного скрипта.
Единая палитра
CSS-переменные позволяют перекрасить весь набор компонентов из одного места.
Доступность
Заметный :focus-visible помогает проходить урок с клавиатуры.
Спокойное движение
prefers-reduced-motion отключает декоративные переходы по настройке системы.
Вариант 1. Оставить новые стили внутри одной статьи
Это удобный режим прототипа: можно быстро проверить карточки, цвета и адаптивность. Поскольку все селекторы начинаются с .learning-fire, оформление не должно затронуть соседние уроки.
Вариант 2. Перенести проверенный CSS в template_styles.css
После тестирования вынесите содержимое тега style в файл активного шаблона. Тогда одни и те же компоненты можно будет применять во всём курсе, а в тексте уроков останется только чистая HTML-разметка.
Вариант 3. Сделать несколько визуальных режимов
Можно добавить модификаторы для разных типов материалов: практикум, инструкция, кейс, контрольный список или обзор. Навык будет выбирать не только смысловой блок, но и общий сценарий оформления статьи.
Как кастомизировать навык дальше
Визуальные компоненты — только первый уровень. Следующий шаг — научить навык собирать разные типы учебного контента по своим сценариям.
| Режим навыка | Что он добавляет автоматически | Подходящий запрос |
|---|---|---|
| Пошаговый урок | Цель, подготовка, нумерованные шаги, контрольная точка, итог | «Объясни, как настроить резервное копирование» |
| Разбор ошибки | Симптом, причина, диагностика, исправление, профилактика | «Почему после обновления пропали стили урока» |
| Кейс | Исходная задача, решение, примеры кода, результат, идеи развития | «Расскажи, как мы сделали навык из CSS» |
| Чек-лист | Короткие проверяемые пункты и критерий готовности | «Проверь HTML-урок перед публикацией» |
| Микрообучение | Одна идея, один пример, одна мини-проверка | «Объясни класс warning за две минуты» |
В справочник навыка можно вынести палитру, радиусы, типографику, тон текста и правила использования иллюстраций. Тогда новые уроки будут узнаваемыми не только технически, но и визуально.
Проверка перед публикацией
- Активный шаблон курса определён правильно
- Все штатные классы реально есть в CSS
- Интерфейсные классы не попали в статью
- Заголовок урока не продублирован через h1
- HTML внутри примеров экранирован
- У всех изображений есть осмысленный alt
- Новые классы имеют уникальный префикс
- Макет проверен на узком экране
- Фокус с клавиатуры остаётся заметным
- После изменения шаблона очищен кеш
Некоторые настройки фильтрации HTML могут вырезать встроенный CSS при сохранении. В этом случае разметку статьи оставляют без изменений, а весь блок правил переносят в template_styles.css активного шаблона.
Итог: CSS становится не архивом старых правил, а конструктором курса
Мы нашли файл шаблона, превратили его селекторы в понятный каталог, зафиксировали логику в навыке и добавили современный слой оформления. Теперь достаточно описать тему урока — а структура, смысловые акценты и HTML для Битрикса собираются системно.
Почему выбраны именно эти современные приёмы:
Есть вопрос?