Claude Code для дизайна сайтов: процесс из трёх шагов без ИИ-шаблонов

Сайты, которые собирает ИИ, выглядят одинаково не из-за слабой модели, а из-за отсутствия вкуса в задаче: без образцов Claude Code берёт самые частые решения. Процесс из трёх шагов это чинит — собрать библиотеку референсов, поставить навык impeccable и никогда не принимать первый вариант, а выбирать из нескольких.

Сначала узнайте врага

Типичный сайт от ИИ узнаётся за секунду: сине-фиолетовые градиенты, один и тот же шрифт, крупный заголовок по центру, три карточки с иконками, кнопка со скруглением. Это не ошибка модели, а статистика: так выглядит большинство сайтов, на которых она училась. Модели с каждым годом лучше, а планку в задаче никто не поднимает. Вкус не появится сам — его нужно передать.

Шаг 1. Соберите библиотеку вкуса

Заведите папку с референсами: скриншоты сайтов, которые нравятся, работы с Dribbble и Pinterest, живые ссылки. Главное правило — группировать по дизайн-семье, а не по проекту:

вкус/
  редакционный/    — журнальная типографика, много воздуха
  брутализм/       — жёсткая сетка, моноширинные шрифты
  тёплый-минимализм/
  тёмный-технологичный/

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

Ускорить сбор помогает готовый DESIGN.md — файл, описывающий дизайн-систему словами: палитру, шрифты, отступы, компоненты. Готовые файлы по известным брендам лежат в репозитории awesome-design-md, а в Refero Styles — больше тысячи систем, понятных ИИ.

Шаг 2. Поставьте impeccable

Impeccable — открытый навык, который учит агента дизайну. Внутри — десятки команд и проверок, которые ловят характерные ИИ-шаблоны. Примеры того, что он умеет:

• сделать смелее — толкает безопасный, скучный дизайн к более выразительному;
• аудит — сканирует живую страницу на типичные ошибки ИИ-вёрстки;
• доводка — выравнивание, ритм, отступы, типографика;
• адаптация — проверка на телефоне и доступность.

Устанавливается как обычный навык: папка кладётся в ~/.claude/skills, дальше Claude вызывает нужные команды сам или по вашей просьбе. Как устроены навыки в целом, — в статье плагины, навыки и MCP для Claude Code.

Шаг 3. Никогда с одного раза

Первый вариант от ИИ — почти всегда самый средний. Поэтому работа идёт воронкой:

1. Широко. Попросите пять разных стилей первого экрана на одной странице — рядом, чтобы сравнить.
2. Выбрать. Возьмите один, остальные выбросьте.
3. Три варианта. Попросите три разные версии основной части в выбранном стиле.
4. Полный экран. Соберите первый экран целиком и только потом переходите к остальным страницам.

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

Промпт из четырёх частей

Длинный design.md на десять тысяч строк не нужен. Хватает четырёх частей:

Эстетика: тёплый редакционный минимализм, много воздуха,
  засечковый заголовок, без градиентов и теней.
Референс: папка вкус/редакционный, особенно файл 03.png.
Намерение: страница курса для руководителей, должна
  вызывать доверие, а не восторг.
Ограничения: две краски плюс нейтральные, один шрифт
  для заголовков и один для текста, никаких иконок в карточках.

Итерируйте визуально

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

Где ИИ ошибается

Возврат к шаблону. Через несколько итераций модель может снова скатиться к привычным градиентам. Держите правила в файле проекта, чтобы они подгружались каждый раз.

Выдуманные шрифты и ресурсы. Модель может сослаться на шрифт, которого нет в Google Fonts, или на картинку по несуществующему адресу. Проверяйте страницу в браузере, а не по коду.

Красиво на компьютере, сломано на телефоне. Проверяйте мобильную версию на каждой итерации, а не в конце.

Текст-заглушка. Дизайн, собранный на «Lorem ipsum», разваливается на настоящем тексте. Давайте реальные заголовки с первого варианта.

Что дальше

Полный список инструментов для дизайна с ИИ — от DESIGN.md до выкладки — в статье 13 инструментов ИИ-дизайна. Как подготовить Claude Code к работе, — в статье настройка Claude Code в пять шагов.

Ярослав Сажнев — преподаватель ИИ в РАНХиГС, внедрение ИИ в компании. Подробнее об авторе