Красивый фронтенд от ИИ с первого раза
Коротко
«Сделай красивый лендинг» не работает по устройству модели: без указаний она сходится к самому вероятному варианту — Inter, фиолетовый градиент на белом, три карточки в ряд. Anthropic описывает это в собственной документации термином «AI slop» и предлагает лечение: не просить «красиво», а задать четыре оси — типографику, цвет, движение, фон — плюс явный список того, что использовать нельзя.
Практически это один файл в репозитории (назовите его DESIGN.md), который агент читает перед каждым UI-компонентом. Внутри: арт-направление одной фразой, 4–6 именованных hex, пара шрифтов, типографическая шкала, правило движения и список запретов. Ниже — этот файл целиком, восемь промптов-добивок для точечной правки уже сгенерированного макета и чек-лист приёмки из десяти пунктов: по нему видно, принимать макет или переделывать, ещё до того как в него вложены часы кода.
Честное ограничение: файл убирает шаблонность, но не заменяет вкус. Направление всё равно выбираете вы, модель только исполняет его дисциплинированно.
Зачем это нужно
Обычный цикл: просите страницу, получаете рабочую вёрстку, смотрите и говорите «ну… как-то по-дефолтному». Дальше правка вслепую — «сделай посовременнее», «добавь воздуха», — и каждая итерация стоит полного перегенерирования.
Причина не в лени модели. В лучших практиках промптинга Anthropic формулирует прямо: модели тяготеют к «on distribution» выводу, и в дизайне это даёт узнаваемую эстетику ИИ-шаблона. Там же лежит рекомендация — просить поведение «сверх ожиданий» явно, а не надеяться, что модель догадается по расплывчатой формулировке. Разница между «Create an analytics dashboard» и «Create an analytics dashboard. Include as many relevant features and interactions as possible. Go beyond the basics» — это пример из официальной документации, а не народная примета.
Второй момент — порядок. Дешевле договориться о макете до кода: правка строки в текстовом брифе стоит секунды, правка сгенерированных компонентов — новый прогон и новый ревью. Это тот же принцип «спека до кода», что и в остальных приёмах вайб-кодинга, просто применённый к внешнему виду.
Готовый пример целиком
Кладёте в корень проекта как DESIGN.md и ссылаетесь из CLAUDE.md строкой Перед любым UI читай @DESIGN.md. Ниже — рабочее направление, а не абстрактный шаблон: замените содержимое, структуру оставьте.
# DESIGN.md — арт-направление проекта
## Направление
Инженерный журнал: плотная сетка, много текста, минимум украшений.
Ощущение — техническая документация, которую приятно читать, а не
маркетинговый лендинг.
## Палитра (ровно эти значения, CSS-переменные обязательны)
--ink: #14161A /* основной текст, доминирует */
--paper: #F7F5F0 /* фон */
--rule: #C9C4B8 /* линейки, границы */
--accent: #C2410C /* единственный акцент: ссылки, активное состояние */
--warn: #7A1F1F /* ошибки */
Доминанта — ink на paper. Accent занимает меньше 5% площади экрана.
## Типографика
Заголовки: Fraunces (variable), вес 700, оптический размер крупный.
Текст: Source Sans 3, 400/600.
Числа и код: IBM Plex Mono.
Шкала: 14 / 16 / 20 / 32 / 56 px. Прыжки крупные, промежуточных
размеров не изобретать. Межстрочный 1.55 для текста, 1.1 для H1.
## Движение
Один оркестрованный вход страницы: контентные блоки появляются
каскадом через animation-delay с шагом 60 мс. Больше никакой анимации,
кроме смены состояния у интерактивных элементов (150 мс, ease-out).
Только CSS. prefers-reduced-motion отключает всё.
## Фон
Бумажный тон + едва заметная горизонтальная линейка через каждые 32 px.
Никаких градиентов.
## Запрещено
- Шрифты: Inter, Roboto, Open Sans, Lato, Arial, system-ui, Space Grotesk
- Фиолетовые и сине-розовые градиенты
- Три карточки в ряд с иконкой-заголовком-абзацем
- Тени крупнее 0 2px 4px
- Эмодзи в интерфейсе
- Скругления больше 4px
## Приёмка
Макет принят, если проходит чек-лист из десяти пунктов (см. статью).
Файл сознательно короткий. Длинные брифы модель размазывает: чем больше правил, тем ниже вероятность, что выполнены все.
Разбор по частям
Четыре оси из документации Anthropic плюс пятая — запреты, без которой остальные работают вполсилы.
| Ось | Что писать | Что будет, если не написать |
|---|---|---|
| Типографика | Конкретные гарнитуры и числовая шкала размеров | Inter/Roboto, шкала 16/18/24 — разница между уровнями не читается |
| Цвет | 4–6 именованных hex + правило доминанты | Робкая равномерная палитра без иерархии |
| Движение | Один момент высокой отдачи, длительности в мс | Либо ничего, либо микроанимация на каждом элементе |
| Фон | Материал и глубина: тон, паттерн, слои | Сплошная заливка #fff |
| Запреты | Поимённый чёрный список шрифтов и приёмов | Возврат к тому же дефолту через две итерации |
Кукбук Anthropic по фронтенд-эстетике даёт готовые ориентиры по шрифтам: из рабочих — JetBrains Mono и Fira Code для «кодового» вида, Playfair Display, Crimson Pro и Fraunces для редакционного, Clash Display и Satoshi для стартапного, семейство IBM Plex для технического. В антипаттернах — Inter, Roboto, Open Sans, Lato, Arial и системные шрифты. Отдельная деталь, которую стоит унести: в самой документации признаётся, что модель всё равно сползает на Space Grotesk из генерации в генерацию, поэтому его лучше внести в запреты явно.
Восемь промптов-добивок
Это не замена файлу, а точечная правка уже сгенерированного макета. Каждый меняет одну ось — так видно, что именно улучшилось.
| # | Промпт | Когда применять |
|---|---|---|
| 1 | «Назови арт-направление этой страницы одной фразой. Если не можешь — его нет, предложи три варианта» | Макет выглядит никаким |
| 2 | «Замени шрифтовую пару: контраст должен быть высоким — дисплейный плюс моно. Веса брать крайние: 200 против 800, не 400 против 600» | Типографика плоская |
| 3 | «Сократи палитру до 4 переменных. Одна доминирует, одна акцентная не более 5% площади» | Пестрит |
| 4 | «Увеличь прыжки типографической шкалы минимум в 3 раза между уровнями» | Заголовки не отличаются от текста |
| 5 | «Убери всю анимацию и собери один каскадный вход страницы через animation-delay» | Дёргается на каждый чих |
| 6 | «Фон: добавь слой — паттерн или текстуру в тон направлению. Градиенты запрещены» | Пустая белая простыня |
| 7 | «Перепиши все подписи и микрокопию: активный залог, конкретика, без слов „решение“, „платформа“, „легко“» | Текст звучит как заглушка |
| 8 | «Удали один лишний элемент. Выбери сам и объясни почему» | Финальная полировка |
Чек-лист приёмки
Основа — чек-лист самопроверки из официального скилла frontend-design, дополненный тем, что чаще ломается на практике.
- Направление называется одной фразой и связано с предметом, а не «просто красиво».
- Палитра и шрифты уникальны для этого проекта, а не переносятся из прошлого.
- Структура несёт смысл: нумерация есть только там, где содержимое действительно последовательность.
- Ни одного из запрещённых шрифтов в CSS.
- Есть ровно один смелый элемент, остальное дисциплинировано.
- Микрокопия конкретная, без клише.
- Работает на 360 px по ширине и с клавиатуры.
- Контраст текста проходит по WCAG (проверяется, а не «на глаз»).
prefers-reduced-motionотключает анимацию.- Один элемент удалён перед сдачей.
Восемь из десяти — норма для первой итерации. Меньше пяти — проще перегенерировать с уточнённым файлом, чем чинить.
Чего в него класть не надо
Стайлгайд кода. Отступы, кавычки, порядок импортов — это CLAUDE.md и линтер. Смешивание раздувает файл и снижает выполняемость дизайнерских правил.
Полный брендбук. Тридцать страниц с историей логотипа не помогают: модель читает всё и приоритизирует случайно.
Оценочные слова. «Современно», «дорого», «премиально», «минималистично» ничего не задают — каждое из них модель разворачивает в средний по выдаче вариант. Только измеримое: hex, px, мс, названия гарнитур.
Дублирование скилла. Если у вас подключён frontend-design или сторонние UI-скиллы, общие принципы уже там. В DESIGN.md держите только то, что специфично для проекта.
Требования, которые вы не готовы проверять. Пункт «доступность AAA» без реального прогона проверки — это самообман: модель напишет aria-label и на этом успокоится.
Как поддерживать в актуальном виде
Файл живой. Правя макет руками, спрашивайте себя: это разовое или правило? Если правило — строка в DESIGN.md, иначе через три генерации вернётесь к тому же. Сгенерировался блок, который нравится, — вносите его параметры в файл как норму, а не надейтесь, что повторится.
Раз в несколько итераций просите агента: «Сверь текущий код с DESIGN.md и покажи расхождения таблицей». Расхождения бывают в обе стороны: иногда код ушёл, иногда файл устарел.
Держите запреты сверху и пополняйте — это единственный раздел, который со временем только растёт.
Отдельно про шрифты и российский контекст. Fraunces, Source Sans 3 и IBM Plex доступны на Google Fonts, Satoshi и Clash Display — на Fontshare бесплатно для коммерческого использования; лицензию всё равно читайте, у части модных гарнитур бесплатна только часть начертаний. Подключать шрифты через внешний CDN на публичном сайте — значит отдавать IP-адреса посетителей на зарубежный сервер: для сайта с формами и персональными данными лишний повод для вопросов. Практичнее скачать .woff2 и раздавать со своего домена. Если работаете в веб-интерфейсе с холстом Claude Design, то же самое направление удобно держать текстом и вставлять в начало сессии — а базовую формулировку брифа можно взять из готового промпта дизайн-брифа.
Частые вопросы
Почему модель игнорирует часть правил из файла?
Чаще всего файл просто не попал в контекст: ссылки из CLAUDE.md недостаточно, если задача пришла в новой сессии. Проверяется в лоб — попросите пересказать содержимое DESIGN.md своими словами перед началом работы. Вторая причина — объём: при трёх десятках правил выполняются первые и последние. Режьте до полутора экранов.
Сработает ли это на других моделях, не только на Claude?
Принцип переносится: любая большая модель сходится к среднему по обучающей выборке, и явные запреты помогают всем. Конкретные формулировки из документации Anthropic оптимизированы под их модели, но структура «направление → палитра → типографика → движение → фон → запреты» универсальна. Проверять придётся самому: у разных моделей разные любимые дефолты, и чёрный список у вас получится свой.
Нужен ли отдельный файл, если есть скилл frontend-design?
Скилл задаёт общую дисциплину: выбрать направление и исполнить его точно. Он не знает, что у вас за проект. DESIGN.md — это конкретика поверх скилла: именно эти пять hex, именно эта пара шрифтов. Вместе они работают лучше, чем по отдельности; без файла две генерации подряд дадут два разных, каждый по-своему приличных, но несовместимых макета.
Как быть, если я вообще не дизайнер и не знаю, какое направление выбрать?
Попросите три-четыре варианта направления с обоснованием от предметной области — промпт №1 из таблицы — и выберите тот, который меньше похож на остальное в вашей нише. Дальше правьте по одной оси за раз: медленнее, чем «сделай красиво», зато результат повторяем.
Гарантирует ли это результат с первого раза?
Нет, и обещать такое нечестно. С файлом и чек-листом первая генерация обычно проходит 7–8 пунктов из десяти вместо 3–4 — то есть переделка становится точечной вместо полной. Полностью «с первого раза» получается, когда направление уже отработано на предыдущем проекте и вы переносите готовый файл.