Hallmark: скилл для дизайна сайтов без AI slop

Что такое Hallmark

Hallmark — открытый скилл для Claude Code, Codex, Cursor и OpenCode, который задаёт агенту процесс проектирования веб-страницы и проверяет результат. Он адресован знакомой проблеме: сайты, собранные по короткому запросу, часто получают одинаковый набор решений — градиентный первый экран, карточки, случайные акцентные цвета и декоративные заголовки. Hallmark помогает разнообразить дизайн сайта с помощью ИИ, но не обещает автоматически заменить работу дизайнера.

Вместо одного универсального шаблона репозиторий предлагает 50 тем. Тема задаёт визуальный материал: палитру, типографику, поверхности и подход к фотографиям. Затем агент строит структуру страницы под её задачу. Страница бронирования должна помогать записаться, магазин — выбрать товар, а рассылка — подписаться. В описании проекта также есть режим custom, который отказывается от каталога тем и строит направление по запросу и контексту продукта.

До генерации скилл изучает проект: шрифты, цвета, фреймворк и существующий `design.md`. Он запрашивает реальные фотографии, скриншоты или цифры, если они нужны, и не должен придумывать их за пользователя. Для знакомства с другими инструментами этой категории можно посмотреть наш [обзор решений для вайбкодинга](/stati/ii-dlya-vaybkodinga/).

По теме: обзор решений для вайбкодинга

Как Hallmark проверяет дизайн сайта нейросетью

Работа начинается с выбора из трёх подходящих тем, после чего скилл определяет состав и порядок блоков по цели страницы. Главный экран он предлагает собрать отдельно и оценить до того, как появится остальной макет. Такой порядок помогает раньше заметить, что агент неверно понял аудиторию или основное действие пользователя.

Затем `sloplint` ищет характерные для генеративных макетов повторы: подпись над каждым заголовком, текст с искусственно разреженными заглавными буквами, одно цветное слово в крупном заголовке, пустые рамки вместо изображений или страницу, где одни фотографии. Среди других примеров — не помещающийся по высоте первый экран, одинаковая форма подписки внизу каждой страницы и форма, которая показывает благодарность, но ничего не отправляет. Эти проверки формализуют часть визуальной критики, а не выносят универсальный вердикт о вкусе.

У проверок есть уровни. Базовые требования вроде контраста, видимого фокуса, поддержки уменьшения анимации, корректной мобильной версии и отсутствия выдуманных фактов блокируют выпуск. Для типичных шаблонных решений агент может указать причину отступления. Менее критичные замечания остаются подсказками. По README, браузерная проверка проходит на восьми ширинах, а затем результат оценивает отдельный ревьюер в свежем контексте.

Установка Hallmark в Codex и запуск

Для установки скилла глобально нужен Node.js 18 или новее. Команда из README добавляет Hallmark в окружение Codex: `npx skills add nutlope/hallmark -g --agent codex`. После установки попросите агента создать конкретную страницу, например: `$hallmark сайт небольшой кофейни с меню, адресом и бронированием столика`. Если автоматический вызов не сработал, в инструкции проекта советуют назвать Hallmark явно.

Чтобы переработать существующий сайт, используйте `$hallmark redesign ./src/app`, указав реальный путь. Режим редизайна рассчитан на сохранение текста, ссылок, полей и обработчиков. Перед изменениями инструмент фиксирует их, после — проверяет, что важные элементы не потерялись, и готовит сравнение до и после. Для отчёта без правок предусмотрена команда `$hallmark audit ./index.html`. Существующую страницу скилл не должен менять сам по себе: редизайн нужно запросить отдельно.

Статические проверки можно запускать командой `node skills/hallmark/scripts/sloplint.mjs ./путь-к-странице --render`. Для рендеринга, скриншотов и браузерного аудита README отдельно указывает на необходимость `puppeteer-core` и установленного Chrome. Без них остаются статические проверки. На странице Hallmark сказано, что ключ API для изображений не обязателен: проект использует собственную подборку фотографий с Wikimedia Commons и указывает авторство.

Ограничения и лицензия

Hallmark полезен, когда агенту нужен более осмысленный стартовый арт-дирекшн и проверяемые ограничения. Линтер может найти низкий контраст или повторяющийся шаблон, но не доказывает, что страница подходит конкретной аудитории, убедительно объясняет продукт или удобна в реальном сценарии. Набор проверок зависит от собственных правил проекта, а результат всё равно стоит просмотреть на телефоне и проверить с пользователями.

Основной репозиторий распространяется по MIT. Для фотографий действуют лицензии самих материалов Wikimedia Commons, их следует сохранять и атрибутировать отдельно. Проект можно установить через `npx skills`, применить к новому сайту или явно запустить для аудита и редизайна. Каталог тем и демонстрации доступны на сайте Hallmark. На момент проверки в README описана версия Hallmark 2 с 50 темами. Мы не запускали скилл на собственном проекте, поэтому не оцениваем качество его результата по личному тесту.