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

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

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

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

---

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

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

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

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

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

---

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

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

```sh
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` и смена фона поверхности.

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

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

---

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

```sh
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`, не через обработчик прокрутки. Блёр на скроллящемся
блоке запрещён: наши страницы открывают с недорогих телефонов.