Внутренний R&D (Frappe LMS) · 19 августа 2026 г.

Можно ли научить AI хорошему вкусу?

Design + AI

Как мы превратили интуитивный арт-дирекшн образовательного продукта в исполняемую дизайн-систему, которой управляет нейросеть.

Сравнение типографики до и после внедрения дизайн-системы

Я взял собственную LMS и попробовал превратить арт-директорские решения в правила, которые сможет выполнять агент.

Было
Серые стены текста
Стало
Журнальная верстка

01. Всё началось со шрифтов

Исходная LMS
Исходная LMS с серыми стенами текста

Я хотел довольно банальную вещь: чтобы урок выглядел как дорогой журнал, а не как техническая документация. Я развёл роли: PT Serif оставил содержанию, Inter отдал служебному слою, а Fraunces зарезервировал для крупных чисел.

Но довольно быстро стало понятно: проблема вообще не в шрифтах.

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

02. Сделаем больше компонентов?

Мы решили расширить палитру. Спроектировали Callout (врезки), Quote (цитаты), Metric (крупные цифры).

Вроде стало лучше.

А потом я попросил агента взять реальный урок и применить к нему новую палитру. Агент сделал именно то, что мы ему сказали. И это всё испортило.

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

Агент сложил компоненты в кучу
Агент применил UI-кит как светофор

Стало понятно: компонент должен появляться из функции содержания, а не содержание подбираться под компонент.

03. Мы проектировали не компоненты. Мы проектировали решения

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

Карточка
Сначала врезка выглядела как классический блок. Мы отказались от него, потому что платформа начинала пахнуть SaaS-дашбордом.
Тонкая линия
Перешли к editorial-приёму: воздух + тонкая линия + типографика.
Капс-маркер
ВАЖНО
Капс для служебных меток формально работал, но превращал текст в интерфейс.
Спокойная метка
Важно
Мы вернулись к обычному регистру, и система стала спокойнее.
Акты
Акт 01
Сначала мы протащили в урок театральные «Акты».
Обычный заголовок
Обычный заголовок
Потом поймали себя: не каждый урок является пьесой.
Две колонки текста
Слабый подход. Не видно, что именно сравнивается.
Сильный подход. Но на мобильном это станет двумя абзацами подряд.
Настоящий Compare
Слабо
Обычные колонки без связи.
Лучше
Единый блок с четким контрастом.

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

04. Правило, которое всё поменяло

Компонент появляется только тогда, когда появляется новая когнитивная операция.

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

Унести главную мысль (Thesis)
Компонент появляется только тогда, когда появляется новая когнитивная операция.
Заметить число (Metric)
73%
пользователей бросают курс на первой неделе из-за потери мотивации
Увидеть экземпляр абстракции (Example)
// Пример конфигурации Editorial Skill
{
«tone»: «journalistic»,
«max_metrics_per_page»: 2
}

Если специальной функции нет, обычный параграф (Paragraph) — это правильный дизайн.

05. А теперь самое интересное: отдаём это AI

Только после того, как мы сформулировали правила, мы подключили Editorial Skill.

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

Смотрите, как меняется роль нейросети:

1. Сырой текст из черновика
Модель пишет текст не так, как человек. Она опирается на статистику.
2. Разметка Editorial-агента (JSON)
{ 
  "type": "thesis",
  "text": "Модель пишет текст не так, как человек."
}
3. Финальный рендер в платформе
Модель пишет текст не так, как человек.

Мы отделили принятие смысловых решений от их визуального воплощения.

06. Получилось ли научить AI вкусу?

Нет. И это отличный результат.

Мы не научили машину чувствовать композицию. Мы научились превращать часть человеческого «что-то здесь не то» в исполняемые правила.

  • «Почему капс меня раздражает?» → Normal case by default.
  • «Почему это не ощущается сравнением?» → Compare должен визуализировать отношение.
  • «Зачем здесь вообще акты?» → Семантика важнее красивого паттерна.

Арт-директор принимает дорогие, неоднозначные решения один раз. Агент получает возможность последовательно воспроизводить уже сформулированный язык.

07. Зачем всё это бизнесу?

Это интересно там, где компания производит много однотипного контента (образование, документация, корпоративные базы знаний), а качество всё ещё зависит от человека, который каждый раз говорит: «Нет, вот здесь что-то не то».

Если дизайнер или методист каждый раз принимает одни и те же визуальные решения для следующей страницы, урока или отчета — возможно, его пора превратить в систему.

AI не заменил здесь арт-директора. Он сделал один хороший арт-директорский выбор многократно воспроизводимым.

Если у вас есть контентный продукт, который каждый раз приходится вручную «доводить до вкуса», мне интересно попробовать проделать с ним тот же эксперимент.

Не пользуетесь Telegram? Напишите здесь — сообщение придёт мне на почту, отвечу в течение рабочего дня.

← ко всем кейсам

Написать в Telegram Telegram