version: "1.0.0" name: design-gates description: Механические гейты вёрстки — что проверяется числом перед сдачей страницы клиенту. Использовать перед публикацией любой страницы, отчёта, лендинга или артефакта.

Гейты вёрстки

Правило, которое проверяется одной командой, доживает до третьей страницы. Правило «делай аккуратно» не доживает до второй. Здесь только то, что считается. Вкус — не здесь.

Собрано 25.08.2026 после разбора чужого дизайн-скилла (tasteskill, MIT, github.com/Leonxlnx/taste-skill) панелью из девяти агентов: взяли механику, отбросили вкусовщину и всё, что требует Tailwind, React и внешних картинок.

Перед первой строкой CSS

Выбери ось и запиши её. Одно настроение, одна раскладка — до вёрстки, не после. Иначе выходит то, что уже было: две страницы одного дня совпали палитрой побайтово, потому что обе собирались «по умолчанию».

Спроси себя вслух: я сейчас рисую текст слева, картинка справа — по привычке? Если да, возьми другой якорь. Это наш дефолт буквально везде.

Один акцентный цвет, и он обязан повторяться во всех блоках. База + нейтрали + один акцент. Радуга из четырёх цветов — признак того, что каждая секция придумывалась отдельно.

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

Кириллица решает

Шрифт допускается, только если у него есть подмножество cyrillic. Проверяется до вёрстки, не после:

curl -s "https://fonts.googleapis.com/css2?family=<Имя>&display=swap" \
  -H "User-Agent: Mozilla/5.0 (Macintosh)" | grep -c cyrillic

Ноль — гарнитура молча подменится системной, и это увидит только тот, кто знает, как должно выглядеть. Уже случалось: два наших документа грузили Bricolage Grotesque и Newsreader, у обоих кириллицы нет.

Русская строка длиннее английской на 15–25%. Поэтому: заголовок первого экрана — потолок три строки, считать строки, а не символы. Карточки в ряд — grid-auto-rows: 1fr и grid-template-rows: auto auto 1fr auto внутри, иначе низы разъедутся именно на переводе.

Запрещено

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

Пустая секция. Либо данные, либо честная строка «нет данных за период, как появятся — покажем здесь». Пустота — приглашение для модели её заполнить.

Третий уровень рамок. Коробка в коробке в коробке, и особенно вся секция, завёрнутая в один большой скруглённый контейнер. Одна рамка на секцию; разделение — border-top и смена фона поверхности.

Цветные эмодзи-статусы в документе для клиента. 🔴🟢 — язык чата. В отчёте это плашка: фон и текст парой из токенов.

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

Приёмка машиной

python3 ~/.claude/hooks/design_check.py <файл или url>

Меряет на 320 / 375 / 414 / 1280: переполнение по горизонтали, число строк в заголовке, глубину вложенных рамок, цифры без tabular-nums, прозрачный фон body, пустые секции, отсутствие :focus-visible и prefers-reduced-motion, шрифты без кириллицы, переменные темы, объявленные только в тёмной ветке.

Последнее — самая частая причина нечитаемой страницы: цвет, определённый только внутри @media (prefers-color-scheme: dark), не существует в состоянии «системная тема», и страница показывает текст одной темы на фоне другой.

Сокращённая запись `font:` сбрасывает `font-variant-numeric`. Поймано на собственной странице: правило написано, гейт всё равно ругается. Ставить font-variant-numeric: tabular-nums строкой НИЖЕ font:, иначе оно молча превращается в normal. Тот же класс — почему padding: 13px 0 затирает боковые отступы, заданные раньше.

Скриншот не заменяет замер. Headless-браузер рендерит телефон как десктоп; переполнение видно только числом scrollWidth − clientWidth.

Плотные данные

Таблицы чисел — без карточек. Разделители и воздух вместо рамок, tabular-nums на всех колонках цифр, липкая шапка, зебра оттенком фона, а не серым. Карточка вокруг таблицы добавляет рамку и не добавляет смысла.

Документ, а не сайт

Отчёты читают с телефона и печатают в PDF. Тело — не чистый чёрный, интерлиньяж 1.6, ширина строки не больше 65 знаков, вторичный текст приглушён токеном, а не серым из головы.

Движение

Анимировать только transform и opacity. Появление по скроллу — через IntersectionObserver, не через обработчик прокрутки. Блёр на скроллящемся блоке запрещён: наши страницы открывают с недорогих телефонов.