Библиотека UI-компонентов с набором готовых анимированных элементов для интерфейсов

Компоненты можно открывать непосредственно в AI-инструментах для разработки, включая Claude и ChatGPT, чтобы агент самостоятельно установил и подключил их к проекту.

Для ручной интеграции доступны полный исходный код и инструкции по настройке.

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

https://github.com/Harshjdhv/componentry

👉 @PortalToDesign

👉 @PortalToDesign

Meta выложила в опенсорс свою внутреннюю дизайн-систему — Astryx

Её используют внутри Meta уже более 8 лет, и на ней работают 13 000+ внутренних приложений.

→ 150+ доступных UI-компонентов
→ 7 встроенных брендовых скинов
→ кастомизируемые темы
→ рассчитана как на разработчиков, так и на ИИ кодинг-агентов

https://astryx.atmeta.com/

👉 @PortalToDesign

Дизайнерам и фронтам вкусная плюша генератор палитр «COLORPALETTEPRO»

Нашёл удобный инструмент создания и настройки цветовых палитр, который работает как «синтезатор цвета».

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

Можно менять яркость, насыщенность, оттенки, проверять контраст (под accessibility), а потом экспортировать палитру в CSS, HEX и другие форматы.

👉 @PortalToDesign

CSS Pattern

Сборник красивых фонов на чистом CSS

Можно настраивать цвета, плотность, отступы, размеры и другие параметры, чтобы идеально попасть в ваш дизайн

https://css-pattern.com/

👉 @PortalToDesign

Мгновенно извлекайте всю дизайн-систему любого сайта

Dembrandt — это NPM-пакет, который сканирует сайт и вытаскивает его визуальные стилевые параметры: цвета, типографику, отступы и паттерны лейаута.

Вместо того чтобы вручную инспектировать стили в DevTools, вы можете быстро понять, как сайт структурирован и стилизован

GitHub тут, сайт здесь 👜

👉 @PortalToDesign

Этот мощный инструмент для работы с цветом позволяет тестировать палитры на реальных дизайн-примерах, упрощая подбор оптимальных сочетаний для интерфейсов

Идеально подходит для генерации идей и создания визуально безупречных UI 👍

https://palettemaker.com/

👉 @PortalToDesign

Только что нашёл очень крутой каталог UI skills для design engineers.

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

Посмотреть → ui-skills.com

👉 @PortalToDesign

«SVGL» огромная коллекция SVG-иконок

Библиотека SVG-логотипов популярных продуктов и сервисов. С более чем 400+ иконок в категориях — от дизайна и баз данных до AI и DevTools — сервис позволяет быстро найти, скачать или вставить SVG прямо в проект 🥳

👉 @PortalToDesign

Не каждая UX-проблема требует одинаковой срочности.

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

Сохраните для следующего design sprint.

👉 @PortalToDesign

👉 @PortalToDesign

Легендарный бренд клавиатур Keychron только что сделал нечто масштабное: он выложил в открытый доступ все дизайны и исходники своих клавиатур! 83 модели и 640 дизайн-проектов.

https://github.com/Keychron/Keychron-Keyboards-Hardware-Design

👉 @PortalToDesign

MiniMax выпустила крупное обновление MiniMax Design. Да, у MiniMax уже давно есть отдельная платформа для дизайнеров:

https://design.minimax.io/ 🤓

Теперь внутри платформы доступна GPT-6 Astra, а через MCP можно подключать Photoshop, Blender и After Effects.

Одним промтом можно создать 3D-модель прямо в Blender, а ИИ-клипы превратить в редактируемый проект After Effects.

Также добавили совместные проекты для работы с командой.

👉 @PortalToDesign

Откопал мощный редактор с кучей красивых готовых mesh-градиентов, которые можно визуально кастомизировать и экспортировать как изображения или даже анимированные видео

https://colorflow.ls.graphics/

👉 @PortalToDesign

Превращаем Claude в ПРОФЕССИОНАЛЬНОГО UI/UX-дизайнера — нашли набор скиллов со 138 готовыми дизайн-системами.

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

Забираем тут.

👉 @PortalToDesign

Хороший референс раскрывается после бока 👌

👉 @PortalToDesign

Более 490 бесплатных инструментов в одном браузерном сервисе

Работает без регистрации и загрузки файлов на сервер - все данные обрабатываются локально в браузере.

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

Полезная находка для тех, кто ценит время и конфиденциальность ✌️

https://brevio.pro/

👉 @PortalToDesign

Этот инструмент позволяет вытаскивать markdown, дизайн-системы, брендовые ассеты, шрифты, цвета и многое другое практически с любого сайта. Плюс у него есть API, чтобы напрямую встраивать всё это в ваши приложения и AI-воркфлоу.

Идеально подходит для веб-скрейпинга, ресёрча и для того, чтобы давать AI-агентам гораздо более глубокий контекст о сайтах ✌️

👉 @PortalToDesign

Полезный кейс по UI-дизайну:

Перестройте расположение элементов на странице, проверьте, действительно ли вся информация необходима, и определите уровень её важности.

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

Также обращайте внимание на визуальное выравнивание элементов интерфейса — даже эти изменения могут заметно улучшить UI.

👉 @PortalToDesign

Делаем стильные градиентные фоны с помощью новой функций Shader в Figma.

👉 @PortalToDesign

Генерим стильные градиентные фоны с эффектом стекла — быстро, красиво и без возни.

Отлично залетает для лендингов, интерфейсов и обложек.

👉 @PortalToDesign