Дизайн насмотренность

Липкий Dynamic Island на SwiftUI

GooeyBlobs — небольшая опенсорсная реализация «жидкого» эффекта, когда две формы при сближении слипаются в одну, а затем снова разделяются. Такой приём можно использовать для pull-to-refresh, Dynamic Island, переключателей и других микроанимаций.

Вся магия собрана на стандартном SwiftUI Canvas через blur и alphaThreshold — без Metal. В репозитории лежит готовый Swift-код, который можно забрать и переделать под свой интерфейс.

👉🏻https://github.com/radiofun/gooeyblobs/tree/main

#ui #animation #mobile #prototype #ai_code

Библиотека WebGL-эффектов для веба

Canvas UI — опенсорсная библиотека интерактивных эффектов: жидкое стекло, ткань, частицы, искажения, размытие и другие штуки. Каждый компонент доступен для React, Solid, Preact, Vue, Svelte и чистого TypeScript.

Компоненты можно установить одной командой, а затем полностью менять под свой проект. Есть поддержка AI-агентов через shadcn MCP — можно попросить нейронку найти и подключить нужный эффект.

👉🏻https://canvasui.dev/

#ui #animation #web #prototype #ai_code

Деплой сайта простым перетаскиванием

Vercel Drop — браузерный инструмент для быстрого деплоя без Git, CLI и локальной настройки. Достаточно перетащить файл, папку или zip в окно браузера — Vercel создаст проект и даст живую ссылку.

Работает не только со статикой: поддерживаемые фреймворки вроде Next.js сервис распознаёт и собирает сам. Удобно для публикации прототипов и сайтов, выгруженных из AI-конструкторов.

👉🏻https://vercel.com/drop

#web #prototype #ai_code

Сжатие видео прямо в браузере

Rotato Video Compressor — бесплатный инструмент для быстрого сжатия видео без установки софта. Просто кидаешь файл в браузер, сервис уменьшает его размер вплоть до 90% и сразу показывает сравнение с оригиналом.

Самое приятное — видео никуда не загружается и обрабатывается прямо на устройстве через FFmpeg. Поддерживает MP4, MOV, AVI и другие форматы. Пригодится для видео в презентациях, телеге и всяких прототипах, где исходник внезапно весит полгига.

👉🏻 https://tools.rotato.app/compress

#web #tools #video

Ротко под текущую погоду

Current Rothko — сайт, который подбирает картину Марка Ротко под погоду в любой точке мира. Достаточно ввести город, а алгоритм выберет подходящее полотно из 89 работ, сопоставляя погоду с цветом, яркостью, температурой и общим настроением картины.

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

👉🏻https://rothko.joonas.wtf/

#web #graphic #inspiration

Голосовая клавиатура для русского языка

Тайп — голосовая клавиатура для Mac на базе GigaAM от Сбера. Зажимаешь клавишу, говоришь — текст автоматически появляется в активном поле. Всё работает локально без интернета, голос и распознанный текст не отправляются на сервер.

Особенно интересно, что инструмент заточен именно под русский язык: в тесте разработчиков GigaAM распознаёт минуту речи примерно за 2,5 секунды. Для бета-тестеров Тайп обещают оставить бесплатным навсегда.

👉🏻https://gigatype.app/

#ai #tools #productivity

Дизайн-аудит для AI-агентов

Taste Lab — скилл для Claude Code и Gemini CLI, который разбирает любой сайт и вытаскивает не только токены, но и логику дизайна: цвета, типографику, отступы, повторяющиеся паттерны и причины конкретных решений.

На выходе получаются Design Map и Taste DNA в md и json — их можно использовать как контекст для агента, чтобы он не просто копировал референс, а понимал, почему дизайн устроен именно так. Есть готовая интеграция с Cursor, Claude Code, Copilot, v0, Figma Make и другими инструментами.

👉🏻https://www.tastelab.xyz

#ai #ux #web #designsystem #ai_code

Опенсорсные шейдеры для React

Paper Shaders — библиотека готовых шейдеров от команды paper.design. Внутри фильтры для изображений, mesh-градиенты, dithering, grain, liquid metal, noise, metaballs, god rays и другие эффекты.

Все эффекты можно подключить через npm и использовать прямо в React-проектах без дополнительной инфраструктуры. Хорошая штука для креативных лендингов, промо и экспериментов с графикой в вебе.

👉🏻https://shaders.paper.design/

#web #graphic #animation #react #ai_code

Дизайн-система для AI-агентов

Astryx — опенсорсная дизайн-система, которая восемь лет развивалась. Внутри больше 160 React-компонентов, готовые шаблоны страниц, тёмная тема и гибкая настройка под бренд. Сейчас система доступна в бете.

Отдельно интересно, что Astryx сразу сделана под работу с AI-агентами: через CLI или MCP агент может сам собирать проект, искать компоненты и шаблоны, генерировать темы и читать специальную документацию.

👉🏻https://astryx.atmeta.com/

#ui #web #ai #designsystem #ai_code

ИИ-конструктор сайтов с нормальным кодом

Prime UI — конструктор сайтов, который помогает пройти путь от структуры и вайрфреймов до готового сайта на Next.js и Tailwind. Можно генерировать варианты страниц, собирать лендинги, блоги, документацию и другие типовые разделы из 200+ компонентов.

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

👉🏻https://primeui.com/

#ai #web #ui #inspiration #ai_code

Полутона прямо в браузере

Halftone in the Browser — разбор того, как воссоздать полиграфический эффект полутонов прямо в браузере через Canvas. Можно менять частоту сетки и форму точек, делать интерактивный halftone по наведению и даже собирать из той же логики объёмные волны.

Внутри много интерактивных примеров и готовых фрагментов кода — можно сразу утащить эффект в свой сайт или прототип.

👉🏻https://www.carmenansio.com/articles/halftone-in-the-browser/

#graphic #web #animation #read #ai_code

Симулятор доступности интерфейсов

«Посмотри моими глазами» — интерактивный тренажёр, который показывает одну и ту же карточку товара глазами человека с дальтонизмом, катарактой, туннельным зрением, дислексией или тремором. Можно переключать состояния и сразу смотреть, какие элементы интерфейса становятся проблемными.

Хороший способ на практике почувствовать, зачем нужны контраст, понятные статусы, крупные зоны нажатия и другие стандарты доступности.

👉🏻https://viktoriafilippova.github.io/perception-simulato/

#ui #ux #web #accessibility

39 принципов дизайна AI-интерфейсов

Тарас Бакусевич собрал прикладной фреймворк из 39 принципов для проектирования интерфейсов с ИИ. Внутри — как объяснять возможности и ограничения модели, калибровать доверие, показывать источники, давать пользователю контроль и проектировать ошибки и автономные действия.

Много хороших и плохих примеров из реальных продуктов: ChatGPT, Claude, Cursor, Notion, Perplexity, NotebookLM и других. Полезная база, чтобы не проектировать AI-продукт как «обычный интерфейс + чат».

👉🏻https://uxdesign.cc/39-principles-for-designing-human-ai-interaction-87be5fabdbbe

#ai #ux #ui #read

Генератор люстр

Lustra — залипательная онлайн-игрушка, в которой можно бесконечно генерировать люстры и вращать их в 3D.

Получаются странные сложные конструкции из подвесов, ламп и декоративных элементов. Можно рандомизировать варианты и сохранять понравившиеся.

👉🏻https://lustra.evlkv.ru

#3D #graphic #inspiration #web

Аудит вайбкод-интерфейсов через Storybook

Storybook Workbench — набор агентных скиллов от Evil Martians для проверки интерфейсов, собранных с помощью AI. Агент проходит по кодовой базе, находит мёртвые компоненты, параллельно существующие дизайн-системы, ошибки и связи между страницами.

Всё это собирается в наглядный аудит через Storybook — можно посмотреть реальные состояния компонентов и понять, что именно стоит почистить или исправить. Устанавливается одной командой и работает с AI-кодинг инструментами.

👉🏻https://evilmartians.com/chronicles/storybook-workbench-audit-vibe-coded-uis-and-find-hidden-bugs-in-hours

#ai #ui #web #read #ai_code

Редактор эффектов для фото и видео

ASCII Magic — браузерный редактор, который превращает фото и видео в ASCII, пиксель-арт, воксели, мозаику, halftone, glitch, LEGO и другие стили. Всего есть 13 основных способов обработки, плюс отдельные постэффекты вроде CRT, bloom, зерна и хроматических аберраций.

Эффекты применяются прямо в браузере и обновляются в реальном времени. Можно комбинировать несколько обработок и выгружать результат в увеличенном разрешении.

👉🏻https://www.ascii-magic.com/

#graphic #web #inspiration #animation

Звуки для интерфейсов без аудиофайлов

Tiks — мини-библиотека процедурных звуков для интерфейсов: клики, переключения, успех, ошибка, уведомления и другие события. Всё синтезируется на лету через Web Audio API, без использования аудиофайлов. Весит около 2 КБ и работает без зависимостей.

Есть несколько готовых тем звучания и простое API. Подойдёт для прототипов и веб-интерфейсов, где хочется быстро добавить звуковой фидбек без возни с отдельными файлами.

👉🏻https://rexa-developer.github.io/tiks/

#ui #web #sound #prototype #ai_code

Персональный сайт продуктового дизайнера

Diego — персональный сайт продуктового дизайнера Диего Вильяроэля из Мадрида. Минималистичная чёрно-белая база, крупная типографика и аккуратные цветовые акценты.

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

👉🏻https://diegovz.com/

#web #ui #portfolio #inspiration

Сайт бренда спортивного питания с крутым 3D

Foulplay — сайт бренда креатина для спортсменов с довольно необычной визуальной подачей. Много крупной типографики, полноэкранных 3D-сцен, анимаций и нестандартной работы с карточками продуктов.

Хороший референс того, как довольно утилитарный продукт можно упаковать почти как модный бренд. Пригодится для насмотренности по промо-сайтам и e-commerce.

👉🏻https://www.usefoulplay.com/

#web #3D #animation #branding #inspiration

Алгоритм для визуализации сложных данных

Таня Мисютина собрала в одном месте все материалы про свой алгоритм Δλ — пошаговый подход к созданию визуализаций данных. Внутри пять этапов: от понимания реальности за данными и выделения ключевой сущности до выбора визуального представления и сборки дашборда.

👉🏻https://bureau.ru/soviet/20260708/

#read #analytics #graphic