Дизайн, код, motion, библиотеки и странные полезные штуки, которые жалко потерять.
обновлено 03.09.2026, 02:22
01Open ↗Refero Styles — каталог 2,000+ AI-readable дизайн-систем с реальных продуктовых сайтов. Можно открывать стили и забирать цвета, типографику, spacing, компоненты и готовый DESIGN.md для Cursor, Claude Code, Codex, v0 или Lovable.
02Open ↗Platega — платёжный сервис для быстрого запуска монетизации стартапа. Позволяет принимать оплату картами, через СБП и криптовалютой на сайте, в приложении или по ссылке.
03Open ↗PostHog — платформа продуктовой аналитики для стартапов: поведение пользователей, записи сессий, тепловые карты, опросы, эксперименты и отслеживание ошибок.
React Native Motion — подборка/библиотека красивых анимаций для React Native и Expo. Полезно как референс и как готовая база для мобильных микроинтеракций: Skia-шдеры, morph-текст, ChatGPT attachment menu, glass tab bar, radial menu, stack toast.
metal-fx — React-библиотека с анимированным WebGL “liquid metal” эффектом для кнопок, chips, иконок и UI-компонентов. Делает живую металлическую рамку/свечение вокруг элемента, с пресетами chromatic, silver и gold.
06Open ↗Liquid Gooey — React-библиотека для “жидких” gooey-эффектов: water-drop merge, вязкое слияние элементов, резиновые trails и Apple-like smooth micro-interactions. Полезно для hover menu, tab slider, форм, промо-интерфейсов и UI Samurai-разборов про tactile/motion polish.
07Open ↗Пост с демо “text warp animation” и ссылкой на vault с кодом. Полезный референс для живой типографики, промо-блоков, обучающих разборов про motion в интерфейсах и дизайн-инжиниринг.
Pocket — маленький AI-девайс, который превращает всё, что пользователь говорит и слышит, в заметки, action items и поиск. Продукт соединяет custom hardware, AI и software вокруг сценария «заметки в реальном мире» для людей, которые много говорят и быстро двигаются.
@web-kits/audio — библиотека для декларативного синтеза звука в вебе. Её можно использовать для UI-звуков, sound effects, интерактивных демо и интерфейсов, где звук становится частью микровзаимодействий.
10Open ↗Sound — скилл для агентов, который добавляет живые UI-звуки без аудиофайлов: всё генерируется из шума через Web Audio API. За счёт процедурности один и тот же тап каждый раз звучит чуть по-разному, а генератор весит около 3 КБ.
WebHaptics — библиотека для добавления haptic feedback на мобильном вебе. Полезный референс к теме тактильной обратной связи: как интерфейс может не только показывать и звучать, но и физически «откликаться» на действие.
SND — библиотека готовых UI-звуков для интерфейсов: клики, toggles, typing, notifications, caution, celebration, alarm и другие состояния. Полезный референс для темы звука как части UX, микровзаимодействий и мультисенсорного интерфейса.
Mega Warp — бесплатный плагин для трансформации слоёв: перспектива, изометрия, 3D-повороты, изгибы и мокапы произвольной формы. Полезен для быстрых презентаций интерфейсов, мокапов, промо-визуалов и учебных разборов в UI Samurai.
14Open ↗Amicro — curated library премиальных micro-interactions и transition-компонентов для React. Обещает loaders, card hovers, button interactions и плавные transitions, которые можно добавить в приложение одной CLI-командой. Open-source.
Подборка бесплатных/open-source ресурсов для кодеров и дизайн-инженеров: иконки, CSS-кнопки, галерея компонентов, motion effects и UI-библиотека. Полезно для быстрых прототипов, UI Samurai, лендингов и референсов по интерактивным компонентам.
OriginKit — библиотека анимированных UI-компонентов: glowing borders, fluid cursor, particles, text effects, image galleries, background animations и т.п. В видео показано, что компоненты можно копировать бесплатно и подключать к агентам через MCP, чтобы Claude/Codex/Cursor/Framer могли доставать готовые production-ready компоненты.
Шейдер/плагин для Figma, который позволяет быстро превращать плоские элементы и текст в глянцевые объёмные 3D-объекты с эффектом “inflated/plastic”. Полезно как инструмент для визуальных концепций, промо-графики, постеров, обложек и UI Samurai-референсов по эффектам.
Бесплатный open-source инструмент для создания красивых записей экрана, продуктовых демо, walkthrough-видео и туториалов. Полезен как альтернатива Screen Studio для стартапов, UI Samurai, лендингов, документации и коротких demo-видео.
Часовой разбор архитектуры self-improving AI-агентов: soul.md как постоянная “душа”/system prompt, harness как управляющий слой для LLM, память через RAG, tool-calling loop, guardrails, LLMOps/tracing и сжатие опыта в устойчивые факты. Полезный референс для архитектуры AI-наставника в UI Samurai и персональных агентов с памятью.
Kid Pak разбирает, как делает AI launch-видео почти “one-shot”: модель пишет код анимации, Remotion рендерит сцены, референсы измеряются по кадрам, музыка фиксируется до визуала, а все правки складываются в taste.md. Главная идея — качество создаёт не модель сама по себе, а система вкуса, approval gates и накопленные правила.
Open-source дизайн-система от Spline. Полезно как референс для структуры дизайн-системы, визуального языка, компонентов и возможной базы для UI Samurai / дизайн-инструментов.
Набор AI-скиллов от Emil Kowalski для дизайнеров и инженеров, чтобы агенты лучше делали интерфейсы: анимации, easing, микроинтеракции, popover/dropdown behavior, Apple-style motion и строгий ревью UI-анимаций. Полезно подключать в стартапах, когда Арман вайбкодит интерфейсы и хочет получать не просто рабочий UI, а UI с нормальным вкусом и polish.
Референс крутого UI-интеракшена, где важна не только визуальная анимация, но и звуковое сопровождение. Полезно для разбора связки motion + audio feedback: клики, переходы, реакция интерфейса, ощущение “дорогого” взаимодействия.
Подборка готовых easing-кривых и библиотек для интерфейсной анимации: визуально выбирать кривые, использовать в CSS/React/JS, собирать дизайн-системные motion tokens и делать более дорогие микроанимации.
nanoGPT — минималистичный репозиторий Андрея Карпати для обучения и файнтюнинга GPT-подобных моделей. Полезен как понятная точка входа в устройство LLM: чистый код, без тяжёлой архитектурной магии, можно использовать для обучения дизайнеров/продуктовых людей базовой механике AI.
Paper Shaders — коллекция быстрых zero-dependency шейдеров для проектов: можно использовать как React-компоненты или GLSL. Полезно для выразительных лендингов, motion/visual effects, UI Samurai, прототипов и визуальных экспериментов в web-интерфейсах.
Paper — современный дизайн-инструмент с упором на connected canvas: команды, AI-агенты, код и данные в одном пространстве. Полезно как референс для будущего дизайна с агентами, design-to-code workflow, UI Samurai и наблюдения за рынком Figma/Framer/Lovable-подобных инструментов.
Omma от Spline — инструмент, который по текстовому описанию собирает интерактивные сайты, лендинги, web/app-прототипы, 3D-сцены, игры и демо. Полезен как референс для AI-first дизайн-инструментов, no-code/low-code builders, 3D web и будущих материалов UI Samurai про новые способы прототипирования.
Open-source инструмент Website Downloader, который скачивает исходники страницы вместе с assets и конвертирует ссылки в локальные, чтобы сайт работал офлайн. Полезно для архивации сайта, изучения чужого кода, клонирования/разбора проекта и сохранения референсов.
Напоминание, что для сжатия видео и медиа часто не нужен отдельный интерфейс или онлайн-сервис: FFmpeg бесплатный, быстрый и работает прямо из терминала. Многие «сжиматоры» по сути являются обёртками над FFmpeg, поэтому полезно держать его как базовый инструмент для контента, демо и видео.
Официальный навык Anthropic frontend-design, который заставляет Claude сначала выбрать эстетическое направление, а уже потом писать код интерфейса. Идея — уйти от типичного AI slop: Inter, фиолетовый градиент, стандартный стартап-макет. Можно задавать направления вроде brutalist, editorial, retro-futuristic, luxury, maximalist; результатом могут быть HTML/CSS/JS, React или Vue.
Подборка библиотек с анимированными иконками. Полезно для UI, лендингов, продуктовых фич, микроанимаций, презентаций и визуального оживления интерфейсов.
Supa Gradient — прокаченный плагин для создания градиентов различной сложности. Полезен для визуального дизайна, UI, промо-графики, hero-секций, обложек и экспериментов с цветом.
ScreenStory — приложение для macOS, которое автоматически превращает обычную запись экрана в красивые видео-ролики: расставляет зумы и рендерит курсор. Подходит для динамической демонстрации дизайнов, новых фич, постинга в соцсети и записи туториалов.
Pacdora — платный, но недорогой конструктор упаковок для дизайнеров, которые регулярно работают с packaging design. Позволяет быстро собрать конструкцию и развертку, натянуть графику, покрутить упаковку в 3D, открыть/закрыть, сделать видео-демонстрацию и скачать результат в нужном формате.
36Open ↗Origin UI — сайт с максимально подробными состояниями базовых компонентов: кнопки, инпуты, чекбоксы, радио, свичи; скоро селекты. Полезно дизайнерам для проработки нюансов дизайн-системы и разработчикам, потому что библиотека выложена на GitHub и её можно переиспользовать.
Годовая подборка лучших постов DesignOps за 2024 год. Полезна как карта тем для контента, карьерного развития дизайнеров и менеджеров: собеседования, красные флаги менеджера, ATS, защита дизайна, перфекционизм, Task Analysis, self-review, стратегическое мышление, B2B/B2C, поиск работы и терпение.
Чеклист вопросов, которые дизайнеру стоит задавать в конце собеседования, чтобы показать инициативность и не попасть в «кота в мешке». Вопросы помогают понять компанию, команду, рост, ожидания от роли, процесс планирования, качество разработки, руководителя и продуктовые стандарты. Полезно для менторства, подготовки дизайнеров к трудоустройству и материалов UI Samurai.
39Open ↗Двухдневный интенсив Сергея Мекрюкова/BangBangEducation по эмоциональному дизайну. День 1 — 3 часа теории: карта эмпатии, метафоры, три уровня Дональда Нормана, улучшение опыта и скрытие негативных моментов взаимодействия. День 2 — практический разбор работ участников по трём заданиям. Особенно ценны части про метрики, CSI/NPS и с чего начинать работу над эмоциональным дизайном.
Icônes — удобная база иконок с большим количеством icon packs. Можно копировать SVG прямо в буфер; паки идут по открытой лицензии, кроме перепродажи. Полезно как быстрый источник иконок для интерфейсов, лендингов, прототипов и фронтенда.
Подборка бесплатных уроков Helper по визуалу и базовым дизайн-навыкам: Figma, чистый дизайн, стандартные блоки интерфейса, декор, шрифты, фотографии, референсы, логика компонентов, выравнивание, стилистика, тексты, wireframes, лендинги, UI-kit и иконки. Полезно как база для учеников/подписчиков и как референс образовательного контента.
Статья с 10 практиками развития эстетического интеллекта и насмотренности. Ценно тем, что собраны не только базовые советы для дизайнеров, а более глубокие способы развития визуального опыта, красоты и чувствительности к визуальной культуре; часть практик из бакалавриата по дизайну.
43Методика для удержания консистентного стиля при генерации серии изображений: сначала дать системный промпт на изучение стиля, затем загрузить 5–15 референсов и попросить описать стиль в JSON-схеме. В схеме фиксируются камера, геометрия, материалы, цвета, свет, рендер и эстетика. Подходит для массовой генерации 3D-иконок и визуалов в одном стиле.
Бесплатная библиотека web-haptics для использования haptics — микро-вибраций — в веб-интерфейсах. Работает на iOS и Android, устанавливается через npm i web-haptics. Полезно для мобильных web apps, Telegram Web Apps, интерактивных прототипов и продуктовых микроинтеракций.
Бесплатный генератор 3D-объектов из SVG-файлов, пиксель-арта или текстового запроса. Объекты можно вращать, анимировать и настраивать: освещение, материалы, фон и текстуры. Результат можно экспортировать в 4K или добавить на сайт. Полезно для быстрых 3D-визуалов, лендингов, промо, дизайн-концептов и UI Samurai/контента.
46Toolfolio — база дизайн-инструментов, где в разделе Design собраны десятки категорий: UI, 3D, генерация изображений, прототипирование, иконки, типографика, видео, мокапы и другие. Ценно тем, что внутри не просто абстрактные «лучшие сервисы», а конкретные, в том числе нишевые инструменты, которые можно утащить в работу.
Очень сильная статья про анимации и interaction design: автор разбирает анимации из экосистемы Apple и объясняет, почему они работают. Арман относит её в коллекцию обязательных к прочтению статей вместе с Benji — Family Values и Даня Ковчий — Образы и Модели.
UI-киты Telegram Web Apps под iOS и Android. Полезно, чтобы быстрее проектировать Telegram Web Apps и не собирать базовые интерфейсные паттерны с нуля; может пригодиться даже вне конкурса.
Recordly — бесплатный open-source инструмент для записи красивых скринкастов с автозумом, сглаженным курсором, фонами и экспортом в MP4/GIF. Может быть полезен дизайнерам, которые хотят делать более эффектные демонстрации интерфейсов и кейсов в портфолио; альтернатива дорогому Screen Studio.