Последние несколько дней я собирал Web Design Discipline, скилл для ИИ-агентов, которые пишут веб-интерфейсы.
Изначальная проблема простая: ИИ уже неплохо умеет верстать. Он может быстро собрать промо-страницу, панель показателей, форму, каталог, админку. Без сильных ограничений результат часто скатывается в знакомый “ИИ-дизайн”: фиолетово-синий градиент, белые карточки, Inter, круглые иконки, выдуманные показатели, одинаковые первые экраны и интерфейс, который вроде работает, но выглядит как усреднённая демонстрация облачного бизнес-сервиса из обучающей выборки.
Мне хотелось собрать дисциплину проектирования. Агенту нужна последовательность мышления: сначала задача, контекст, аудитория и ограничения, затем визуальный язык. Каталог готовых палитр эту задачу не решает.
Работа началась с разложения хорошего веб-дизайна на темы. Я отдельно выделил типографику, композицию, цветовые системы, сетки, адаптивную верстку, пользовательские сценарии и эргономику, дизайн-системы, компонентные библиотеки, иконографику, визуализацию данных, русский интерфейсный текст, поисковую оптимизацию, структуру контента для генеративных поисковиков, культурную локализацию. По каждой теме мы сделали отдельное исследование: смотрели официальные руководства, дизайн-системы, документацию по доступности, практики Google, W3C, USWDS, Atlassian, Material, Carbon, Baymard, NN/g и другие источники.
После этого каждое большое исследование было сжато в три слоя.
Первый слой: полный справочник о том, что важно, почему это важно, какие есть источники и где проходят границы темы. Второй слой: компактный фрагмент будущего скилла с процедурными правилами, которые агент реально сможет применять. Третий слой: файл с шаблонами, чеклистами, типовыми ошибками, короткими рецептами и примерами.
Так постепенно из набора тем начала проступать структура. Стало понятно, что корневой SKILL.md должен работать как навигация: классифицировать задачу, задавать порядок работы, выбирать нужные справочные файлы и не грузить агенту всё подряд. Подробности должны лежать рядом и подгружаться только тогда, когда они нужны.
Потом мы собрали из этих фрагментов первую версию методологии. В ней появились жёсткие ограничения: вещи, которые агент почти никогда не должен делать. Не использовать vw для размера шрифта. Не делать карточки внутри карточек. Не строить панель показателей как случайную витрину ключевых метрик. Не рисовать “ИИ-панель” в бирюзовом цвете на тёмно-сером фоне без причины. Не писать выдуманные метрики. Не заменять подпись поля подсказкой внутри поля. Не прятать важную информацию в состояние при наведении мыши.
Следующим слоем стала шкала вкуса: несколько параметров, которые задают характер результата через управляемые переменные. Насколько дизайн может быть смелым. Сколько движения допустимо. Насколько плотным должен быть экран. Это оказалось важным. Для спокойной корпоративной админки агенту нужно держаться сдержанного языка. Для экспериментального сайта-портфолио можно позволить больше визуального риска. Типовая сетка для облачного бизнес-сервиса не должна быть ответом на любой запрос.
Дальше появились отобранные визуальные направления. Их немного, всего 21, но каждое описано как связка решений и запретов. В хорошей дизайн-инструкции важно назвать желаемые приёмы. Ещё важнее явно назвать сигналы, которые ломают направление. Именно такие анти-сигналы часто спасают от усреднённого ИИ-дизайна сильнее, чем позитивные рекомендации.
Отдельно мы добавили пары “было/стало”: десять типовых провалов и способы их исправить. Шаблонный первый экран. Витрина ключевых показателей без управленческого вопроса. Плиточная промо-страница ради самой плитки. Слабая форма. Безликая панель управления. Это работает как слой примеров: агенту легче чинить плохой шаблон, когда он видит конкретную форму поломки и конкретный способ реконструкции.
На следующем проходе я посмотрел на сжатый скилл как на систему и стал искать дыры. Что он забывает? Где он слишком западно-английский? Где он слишком заточен под промо-страницы? Так появились сильные дополнительные блоки: русский интерфейсный текст, культурная локализация для России, США и Китая, структура для генеративных поисковиков, визуализация данных, проверка логики панелей показателей, сценарии пользователя.
Русский интерфейсный текст оказался отдельной большой темой. Интерфейс на русском очень быстро ломается, если агент калькирует английский синтаксис: заголовки с прописной буквой в каждом слове, слеши вместо нормальных союзов, рубленые фразы, кнопки “Да/Нет” там, где нужно “Удалить договор” и “Отмена”. Поэтому в скилле появились правила для подписей полей, ошибок, пустых состояний, дат, денег, тональности, канцелярита и технических терминов.
Потом мы сравнили результат с другими дизайн-скиллами. У UI/UX Pro Max сильная сторона: база для поиска с большим количеством стилей, палитр, шрифтовых пар и продуктовых категорий. У Impeccable сильная сторона: дизайн-словарь и команды для управления результатом. У Anthropic Frontend Design сильная сторона: установка на осознанное визуальное направление и борьбу с усреднённым ИИ-видом. У Open Design сильная сторона: большая экосистема с дизайн-системами, направлениями и локальными рабочими процессами.
Это сравнение помогло точнее сформулировать собственную нишу. Web Design Discipline получился методологическим слоем. Его задача: провести агента по цепочке от задачи к решению. Сначала ограничения и сценарий. Затем шкала вкуса и визуальное направление. После этого правила реализации и проверка.
В конце мы добавили три исполняемых проверки: статический аудит HTML/CSS, проверку адаптивности через Playwright и визуальный аудит со снимками экрана и эвристиками на наложения и слишком мелкий текст. Скрипты не заменяют взгляд человека. Они добавляют другое требование: агент должен не только сгенерировать интерфейс, но и проверить его. Хотя бы на уровне “нет горизонтального скролла, не поехали заголовки, не сломаны подписи полей, нет очевидного обрезания”.
В итоге получился скилл со своей спецификой. Он не соревнуется за самый большой каталог стилей, не генерирует мокапы, не клонирует бренды по адресу сайта, не заменяет Figma, дизайнера или пользовательское исследование. Его практическая задача: дать агенту, который пишет код, дизайн-дисциплину. Сначала задача, сценарий и ограничения. Затем визуальное решение и проверка.
Для меня это важный сдвиг. Мы привыкли думать о скиллах как о “папке с инструкциями”. Хороший скилл может быть сжатой методологией: исследование, отбор, процедура, проверка, сравнение с аналогами, доработка.
И, кажется, именно так скиллы и должны собираться. Промпта “сделай красиво” недостаточно. Нужна маленькая операционная система для конкретного вида мышления.