Приметы шаблонной страницы и своя маленькая дизайн-система

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

Страница, которую вы уже видели

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

Особенно хорошо видно это в страницах, сделанных ИИ-конструкторами. В статье Anthropic о том, как улучшить вёрстку, которую делает Claude, это описано так: без указаний модель выдаёт предсказуемую середину: шрифты вроде Inter, фиолетовые градиенты на белом, стандартные компоненты и сдержанную анимацию. Причина в самом устройстве: модель выбирает самый вероятный вариант, а самый вероятный это самый распространённый. Авторы называют это «схождением к распределению» (distributional convergence). Статья указана в источниках.

Важно понять два вывода.

1. Дело не только в ИИ. Те же приметы были у шаблонов Bootstrap десять лет назад и у тысяч страниц на готовых темах. ИИ просто делает такие страницы быстрее и в большем количестве.
2. Приметы это симптом. Настоящая причина в том, что в странице нет ничего конкретного: ни ваших слов, ни ваших подтверждений, ни ваших решений. Именно поэтому её нельзя отличить от тысячи других.

Проверьте себя: почему страницы, сделанные без указаний, похожи друг на друга?

Без указаний выбирается самое вероятное, а значит, самое распространённое решение. Получается «середина», одинаковая у всех.

Восемь примет и чем их заменять

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

Заменить на своё

Фиолетово-синий градиент на первом экране
Заголовок-лозунг: «Инновационные решения для вашего бизнеса»
Подзаголовок «Мы поможем достичь новых высот»
Кнопка «Get Started» на русской странице
Три одинаковые карточки с эмодзи и словами «Качество, Надёжность, Инновации»
Выдуманные цифры: «10k+ клиентов, 99.9 %»
Шрифт по умолчанию (Inter) и всё по центру
Всё скруглено одинаково и с большой тенью

Инновационные решения для вашего бизнеса

Мы поможем вам достичь новых высот. Ваш надёжный партнёр в мире технологий.

Get Started

🚀

Инновации

Современные подходы

⚡

Качество

Высокие стандарты

✨

Надёжность

Мы всегда рядом

10k+ довольных клиентов · 99.9 % · 24/7

Заменено: 0 из 8.

Подробнее о приметах.

Слова.

• Лозунг вместо названия. «Инновационные решения для вашего бизнеса» подходит любому, значит, никому. Заменяйте названием и суттью: «что» и «для кого».
• Пустые слова. «Индивидуальный подход», «надёжный партнёр», «достичь новых высот». Они ничего не обещают, и читатель это знает. Вместо них факт (вспомните информационный стиль).
• Английская кнопка на русской странице («Get Started»). Подпись должна называть действие из вашего проекта.

Содержимое.

• Три карточки «Качество, Надёжность, Инновации». Ни одной вашей услуги. Заменяйте настоящими пунктами проекта.
• Выдуманные цифры («10k+ клиентов, 99.9 %»). Нельзя ни проверить, ни прочитать без недоверия. Вместо них настоящие подтверждения: документы, работы, люди. О том, чего нельзя выдумывать, вы подробнее прочитаете в части про право и рекламу.
• Стоковые фото и вымышленные отзывы. Один отзыв «Иван, директор» без фамилии и компании тоже примета.

Вид.

• Градиент «по умолчанию». Не в том беда, что градиент плох, а в том, что он не ваш.
• Шрифт по умолчанию и всё выровнено по центру.
• Единая тень и скругление всему. Когда у всего одна и та же мягкая тень, иерархии нет.

Структура. Всегда одна и та же цепочка: шапка, три карточки, отзывы, три тарифа, призыв, подвал. Если ваш проект не про тарифы, зачем они?

Как не попадаться

Чаще всего помогают не «исправления», а несколько решений, принятых заранее. Они же основа вашей системы:

1. Принципы. Три правила, которые вы записали в паспорт в шестом уроке. Они подсказывают, чего на странице не будет.
2. Свои токены. Цвет, шрифт и шаг отступов, выбранные под ваш тон из брифа, а не по умолчанию.
3. Одно смелое решение. Авторы рекомендаций по вёрстке советуют выбрать одну целостную манеру и держаться её: один доминирующий цвет с точными акцентами, выразительный шрифт, контраст размеров. Не набор эффектов, а одно решение.
4. Реальные материалы. Фотографии настоящих людей и работ, настоящие подтверждения. Они единственное, что нельзя сгенерировать за вас.
5. Проверка. Приметы проверяют списком, как сейчас, а потом читаемость, контраст и фокус.

Своя маленькая дизайн-система: итог части

Всё, что вы сделали в этой части, складывается в систему. Проверьте себя по списку:

1. Паспорт с принципами и границами (урок 6).
2. Токены в три слоя и тёмная тема (урок 11).
3. Шкала шрифтов и шаг отступов (уроки 3 и 4).
4. Цвет с проверенным контрастом (урок 5).
5. Компоненты с состояниями: кнопка и карточка (урок 12).
6. Справочник с версией и списком изменений (урок 13).
7. Спецификация передачи для первого экрана (урок 14).
8. Проверка на приметы шаблонности (этот урок).

У самого учебника такая система тоже есть: токены в каталоге design/ собраны в слои, у цветов есть роли и комментарии о контрасте, а страницы проходят автоматическую проверку на доступность. Вы можете открыть design/tokens.css и узнать в нём то, что делали сами.

Если вы сделали весь список, то у вас на руках то, чего нет у большинства небольших сайтов: правила, по которым дальше можно строить, и которые можно отдать человеку, ИИ-конструктору или самому себе через полгода.

Проверьте себя: достаточно ли убрать все приметы, чтобы страница была хорошей?

Нет: это необходимое, но не достаточное условие. Нужны ещё читаемость, доступность и польза посетителю.

Практика

Перед вами главная страница «по умолчанию». Найдите в ней не меньше пяти примет и запишите их в заметку с указанием места. Потом перепишите: настоящие слова из вашего брифа вместо лозунгов, настоящие пункты вместо карточек с эмодзи, настоящие подтверждения вместо выдуманных цифр. В styles.css опишите свои токены, уберите градиент и шрифт по умолчанию.

И последняя проверка, которую выполните руками: нажмите Tab и убедитесь, что у кнопки виден фокус. Автоматически эту проверку не сделать, а пропускать её нельзя.

Что было не так с 2025 годом

В 2025 году такие страницы стали массовыми: конструктор выдавал сайт за минуту, и его почти никто не менял. Читатели привыкли к приметам и перестали замечать такие страницы вовсе. Тогда ценной стала именно конкретность: настоящие фотографии, названные люди, проверяемые факты. Поэтому часть про ИИ начнётся с того, как не отдать им главное: ваши слова и ваши решения.