Скилл Hallmark: ИИ-агент перестаёт верстать одинаковые лендинги

Как повторить

1. Подготовьте Claude Code, Codex CLI, Cursor или OpenCode и Node 18+.
2. Установите скилл: npx skills add nutlope/hallmark -g. С флагом -g он встанет во все проекты, без него только в текущий.
3. Чтобы включить проверку в браузере, выполните npm i -g puppeteer-core и установите Chrome.
4. В Claude Code вызовите /hallmark <задача>, например «собери лендинг для сервиса бронирования». Можно просто описать задачу словами, скилл подхватит её сам. Если не подхватил, напишите явно: «use hallmark to build …».
5. Для готовой страницы есть два режима. /hallmark redesign ./src/app переделает дизайн, сохранив контент и обработчики. /hallmark audit ./index.html выдаст только отчёт без правок.
6. Линтер можно запустить и без агента: node skills/hallmark/scripts/sloplint.mjs <файл-или-папка> --render.

Как проверить результат

В первых строках CSS должен появиться служебный штамп Hallmark: его ставит обязательное правило (гейт 20). Если агент отключил необязательное правило, рядом будет строка вида / Hallmark · waive 47b · причина /. С Chrome и puppeteer-core после сборки появится папка со скриншотами страницы на нескольких ширинах, а если её нет, прошла только проверка кода. Сине-фиолетовый градиент, три одинаковые карточки с иконками или блок отзывов без реальных отзывов значат, что скилл не сработал: соберите заново явной командой /hallmark.

Как это устроено

Скилл построен на гейтах: правилах, которые не пропускают вёрстку со штампами. Уровней три.

• Floor (нижняя планка): запреты, которые нельзя обойти никогда. Сюда входят сине-фиолетовый градиент, карточка в карточке, выдуманные цифры и отзывы.
• Reflex (привычки модели): дефолты, в которые модель скатывается сама. Агент может отключить такое правило, если объяснит причину в коде. Каждое отключение записывается, но сама возможность отключить часть правил остаётся.
• Finish (отделка): мелкий декор, сборку не блокирует.

В файле skills/hallmark/references/gates.md перечислены 90 гейтов и 26 проверок Finish.

Если установлены Chrome и puppeteer-core, после вёрстки линтер открывает страницу в браузере без окна на семи ширинах от 320 до 1920 пикселей и дополнительно на 1440×900 и 1920×1080. Затем страницу смотрит отдельный субагент: вспомогательный агент, который не помнит, как страница собиралась, и поэтому замечает то, что пропустил сборщик.

Ссылки

• nutlope/hallmark: репозиторий скилла с инструкцией по установке.
• usehallmark.com: 50 тем (в посте-источнике было 48 - авторы обновили каталог до версии v2) и живые примеры страниц.

Источник: @exploitex в Telegram, пересылка твита про репозиторий nutlope/hallmark.