Ты попросил Claude Code сделать сайт для своего проекта и получил серый шаблон с синей кнопкой. В роликах тем временем советуют поставить скиллы, подключить Figma, настроить браузерные тесты. Что из этого нужно, сколько стоит и можно ли оплатить из России, непонятно, и до самого контента ты так и не дошёл.
Эта боль закрывается одним приёмом без денег и установок. Перед кодом ты просишь Claude Code написать дизайн-бриф из пяти строк, подтверждаешь его, и только потом он верстает. Ниже — как сделать это сегодня на примере страницы под бесплатный гайд.
Почему на выходе шаблон, а не дизайн
Когда ты пишешь «сделай красивый лендинг», модель выбирает самое вероятное. Самое вероятное — то, что она видела тысячи раз: светлый фон, градиент, три карточки в ряд. Это не поломка, а средний результат на среднюю просьбу.
В популярном посте про дизайн в Claude Code перечислены три скилла и два инструмента. Emil Kowalski отвечает за анимации и отклик интерфейса, Impeccable за макет, шрифты и цвета, Taste за необычные решения и реальные фото. Ещё есть Figma MCP, чтобы переводить макеты в код, и Playwright, чтобы проверять сайт в настоящем браузере. Все они делают одно: сужают выбор модели. Суть этого можно взять бесплатно, если сузить выбор самому.
Дизайн-бриф на пять строк
Бриф — это короткая анкета, которую ты заполняешь до того, как появится первая строка кода. Пять пунктов:
- Кто смотрит: один человек. Например, «новичок, который боится потратить деньги впустую».
- Какое чувство: одно слово. «Спокойствие» или «азарт», но не оба сразу.
- Шрифты: два, для заголовка и для текста, конкретные названия из бесплатных Google Fonts.
- Цвета: три, с кодами. Например, #1B1B1F, #F4EFE6 и #E4572E.
- Запрет: одна вещь, которой точно не будет. Например, «никаких градиентов и стоковых людей с ноутбуками».
Это не магия, а ограничения. Чем уже коридор, тем меньше шансов получить средний результат.
Как повторить приём сегодня за десять минут
Открой Claude Code в пустой папке и отправь первое сообщение:
«Я делаю страницу бесплатного гайда для новичков. Прежде чем писать код, составь дизайн-бриф из пяти пунктов: посетитель, чувство, два шрифта из Google Fonts, три цвета с hex-кодами, один запрет. Код не пиши, жди моего ответа.»
Прочитай бриф. Если что-то не нравится, поправь одной фразой: «акцентный цвет теплее, шрифт заголовка без засечек». Когда бриф устраивает, напиши второе сообщение:
«Собери один файл index.html строго по брифу. Ничего за пределами брифа не добавляй. Цвета и шрифты вынеси в переменные в начале файла.»
Открой файл двойным щелчком, он запустится в браузере. Нажми F12 и включи режим телефона: большинство посетителей придёт именно с него. Дальше правь по одной проблеме за сообщение: «заголовок слишком мелкий на телефоне», «кнопка сливается с фоном». Одна правка на сообщение даёт предсказуемый результат, пять сразу — кашу.
Для примера возьми свой гайд или любую тему. Главное увидеть разницу: сделай то же самое один раз без брифа и один раз с ним. Сравнение на твоём материале убедительнее любого обзора.
Claude Code и Opus 5: нужна ли новая модель ради хорошего дизайна
Этот вопрос люди вбивают в поиск чаще остальных, и ответ тут простой. Я не знаю, сделает ли какая-то версия модели сайт красивым сама по себе, и обещать это не буду. Известно другое: модель в Claude Code переключается командой /model, а бриф работает с любой из доступных тебе.
Поэтому не откладывай старт до выбора «самой лучшей». Начни с того, что есть, прогони один и тот же бриф и посмотри, что изменилось. Если разница есть, ты увидишь её сам, а не прочитаешь в чужом посте.
Что бриф не закрывает и что с этим делать
Бриф решает стартовую точку, но у него есть пределы. Анимации и отклик интерфейса он не придумает, перенос макета из Figma не сделает, а в настоящем браузере страницу автоматически не проверит. Для этого и нужны те самые скиллы и инструменты из поста, и каждый требует настройки.
Есть и вторая сторона: каждую новую страницу ты начинаешь с чистого листа и заново вспоминаешь, какие у тебя были шрифты и цвета. Здесь приём срабатывает один раз. Сохрани бриф в файл рядом с проектом и в каждом новом разговоре начинай со слов «прочитай brief.md и работай строго по нему».
Приём из статьи закрывает боль разово, а собственная система, которую ты собрал сам и держишь у себя, а не арендуешь как подписку на чужой сервис, работает насовсем. У неё понятная структура, предсказуемое время сборки и один владелец — ты.