Что показать Claude Code, чтобы он перестал создавать одинаковые сайты?

Замечали, что без референсов AI создаёт сайты по одному шаблону: шрифт Inter, синие кнопки, одинаковые карточки и привычный градиент?

Промпт «сделай современно и красиво» здесь не поможет. У каждого своё понимание красоты, а для AI это слишком абстрактная задача.

Чтобы получить интересный дизайн, Claude Code нужно не только объяснять, что сделать, но и показывать, на что ориентироваться.

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

1. Awwwards — изучаем сильные сайты
https://www.awwwards.com/
Один из главных источников насмотренности в веб-дизайне.

Понравившийся сайт можно показать Claude Code и попросить разобрать его визуальные принципы, а затем адаптировать отдельные приёмы под ваш проект.

2. Godly — находим конкретные элементы
https://godly.design/
Godly удобен, когда вам не нужен референс всего сайта, а требуется одно определённое решение: хедер, галерея, карточки, меню, секция с преимуществами или необычный переход.
Вместо длинного объяснения «сделай современный и небанальный первый экран» можно просто дать Claude Code подходящий пример и обозначить, что именно вы хотите из него взять.

3. MotionSites — добавляем движение
https://motionsites.ai/
Даже хороший статичный макет может выглядеть шаблонно. Часто именно анимация создаёт ощущение дорогого и продуманного сайта.
В MotionSites собрана библиотека различных механик движения. Для примеров доступны готовые промпты, поэтому не придётся самостоятельно описывать каждую фазу анимации.
Выбираете эффект, копируете промпт и передаёте его Claude Code.

4. InspoMCP — подключаем референсы напрямую
https://inspomcp.dev/
Здесь можно искать цветовые палитры, шрифтовые сочетания, градиенты и другие визуальные решения.
Но главная возможность InspoMCP — подключение к Claude Code через MCP. После настройки агент сможет самостоятельно обращаться к библиотеке за референсами, а вам не придётся каждый раз переносить их вручную.

5. UI Skills — расширяем возможности Claude Code
https://www.ui-skills.com/
Каталог бесплатных GitHub-репозиториев для работы с интерфейсами.
Здесь можно найти готовые UI-скиллы, компоненты и наработки сообщества, которые помогают улучшить не только внешний вид сайта, но и сам процесс его создания.

6. Refero Styles — работаем не с картинкой, а с дизайн-системой
https://styles.refero.design/
Мой фаворит в этой подборке.
Refero Styles предлагает не просто скриншоты красивых интерфейсов, а структурированные дизайн-системы, основанные на реальных цифровых продуктах.
Внутри стилей описаны:
— цвета и их назначение;
— типографика;
— отступы и сетка;
— правила использования элементов;
— нежелательные решения;
— готовые элементы, которые можно сразу передать Claude Code.
У Refero также есть собственный MCP-сервер. После его подключения Claude Code может сначала подобрать и изучить подходящий стиль, а уже затем переходить к созданию сайта.
То есть нейросеть действует не вслепую, а примерно так же, как дизайнер: сначала собирает визуальные ориентиры, определяет правила, а потом создаёт интерфейс.

Теперь можно передать Claude Code готовый референс или целую дизайн-систему — и получить гораздо более точный и целостный результат.

Новый урок о том, как работать с этими ресурсами и использовать их вместе с Claude Code, я уже добавила в свой курс по Claude.

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