8 сайтов-референсов, после которых Claude верстает как дизайнер

Claude верстает прилично, пока не попросишь сделать красиво. Тогда выходит сайт как у всех: градиент, три карточки, кнопка по центру. Вкус проще всего дать ему референсом. Скрин нужного блока плюс короткий промпт, и результат меняется сразу.

Ниже восемь сайтов, где я беру такие скрины, и промпт, которым их отдаю.

Почему референс работает лучше описания

Слова «современный минималистичный дизайн» Claude понимает так же, как миллион других людей до тебя. Поэтому и получает средний результат.

Скрин даёт конкретику: сколько воздуха между блоками, какой размер заголовка, где стоит кнопка, как выровнена сетка. Это то, что словами описывать долго, а глазами считывается за секунду.

Важно давать скрин одного блока, а не всей страницы. Целая страница размывает внимание, и Claude начинает усреднять всё сразу.

8 сайтов с референсами

1. motionsites.ai

3D-сайты и промпты к ним. Полезно, когда нужен первый экран с объёмом и движением, а не плоская картинка. Смотри, как там строят сцену и сколько текста оставляют поверх.

2. navbar.gallery

Шапки сайтов. Кажется мелочью, но шапка видна на каждой странице и сразу задаёт уровень. Тут удобно сравнить десятки вариантов: где логотип, сколько пунктов меню, как выглядит кнопка справа.

3. footer.design

Футеры. Обычно их делают в последний момент, и это видно. Здесь хорошо видно, как разложить ссылки по колонкам и куда поставить контакты, чтобы подвал не выглядел свалкой.

4. cta.gallery

Кнопки и блоки с призывом. То самое место, где сайт либо продаёт, либо нет. Смотри на размер кнопки, на текст рядом и на то, сколько свободного места вокруг.

5. 404s.design

Страницы ошибок. Мелочь, на которой видно, думал ли кто-то о сайте до конца. Заодно хороший пример, как пошутить и не потерять человека.

6. unsection.com

Готовые секции: цены, отзывы, вопросы, блоки с фичами. Когда собираешь лендинг из блоков, здесь можно найти структуру почти под любой раздел.

7. bentogrids.com

Бенто-сетки, это когда карточки разного размера складываются в одну плитку. Красиво, если держать сетку. Здесь видно, как именно делят место и где ставят главное.

8. 60fps.design

Микроанимации: нажатия, переходы, появление элементов. Скрин тут не поможет, лучше описать Claude словами то, что увидел, или дать ссылку на конкретный пример.

Часть сайтов с премиум-разделом, но смотреть можно бесплатно.

Как давать референс Claude

Делаешь скрин нужного блока, прикрепляешь и пишешь:

Сделай [шапку / футер / блок цен] для сайта [о чём сайт].
Референс на скрине: возьми из него структуру, сетку, отступы,
иерархию шрифтов и анимации, но не копируй тексты, логотип и цвета бренда.
Мои цвета: [...], шрифт: [...]. Стек: [React + Tailwind].
Сначала перечисли, что берёшь из референса, потом дай код.

Что тут важно:

Что брать. Структура, сетка, отступы и иерархия шрифтов. Это и есть вкус, его и забираем.
Чего не брать. Тексты, логотип и цвета бренда. Иначе получится копия чужого сайта, а не твой.
Свои цвета и шрифт. Без них Claude подставит цвета со скрина.
Последняя строка. Claude сначала проговаривает, что увидел. Ты сразу понимаешь, туда ли он смотрит, и правишь до того, как он напишет сотню строк кода.

Частые ошибки

Скрин всей страницы. Claude пытается повторить всё сразу и ничего толком. Один блок за раз.
Пять референсов в одном сообщении. Получится среднее арифметическое. Лучше один сильный.
Нет своих цветов. Тогда не удивляйся, что сайт выглядит как чужой.
Сразу код. Без шага «перечисли, что берёшь» ошибки видно только в конце.

Итог

Референс плюс короткий промпт работает лучше любого описания словами. Сохрани эти восемь сайтов и попробуй на следующем блоке, разница видна с первой попытки.

Новые подборки сначала выходят в канале @vaykord_dev.