- Pinterest — мудборды и палитры
- Mobbin — экраны и флоу продуктов
- Cosmos — насмотренная эстетика
- Awwwards — лучшие сайты мира
- Name That UI — справочник компонентов
01Pinterest
Настроение и цвет
Огромная свалка визуальных идей на любую тему: палитры, обложки, раскладки, айдентика. Ищешь по словам вроде «beige branding» или «minimal landing» и собираешь доску под проект. ru.pinterest.com Нужно поймать общее настроение и цвет, а не конкретный интерфейс. Скриншот понравившегося пина плюс просьба собрать в этом настроении. «Вот референс настроения: [скриншот]. Собери [обложку/лендинг] в этой цветовой гамме и настроении под [мой продукт]» Быстрый способ задать Claude нужную эстетику одним изображением.
02Mobbin
Реальные экраны приложений
Библиотека реальных экранов из живых приложений и сайтов: онбординги, оплаты, профили, целые сценарии. Всё разложено по категориям и элементам. mobbin.com Проектируешь конкретный экран или флоу и хочешь подсмотреть, как это решают сильные продукты. Скриншот экрана плюс просьба повторить логику и структуру под твой продукт. «Вот экран из сильного приложения: [скриншот]. Повтори его логику и структуру, но под [мой продукт]» Готовые проверенные решения интерфейса вместо изобретения с нуля.
03Cosmos
Вкус и типографика
Эстетичный визуальный поиск и мудборды: дизайн, типографика, арт, фото. Чище и «вкуснее» Pinterest, меньше мусора, сильнее насмотренность. cosmos.so Нужна насмотренная эстетика и вкус, подобрать стиль и типографику. Пара скриншотов как визуальный ориентир плюс просьба держать такой же уровень. «Вот ориентир по вкусу: [скриншоты]. Держи такой же уровень эстетики и типографики в [макете]» Поднимает планку дизайна с «нормально» до «дорого» за счёт референса.
04Awwwards
Премиальные сайты
Витрина лучших сайтов мира с наградами. Анимации, необычные раскладки, премиальный веб-дизайн. Здесь берут вдохновение для эффектных лендингов. awwwards.com Делаешь сайт или лендинг и хочешь, чтобы он выглядел дорого и живо, с движением. Ссылка на понравившийся сайт плюс просьба собрать такой же по структуре и духу. «Вот сайт, который мне нравится: [ссылка]. Собери такой же по структуре и духу, но под [мой продукт]» Лендинг уровня награждённых студий как ориентир для Claude.
05Name That UI
Как называется элемент
Справочник по элементам интерфейса: как называется тот или иной компонент и как он выглядит. Бенто-сетка, скелетон, тост, степпер и десятки других. namethatui.com Видишь деталь, но не знаешь, как её назвать, чтобы попросить у Claude. Нашла название элемента здесь и пишешь прямо в задаче. «Добавь на страницу bento-сетку и toast-уведомление в стиле [мой продукт]» Точное слово вместо «сделай красиво», Claude сразу понимает, что нужно. // с чего начать Как этим пользоваться Находишь на любом из сайтов то, что цепляет, берёшь ссылку или скриншот и кидаешь Claude с задачей: «Вот референс. Собери в этом стиле и настроении, но под мой продукт: [что за продукт]». Чем конкретнее референс, тем ближе результат. Сохрани эти пять сайтов в закладки и возвращайся каждый раз, когда садишься собирать что-то визуальное с Claude.