Бесплатные ресурсы для дизайна: иконки, шрифты, цвета, макеты
Подборка бесплатных дизайн-ресурсов на GitHub: цветовые схемы, иконки, шрифты и генераторы макетов, чтобы оформить лендинг с помощью агента.
Каждый раз, когда я начинаю создавать лендинг с помощью агента, я сталкиваюсь с одной и той же проблемой. Код у меня идеальный, но итоговая страница получается плоской и невыразительной, потому что никто не выбрал для неё ни цветовую схему, ни сочетание шрифтов, ни набор иконок. В результате агент дорисовывает картину своими значениями по умолчанию.
Перед тем как объяснить свои дизайнерские идеи, я захожу на несколько сайтов, выбираю с каждого по три-четыре элемента, а затем отправляю всё это агенту, чтобы он понимал, что нужно создать.
Исходники
gztchan/awesome-design
★ 17 573
Это подборка качественных ресурсов и инструментов, которыми UI/UX-дизайнеры пользуются в повседневной работе. И действительно, это очень длинная страница, разбитая на несколько разделов: стоковые фото, цвета, иконки и логотипы, типографика, инструментарий, прототипирование, макеты и юзабилити-тестирование. Там даже упоминаются Human Interface Guidelines от Apple (немного прокрутите вниз). Есть также дизайнерские премии и подкасты. Здесь ничего не нужно устанавливать или запускать — это просто набор ссылок, распределённых по назначению.
Как я этим пользуюсь вместе с агентом
Я не читаю эту страницу от начала до конца. Я сразу перехожу к четырём разделам, которые касаются базовых потребностей лендинга в самый первый день.
- 1Раздел Color — палитра с Coolors или Color Hunt, копируете hex-коды.
- 2Раздел Icon and Logo — набор иконок с Flaticon или The Noun Project, а для логотипа конкретного бренда — Simple Icons.
- 3Раздел Typography — два шрифта с Google Fonts, один для заголовков, один для текста.
- 4Раздел Mockup — сервис BrowserFrame оборачивает скриншот в рамку браузера для hero-блока.
Когда я подбираю цветовую схему, пару шрифтов и набор иконок, я отправляю всю эту информацию агенту сразу, чтобы ему не пришлось гадать или показывать тему по умолчанию.
Подключи шрифты Inter и Poppins с fonts.google.com (Inter — для текста, Poppins — для заголовков). Сделай кнопки цвета #2F6FED, это из палитры, которую я взял на coolors.co. Добавь иконки с simpleicons.org рядом с каждой карточкой возможностей.
Бесплатно там не всё
В разделах Toolkit и Prototyping вы найдёте платные инструменты вроде Figma и Sketch. Так что если вы вайб-кодер с ограниченным бюджетом, эти разделы не для вас. Но поговорим о тех разделах, которые я использую. Font Squirrel (в разделе Typography) прямо указывает, что его шрифты бесплатны для коммерческого использования. А ещё Simple Icons, BrowserFrame, Coolors и Color Hunt работают по принципу «без регистрации и оплаты».
Одна страница на все четыре вещи, без которых лендинг выглядит незаконченным: палитра, пара шрифтов, набор иконок и рамка для мокапа hero-блока. Выбираете по одному из каждого, отдаёте названия агенту — и пропускаете час поиска по случайным сайтам.
Источник: github.com
Бесплатный курс
Хватит читать про ИИ — начни строить с ним
Бесплатный курс Claude Code: свой первый сайт, инструмент или игра — без программирования. Без апсейлов и кросс-сейлов — здесь нечего купить.
Начать →▌ Гайды по теме

Автор
Евгений Арсентьев
PhD · Founder & CEO, Dad4Kids
Статьи · Свежие статьи