Совет по графическому дизайну: никогда не используйте чистый чёрный цвет (#000000).

Чистый чёрный выглядит слишком резким и может сильнее напрягать глаза.

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

👉 @PortalToDesign

Появился инструмент для создания Android-интерфейсов по новой дизайн-системе Google Material 3 Expressive:

https://lnkiai.github.io/m3e-canvas/

Достаточно собрать интерфейс прямо в браузере, и сервис автоматически сгенерирует готовый промпт для ИИ-агента.

Если делаете Android-приложения через вайбкодинг, стоит попробовать. 🥳

👉 @PortalToDesign

UI/UX-дизайнеры, вот мои любимые ресурсы в интернете для поиска вдохновения.

Сохраняйте, чтобы не потерять:

Веб-сайты → http://godly.website
Портфолио → http://prettyfolio.com
Bento Grid → http://bentogrids.com
Галерея изображений → http://ogimage.gallery
Мобильные и веб-приложения → http://mobbin.com

👉 @PortalToDesign

UI/UX-дизайнеры, возможно, это именно та библиотека анимаций иконок, которую вы искали.

Morphicons позволяет плавно превращать одну SVG-иконку в другую с помощью бесшовных анимаций.

Работает с популярными библиотеками иконок, включая Lucide, Tabler и Heroicons, не имеет зависимостей и весит всего 6,5 КБ.

https://www.morphicons.com/

Сохраняйте, чтобы не потерять

👉 @PortalToDesign

9 сайтов, которые помогут сгенерировать для вас DESIGN.md

1. styles.refero.design — библиотека готовых дизайн-систем реальных сайтов для AI-агентов.
2. designmd.me — вставьте URL и получите DESIGN.md с цветами, типографикой и компонентами.
3. open-design.ai — open-source workspace с готовыми DESIGN.md-системами и поддержкой локальных AI-агентов.
4. designmd.supply — превращает публичный сайт в готовый DESIGN.md для AI-агента.
5. getdesign.md — большая коллекция готовых DESIGN.md + создание анализа по своему URL.
6. aura.build — импортирует сайт по URL, извлекает его визуальную ДНК и позволяет использовать её в AI-дизайне.
7. neuform.ai — создаёт AI-интерфейсы и переиспользуемые DESIGN.md-дизайн-системы.
8. design-md.hyperbrowser.ai — извлекает DESIGN.md из любого сайта через Hyperbrowser.
9. typeui.sh — генерирует и предлагает готовые DESIGN.md для AI-кодинга.

Теперь у ИИ будет на одну причину меньше сделать вам очередной фиолетовый градиент 🤭

👉 @PortalToDesign

Библиотека 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