ДизайнClaude

5 сайтов для дизайнерского вдохновения

Привет, это «Притворяюсь айтишником» Здесь все 5 сайтов из ролика, в том же порядке. И подсказки, что искать на каждом из них.

Первый экран, тарифы, меню, призыв к действию и футер. Выбирай нужный раздел, находи пример и превращай его в понятное задание для ИИ.

Зачем эти галереи

Какую задачу решают эти сайты

Сайты, сделанные с ИИ, часто выглядят одинаково, потому что сложно попросить то, чему не знаешь названия. «Сделай красивее» это не техническое задание. А вот «первый экран с выравниванием по центру, одна строка текста размером около 64 px, один приглушенный градиент на фоне, без иллюстрации» уже задание.

Каждый из этих сайтов собирает сотни примеров одного раздела страницы. Листай, пока что-нибудь не зацепит. Теперь у тебя есть слова, чтобы объяснить, что хочется получить.

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

1 из 5

1. Supahero: первые экраны

Открыть supahero.io ↗

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

Открой Supahero и просто листай. Пока не включай фильтры. Ищи пример, на котором захочется остановиться.
Когда найдешь такой, запиши в трех словах, почему он зацепил. Крупный текст. Много воздуха. Один цвет. Передай Claude эту заметку, а не только скриншот.
Сделай скриншот и используй промпт ниже, который сначала попросит описать референс своими словами.

2 из 5

2. Pricing Pages: тарифные планы

Открыть pricingpages.design ↗

Современные, аккуратные блоки с тарифами, многие с тем самым чистым оформлением в духе Apple. Тарифы часто делают неудачно: пытаются все объяснить текстом вместо того, чтобы дать человеку сравнить варианты благодаря расположению элементов.

Открой Pricing Pages.
Сначала выбирай по числу тарифов, а не по внешнему виду. Два тарифа и четыре тарифа это разные дизайнерские задачи. Если взять неподходящий пример, таблица получится тесной.
Посмотри, как в выбранном примере выделен рекомендуемый тариф. Эта маленькая деталь делает большую часть работы по привлечению внимания к нужному варианту.

3 из 5

Открыть navbar.gallery ↗

Здесь много вариантов навигации: мегаменю, выпадающие списки, полноэкранное меню, боковые панели и другие. Выбирай то, что нравится, но учитывай реальное количество ссылок.

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

4 из 5

4. CTA Gallery: призывы к действию

Открыть cta.gallery ↗

Блоки с призывами к действию, которые приводят к конверсиям. Здесь есть и шаблоны, и примеры с настоящих сайтов. Особенно полезны последние: можно перейти на исходную страницу и посмотреть, как блок работает в контексте.

Открой CTA Gallery.
Ищи варианты, в которых вокруг кнопки достаточно свободного места. Теснота это самая частая ошибка.
Возьми структуру, а текст напиши свой. Одно обещание, одна кнопка, одна короткая строка под ней, которая снимает сомнение.

5 из 5

Открыть footer.design ↗

Подвалы сайтов, рассортированные по типу и стилю. Можно отфильтровать именно то, что тебе нужно. Футер часто вообще не продумывают, поэтому аккуратно сделанный низ страницы сразу придает всему сайту законченный вид.

Открой Footer.
Используй оба фильтра одновременно: тип определяет нужную структуру, а стиль помогает сохранить выбранное настроение.
Подбери футер к первому экрану, который выбрал в начале. Эти два блока обрамляют страницу. Если они спорят друг с другом, весь сайт кажется собранным из чужих частей.

Как получить полезный ответ

Как превратить скриншот в техническое задание

Если просто дать Claude изображение и написать «хочу так же», получится приблизительная копия. Сначала попроси описать референс своими словами и только потом переходи к сборке. Так ты сможешь исправить описание еще до появления кода.

Сначала опиши, потом собери. Прикрепи скриншот и вставь этот промпт:

ЗАПРОС ДЛЯ ИИ

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

Прежде чем писать код, опиши его мне как техническое задание:
- Компоновка и выравнивание, сколько свободного места оставлено
- Типографика: сколько размеров текста, примерный масштаб, какие начертания
- Цветовая палитра в HEX и какой цвет используется как акцент
- Чего здесь намеренно НЕТ

Затем скажи, какие части будут конфликтовать с остальным моим сайтом и что ты изменишь, чтобы они сочетались.

Дождись, пока я подтвержу техническое задание. Затем собери блок с моим содержимым и моими цветами, а не с содержимым и цветами референса.

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

Перед версткой

На что смотреть перед сборкой

Используй как референс, а не клонируй. Это действующие страницы настоящих компаний. Возьми логику компоновки и отступы, а текст, цвета и шрифты используй свои.

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

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

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

Сохранить под рукой