Дизайн-навыки для кодинг-агентов: как убрать «AI-слоп» из вёрстки
Агент уверенно собирает страницу, а на выходе — одинаковые серые секции с надзаголовком над каждым заголовком. Разбираем три навыка, которые задают агенту дизайн-словарь и проверяют результат в браузере: impeccable, hallmark и taste-skill.
Agent SkillsДизайнКодинг-агенты2026
Категория Навыки для кодинг-агентовФормат Гайд + сравнениеПроверено 02.11.2026
Проблема не в том, что агент плохо верстает, а в том, что у него нет вкуса и порога качества: он воспроизводит усреднённый шаблон — надзаголовок капсом над каждым заголовком, одно цветное слово в заголовке, карточки с эмодзи, форма, которая «спасибо» пишет, но никуда не отправляет. Дизайн-навыки (design skills) закрывают именно это: дают агенту словарь решений и заставляют проверять результат до того, как он скажет «готово».
3
Навыков в разборе
impeccable, hallmark, taste-skill
253 108
Суммарно звёзд GitHub
снято 02.11.2026
62
Детерминированных правил
у impeccable, без LLM
50
Тем оформления
у hallmark
01Что именно называют «AI-слопом»
«Слоп» — это не безвкусица вообще, а конкретный набор узнаваемых приёмов, по которым страницу опознают как машинную за секунду. Хорошая новость: почти все они формализуемы. Именно поэтому появились навыки, которые проверяют не «красиво ли», а «нет ли тут маркеров машинной сборки».
Надзаголовок-«eyebrow» капсом над каждым заголовком секции.
Одно цветное слово внутри заголовка — ради акцента, а не ради смысла.
Разряженные капс-лейблы («ОСОБЕННОСТИ», «ПРЕИМУЩЕСТВА») в каждой карточке.
Страница из пустых рамок-плейсхолдеров или, наоборот, из одних фотографий без содержания.
Форма подписки в подвале каждой страницы, которая не отправляет данные.
Hero-секция, которая не попадает в первый экран на телефоне.
Почему это лечится навыком, а не промптом
Промпт «сделай красиво» живёт одну сессию. Навык живёт в репозитории, подгружается по требованию и, главное, умеет возвращать агенту список конкретных нарушений — то есть работает как линтер, а не как пожелание.
02Три подхода: правила, темы и исследования
Все три проекта решают одну задачу, но с разных сторон. Impeccable делает ставку на детерминированный детектор и словарь команд. Hallmark — на каталог из 50 готовых «материалов» и жёсткий порог качества с уровнями. Taste-skill — на исследование чужих сайтов и многораундовую самопроверку со скриншотами.
Заметность проектов на GitHubGitHub API, снято 02.11.2026
Звёзды показывают интерес сообщества, а не качество результата: hallmark вышел позже остальных и заметно меньше по аудитории.
Критерий
impeccable
hallmark
taste-skill
Лицензия
Apache-2.0
MIT
MIT
Звёзд (02.11.2026)
99 745
45 259
108 104
Подход
62 детерминированных правила + 24 команды
50 тем-«материалов» и три уровня порогов
Исследование 247 сайтов, 6 шагов сборки
Проверка в браузере
да
да (sloplint)
да, 3 ширины
Нужен LLM или ключ
нет
нет
нет
Установка
npx impeccable install
npx skills add nutlope/hallmark -g
npx skills add … --skill
Сделано
Peter Bakaus
Together AI
Leonxlnx
Сравнение по README репозиториев, снято 02.11.2026
Графа «Подход» — краткое изложение README, а не оценка качества результата.
Ключевое отличие — в том, что происходит после генерации. Impeccable прогоняет файл по списку правил и отдаёт находки обратно агенту ещё до того, как тот закончил задачу. Hallmark линтит собранную страницу в настоящем браузере против «машинных» приёмов и даёт последнее слово ревьюеру с чистым контекстом. Taste-skill смотрит собственные скриншоты на трёх ширинах и правит три главные проблемы, до трёх раундов.
03Как устроен цикл проверки
Общий цикл дизайн-навыка
Схема по разделам README: «How it works» у impeccable, «How a build runs» у hallmark, «How v2 works» у taste-skill
Самое важное звено здесь — четвёртый шаг. Без него навык остаётся набором советов: модель прочитает их, согласится и всё равно соберёт привычный шаблон. Работает связка «хук на правку файла» плюс «линт собранной страницы», потому что первое срабатывает в момент, когда агент ещё не объявил работу законченной, а второе видит реальный рендер, а не исходник.
Что ставить хуком, а что линтером
Хук ловит нарушения в момент правки JSX/TSX — быстро и без рендера: контраст, отступы, пропущенные уровни заголовков. Линтер по URL ловит то, что видно только в браузере: мелкий текст, низкий контраст на реальном фоне, съехавшую мобильную раскладку. Нужны оба режима, иначе половина проблем проходит мимо.
04Установка: три команды
Все три навыка ставятся в проект и не требуют ни ключей API, ни отдельного сервиса — проверки выполняются локально. Установщики сами определяют, какие кодинг-агенты есть на машине, и раскладывают файлы в их форматы.
Impeccable
1
Установите навык из корня проекта
Установщик найдёт агентов, спросит область (проект или глобально) и предложит поставить дизайн-хук — на него стоит согласиться, иначе детектор запускается только вручную.
terminalcopy
npx impeccable install
2
Инициализируйте в агенте
После перезапуска инструмента выполните команду инициализации: в Claude Code — со слэшем, в Codex — с долларом. Создастся описание продукта, от которого дальше отталкивается навык.
agentcopy
/impeccable init
3
Проверьте готовую страницу
Детектор умеет сканировать каталог исходников и живой URL. Для правил про контраст и мелкий текст нужен именно URL — укажите адрес дев-сервера.
terminalcopy
npx impeccable detect http://localhost:5173
Hallmark
1
Поставьте навык через CLI skills
Флаг -g ставит для всех проектов, без него — только в текущий. Нужен Node 18 или новее.
terminalcopy
npx skills add nutlope/hallmark -g
2
Или подключите как плагин Claude Code
Второй путь — маркетплейс плагинов: сначала добавляется источник, затем ставится сам плагин.
agentcopy
/plugin marketplace add nutlope/hallmark
3
Добавьте браузерные проверки
Статические проверки работают сразу; для рендера и скриншотов нужен Chrome и puppeteer-core. Без них навык не падает, но проверяет меньше.
terminalcopy
npm i -g puppeteer-core
Taste-skill
1
Поставьте навык по URL репозитория
Указывать имя навыка обязательно: в репозитории их несколько исторических, актуальный — design-taste-frontend.
Скрипты навыка требуют Node 22+ и установленный Chrome, Edge или Chromium. Ключи API не нужны, но для поиска изображений нужен доступ в сеть.
terminalcopy
node -v
3
Альтернатива для двух агентов
Скрипт установки симлинкует навык в Claude Code, с флагом --codex — в Codex, с --all-agents — в оба. Обновление идёт через git pull.
terminalcopy
./install.sh --all-agents
Требование
impeccable
hallmark
taste-skill
Node.js
не ниже 18 (через npx)
18+
22+
Браузер для линта
Chrome или Edge
Chrome + puppeteer-core
Chrome, Edge или Chromium
Ключ API
не нужен
не нужен
не нужен
Плагин Claude Code
да (ecc-совместимый маркетплейс)
да
да
Работа с Hermes Agent
да
нет в списке
нет в списке
Требования по README репозиториев, снято 02.11.2026
Список поддерживаемых агентов у каждого проекта шире трёх колонок: сверяйтесь с README перед установкой в экзотический харнесс.
05Словарь impeccable: 24 команды
Удобство impeccable в том, что вместо одного «сделай красиво» появляется управляемый набор глаголов. Вы просите агента отполировать страницу, ужесточить решение или провести аудит — и получаете предсказуемый результат, потому что за каждым глаголом стоит свой набор правил.
Команда
Что делает
Когда звать
polish
Финальный проход перед публикацией: выравнивание, отступы, мелочи
Последним шагом, перед сдачей
bolder
Усиливает решение, если страница вышла слишком осторожной
Когда всё «нормально», но невыразительно
critique
Разбор дизайна без правок: что не работает и почему
Перед переделкой, чтобы не гадать
audit
Формальная проверка по правилам и доступности
Перед релизом и после крупных правок
harden
Ошибки, i18n, переполнение, крайние случаи
Для форм и длинных текстов
shape
Планирование UX до кода
В начале задачи, а не после вёрстки
document
Пишет DESIGN.md — дизайн-систему проекта
Когда стихийных решений стало слишком много
detect
CLI-детектор: файлы или живой URL, есть JSON-вывод
В CI и вручную перед коммитом
Подмножество команд impeccable по README, снято 02.11.2026
Полный список из 24 команд и их описание — в документации impeccable.style/docs.
Почему это важнее промпта
Каждая команда — это ещё и ограничение: агент не может «улучшить» всё сразу, он делает ровно один тип правки. Именно ограничение и даёт предсказуемость, которой не бывает у свободного «сделай красивее».
06Оценки и ограничения
Профиль направления в целом
Оценки не по отдельным проектам, а по классу инструментов: веса — польза для вёрстки 0,30; простота установки 0,20; охват агентов 0,20; прозрачность работы 0,15; зрелость 0,15.
Хук срабатывает вне одобрения модели: в Claude Code командные хуки выполняются даже при запрете модели на команды, поэтому первый запуск может что-то скачать.
Для части правил нужен реальный браузер и запущенный дев-сервер — статический анализ исходников видит меньше.
Taste-skill честно предупреждает: сборка занимает примерно 30–45 минут и несколько сотен тысяч токенов.
Навык задаёт порог качества, но не заменяет бренд-решения: палитру, тон и уникальные элементы всё равно должен дать человек.
Поддержка агентов различается: impeccable заявляет Hermes Agent и DeepSeek Harness, hallmark и taste-skill — более узкий список.
Чего ждать не стоит
Ни один из трёх навыков не гарантирует «красиво». Они гарантируют отсутствие конкретных машинных приёмов и наличие проверки. Если у продукта нет позиционирования и материала, дизайн-навык аккуратно соберёт пустую страницу — просто без надзаголовков капсом.
07С чего начать
Если у вас Claude Code и вы хотите минимум движений — начните с impeccable: одна команда установки, хук, инициализация и детектор по локальному адресу. Он даёт самый быстрый цикл обратной связи, потому что правила детерминированные и не требуют ни модели, ни ключа.
Если задача — сделать страницу «не похожей на все», берите hallmark или taste-skill: они работают от темы и исследования, а не от списка правил, и дают более выраженный результат на лендингах. Их разумно комбинировать с impeccable: первые задают направление, второй проверяет, что в результате нет формальных нарушений.
Проверка на живом проекте
Поставьте навык в один репозиторий, соберите страницу и прогоните детектор по локальному URL. Если список нарушений длиннее десяти — не отключайте правило, а чините причину: чаще всего это отсутствие дизайн-системы, а не отдельная ошибка.
Частые вопросы
Дизайн-навыки платные?
Нет. Impeccable распространяется под Apache-2.0, hallmark и taste-skill — под MIT. Платить можно только за инфраструктуру (например, за токены модели, которая собирает страницу), сами навыки и их CLI бесплатны.
Нужен ли ключ API для проверки дизайна?
Нет. Impeccable прямо указывает: 62 правила детерминированные, без LLM и без ключа. У taste-skill скрипты тоже не требуют ключей, но нужен Node 22+ и установленный Chrome, Edge или Chromium.
Работает ли это с Codex, Cursor и Hermes Agent?
Impeccable ставится в Claude Code, Cursor, Codex, GitHub Copilot, Grok Build и Hermes Agent — для Hermes хук включается плагином impeccable-design-hook. Hallmark поддерживает Claude Code, Codex, Cursor и OpenCode, taste-skill ставится в Claude Code и Codex. Перед установкой сверяйтесь с README: списки меняются.
Чем hallmark отличается от taste-skill?
Оба работают от темы, но по-разному. Hallmark раздаёт три темы из каталога на 50 «материалов» и держит жёсткий порог: Floor (никогда не отгружается), Reflex (по умолчанию) и Finish (детали). Taste-skill опирается на исследование 247 сайтов, собирает страницу за шесть шагов и делает до трёх раундов правок по собственным скриншотам.
Можно ли ставить несколько навыков сразу?
Технически да, но они начнут спорить: у каждого свой набор правил и свои предпочтения по типографике. Рабочая схема — один навык задаёт направление (hallmark или taste-skill), второй используется как линтер (impeccable detect) в CI или перед коммитом.
Дизайн-навык — самый практичный класс Agent Skills после «кодинга»: он не обещает вкуса, но убирает конкретные машинные приёмы и заставляет агента проверять результат в браузере. Начните с impeccable ради детерминированного детектора, добавьте hallmark или taste-skill, если нужен выраженный стиль. Ждать, что страница станет красивой сама, не стоит — без позиционирования и материала навык просто аккуратно оформит пустоту.
Дальше по теме
Как устроены навыки агентов, откуда их брать и как не поймать вредоносный SKILL.md — в отдельном гайде по Agent Skills.