Экспортировал закладки: 417 ссылок, 356 доменов, копилось несколько лет. Половина оказалась мусором - разовые статьи, панели хостингов, забытые вкладки. Ниже то, что осталось после чистки.

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

Цвет

realtimecolors.com - подбираете палитру и сразу видите ее на готовом макете лендинга, а не на квадратиках.

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

uicolors.app - из одного hex делает всю шкалу от 50 до 950 в формате Tailwind.

Ровно тот формат, который ждет @theme в Tailwind v4: скопировали и вставили. Руками такая шкала подбирается полчаса, и все равно выходит неравномерной.

hypercolor.dev - готовые градиенты сразу классами Tailwind.

grainient.supply - больше тысячи градиентов с зерном.

Зерно тут не украшение, а прием: чистый градиент на большом блоке дает полосы из-за нехватки битов на канал, а шум их прячет. Тот же трюк использует Apple в фонах macOS.

fffuel.co - генераторы SVG: волны, сетки, блобы, шум.

Полтора десятка отдельных инструментов на одном домене, все с экспортом в чистый SVG без зависимостей.

colorhunt.co - готовые палитры, которые можно быстро пролистать глазами.

coolors.co - генератор палитр, тренды и экспорт в разные форматы.

colorsandfonts.com - подборки цветов, шрифтов и готовых сочетаний для интерфейсов.

meshgradient.in - генератор mesh-градиентов с экспортом в PNG.

Иконки и графика

icones.js.org - поиск сразу по всем наборам Iconify.

Проверил сегодня через их API: 236 наборов и 334 616 иконок в одном поиске. Отдает SVG, JSX или имя для astro-icon - копируется в один клик.

simpleicons.org - логотипы брендов одним цветом.

3400 иконок, лицензия CC0 - можно брать куда угодно без указания авторства. У каждой прописан официальный фирменный цвет, так что не надо пипеткой лезть в чужой сайт.

svgl.app - логотипы компаний в SVG, с темными вариантами.

Именно темные варианты и делают его полезнее аналогов: на темном фоне обычный логотип часто превращается в черное пятно.

tabler.io - шесть тысяч иконок одного набора.

6150 штук, все нарисованы одним штрихом в 2px на сетке 24 на 24. Когда весь интерфейс из одного набора, он выглядит собранным, а не склеенным.

thiings.co - коллекция трехмерных объектов в едином стиле.

undraw.co - иллюстрации со сменным акцентным цветом.

Меняете hex на сайте - и все иллюстрации перекрашиваются под ваш бренд до скачивания. Лицензия разрешает коммерческое использование без атрибуции.

developer.apple.com/sf-symbols - родной набор системных иконок Apple.

iosicongallery.com - галерея иконок iOS- приложений.

macosicons.com - огромная коллекция иконок для macOS.

Куда смотреть, когда не рисуется

godly.website - подборка сайтов, отобранных придирчиво.

Отличается от Awwwards тем, что тут нет номинаций и голосований. Просто человек с вкусом собирает то, что считает хорошим.

minimal.gallery - то же, но с уклоном в минимализм.

refero.design - референсы по элементам, а не по сайтам целиком.

Ищется не «красивый лендинг», а «как выглядит пустое состояние», «как сделан онбординг», «где живет поиск». Экономит время, когда задача узкая.

mobbin.com - то же для мобильных приложений.

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

darkmodedesign.com - только темные интерфейсы.

Полезно, потому что темная тема ломается иначе, чем светлая: тени перестают работать, а границы приходится строить на светлоте.

cofolios.com - портфолио дизайнеров из крупных компаний.

wallofportfolios.in - еще одна стена портфолио, полезная именно для насмотренности.

portfolioproject.io - кураторская подборка портфолио дизайнеров и креативных специалистов.

clay.global - сайт студии, который стоит разбирать как пример дорогой подачи кейсов.

nicolasloureiro.com - портфолио интерактивного дизайнера с хорошей работой движения.

rohid.dev - персональный сайт, где фронтенд и визуальная подача живут на равных.

Библиотеки компонентов

heroui.com - бывший NextUI, третья версия.

Единственная из массовых, где всерьез продуманы слои поверхностей и токены границ: они выводятся смешиванием фона с текстом, а не пишутся руками. Из-за этого граница не может стать невидимой на новой теме.

ui.shadcn.com - фактический стандарт для React.

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

21st.dev - каталог компонентов от дизайн-инженеров.

magicui.design - анимированные блоки.

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

uiverse.io - кнопки и лоадеры от сообщества.

preline.co - большой набор блоков на Tailwind.

motion-primitives.com - маленькие React- примитивы для анимаций интерфейса.

animata.design - готовые анимированные компоненты с кодом.

ui.lukacho.com - компоненты, графики и анимации в одном стиле.

hyperui.dev - бесплатные компоненты на Tailwind CSS v4.

merakiui.com - набор Tailwind-компонентов с большим количеством прикладных блоков.

pagedone.io - Figma-дизайн-система и Tailwind-блоки.

reui.io - блоки и компоненты вокруг shadcn/ui.

shadcnblocks.com - готовые секции для проектов на shadcn/ui.

Мелочи, которые экономят время

carbon.now.sh - картинка из куска кода.

opengraph.xyz - показывает, как ссылка развернется в Telegram, X и Slack.

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

favicon.io - фавиконки из текста, картинки или эмодзи.

shields.io - те самые бейджи для README.

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

readme.so - собрать README по блокам.

cobalt.tools - скачать видео или звук откуда угодно.

Открытый код, 42 тысячи звезд на GitHub, лицензия AGPL. Ничего не хранит у себя: файл собирается на лету и сразу отдается вам.

shots.so - мокапы: скриншот в устройстве и на фоне.

easing.dev - графики кривых анимации рядом друг с другом.

Сравнение бок о бок объясняет разницу между ease-out и ease-in-out за секунду, тогда как в документации на это уходит абзац.

devdocs.io - документация десятков языков в одном месте.

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

time.fyi - маленькие инструменты для времени, дат и таймзон.

smashing.tools - набор быстрых веб-инструментов в одном месте.

toolfox.ru - простой генератор QR- кодов для ссылок и текста.

html2astro.mb-js.site - конвертер HTML в Astro- проект.

story.to.design - перенос кода в Figma-компоненты.

animate-code.com - анимированные ролики из кусков кода.

Технически красивое

Сюда попали сайты, которые интереснее открыть, чем описать.

shaders.paper.design - шейдерные фоны без единой зависимости.

Открывается за секунду и выглядит дороже половины сайтов, которые тащат ради того же эффекта тяжелую webgl-библиотеку.

unicorn.studio - редактор WebGL-эффектов без кода.

rive.app - интерактивная анимация с состояниями.

Не видео и не Lottie: у анимации есть машина состояний, и она реагирует на ввод. Рантайм написан на C++ и работает во вебе, на мобильных и в играх.

haptics.lochie.me - тактильная отдача в мобильном вебе.

Открывать обязательно с телефона, иначе смысла нет вообще. Демонстрирует то, о существовании чего в вебе большинство не знает.

torph.lochie.me - морфинг текста без зависимостей.

dora.run - 3D-анимированные сайты без кода.

framer.com - визуальный конструктор сайтов, который любят дизайнеры.

relume.io - библиотека секций и быстрый старт для структуры сайта.

webflow.com - визуальная сборка сайтов с нормальной публикацией.

uvcanvas.com - готовые canvas-фоны, которые можно изучать как прием.

Продукты с эталонным интерфейсом

Тут нечего скачивать, но полезно разглядывать.

linear.app - эталон скорости и клавиатурной навигации.

Половина современных трекеров - это попытка повторить. Заодно у них опубликован «метод Linear»: как они ведут разработку, а не только как выглядит интерфейс.

family.co - криптокошелек с лучшими анимациями в финтехе.

raycast.com - десктопное приложение, сделанное с уважением к деталям.

ghostty.org - терминал, у которого и сайт документации образцовый.

Написан на Zig, 60 тысяч звезд на GitHub, и главное отличие от конкурентов: нативный интерфейс на каждой платформе вместо Electron. Отсюда и скорость.

cal.com - открытая альтернатива Calendly.

plane.so - открытый трекер задач и проектов.

logsnag.com - трекинг событий с приятным продуктовым интерфейсом.

tally.so - формы без ощущения старого конструктора форм.

notion.com - рабочее пространство, которое стоит смотреть ради плотности интерфейса.

dia.browser.com - браузер, построенный вокруг ИИ- работы с вкладками.

Если делаете сайт на Astro

docs.astro.build - документация, к которой возвращаешься.

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

ui.full.dev - компоненты именно под Astro, а не React, завернутый в Astro.

inox-tools.fryuni.dev - набор интеграций, закрывающих дыры платформы.

npmx.dev - просмотр пакетов npm.

Показывает вес, дерево зависимостей и содержимое файлов сразу, без прыжков между npm, GitHub и bundlephobia.

risingstars.js.org - что взлетело за год.

Считает не абсолютные звезды, а прирост за год. Поэтому в топе оказываются новые проекты, а не вечные лидеры вроде React.

astroweekly.beehiiv.com - еженедельная подборка новостей Astro.

astro.build/themes - темы и стартеры из каталога Astro.

writenex.com/astro - визуальный редактор для Astro Content Collections.

astroeditor.danny.is - редактор Markdown со схемой Astro-коллекций.

webcoreui.dev - компоненты для Astro с поддержкой Svelte и React.

astro-consent-playground.vercel.app - песочница для cookie consent в Astro.

Комментарии и контент для статики

Актуально, если у вас статический сайт и хочется добавить живого.

remark42.com - комментарии на своем сервере.

Написан на Go, ставится одним контейнером, не следит за читателями. Автор - Umputun, ведущий подкаста «Радио-Т», и код заметно опрятнее среднего.

cusdis.com - легкая альтернатива, открытая.

pagescms.org - админка для контента прямо в гите.

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

keystatic.com - то же, но со схемой на TypeScript.

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

voidfull.com - легкое управление контентом для статических сайтов.

sanity.io/templates/astro-sanity-clean - чистый шаблон Astro + Sanity.

zenblog.com - маленькая CMS для блога.

hashnode.com - блог и документация для разработчиков и команд.

Автоматизация и сервисы

make.com - визуальные сценарии автоматизации между сервисами.

pipedream.com - автоматизация, где рядом живут API, код, базы и ИИ.

zapier.com - классический клей между сервисами.

convex.dev - fullstack TypeScript-платформа с реактивной базой.

medusajs.com - открытые блоки для e-commerce.

refine.dev - open-source альтернатива Retool для внутренних инструментов.

loops.so - email-платформа для SaaS.

serpapi.com - API для выдачи Google и других поисковиков.

Просто приятное

asoftmurmur.com - фоновые звуки дождя и ветра.

Микшер на несколько дорожек: можно смешать дождь с далеким громом и убрать птиц. Работает лучше плейлистов «для концентрации», потому что в нем нет мелодии, за которую цепляется внимание.

thanks.dev - донаты авторам библиотек.

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

notbyai.fyi - бейдж «сделано человеком».

symbl.cc - эмодзи и юникод-символы с нормальным поиском.