Много экспериментировал с liquid glass для веба в прошлом году, используя CSS + SVG
Ключом к кроссбраузерности стал переход с svg backdrop-filter на обычный filter, а также синхронизация текстур карты смещения (displacement map)

👉 @PortalToDesign

Кажется, morphing braille loader постепенно становится новым стандартом.

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

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

👉 @PortalToDesign

Похоже, работать с OKLCH-цветами в терминале стало заметно удобнее.

oklch-skill добавляет нормальный workflow для работы с современными цветовыми палитрами прямо из терминала, без постоянных прыжков между браузером, дизайн-инструментами и генераторами цветов.

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

npx skills add jakubkrehel/oklch-skill

https://github.com/jakubkrehel/oklch-skill

👉 @PortalToDesign

websitevice — новая библиотека сайтов для воровства идей вдохновения

👉 @PortalToDesign

Совет: не допускайте повторного переноса текста при появлении полосы прокрутки.
Использование scrollbar-gutter: stable решает эту проблему.

👉 @PortalToDesign

Совет по дизайн-инжиринг:

Отделяйте объект от его тени.
Когда элемент приподнимается над поверхностью, тень не обязана двигаться вместе с ним. Если оставить тень на месте и постепенно уменьшать её интенсивность по мере удаления объекта, можно добиться более убедительного ощущения глубины и физичности.

При аккуратном использовании этот приём делает интерфейс более осязаемым и помогает избежать ощущения, будто перед пользователем просто набор слоёв, парящих в воздухе.
Я бы не применял это повсюду, но в местах, где нужен дополнительный акцент, эффект может оказаться очень выразительным.

const card = document.querySelector(".notification");
const shadow = document.querySelector(".shadow");

card.animate(
  [
    { transform: "translateY(0)" },
    { transform: "translateY(-160px)" },
  ],
  {
    duration: 900,
    easing: "cubic-bezier(.64,0,.78,0)"
  }
);

shadow.animate(
  [
    { opacity: 0.5, transform: "scaleX(1)" },
    { opacity: 0, transform: "scaleX(.35)" },
  ],
  {
    duration: 700,
    easing: "ease-out"
  }
);

👉 @PortalToDesign

В Figma появился новый инструмент для автоматизации рутинных задач — Check Designs.
Теперь проверка макета на соответствие дизайн-системе занимает считанные секунды.

Чтобы проверить фрейм, просто нажмите правой кнопкой мыши и выберите Check Designs.
Инструмент мгновенно подсветит:

Стили и переменные: привязаны ли цвета и типографика к вашим Libraries.
Доступность: соответствуют ли цвета требованиям по контрастности.
Консистентность: совпадают ли отступы и радиусы скругления с настройками дизайн-системы.
Состояние компонентов: есть ли «отсоединённые» (detached) компоненты, которые требуют обновления.

Все найденные проблемы можно исправить в один клик, а после завершения проверки — изменить статус макета на Ready for dev.
Функция доступна для всех платных подписок Figma.

👉 @PortalToDesign

Прокачай чувство UI-анимации 💪

Набор быстрых упражнений для тренировки навыка motion design: ищешь ошибки в анимации, называешь их и исправляешь.

→ https://emilkowal.ski/ui/train-your-judgement

Автор: Emil Kowalski

👉 @PortalToDesign

zcool — а это китайская копия беханса, с необычными работами китайских дизайнеров

👉 @PortalToDesign

Группы кнопок для компактных действий над продуктом.

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

👉 @PortalToDesign

Как я использую Claude Code и Remotion для создания анимированных диаграмм.
Это не один промпт.

Сначала выбираю формат входа, который модель хорошо понимает. Например, Mermaid для блок-схем. Claude пишет его уверенно, поэтому он становится точкой входа.

Через Claude собираю компоненты, которые принимают этот формат и уже внутри фиксируют правила: дизайн-система, паттерны анимации, правила раскладки.

Дальше я просто описываю задачу обычным языком, например: «сделай блок-схему для проверки уровней доступа в скрипте», а Claude переводит это в наш формат входа:

flowchart TD
  t1[Tier 1<br/>read-only]
  t2[Tier 2<br/>in-project writes]
  t3[Tier 3<br/>everything else]
  action[Action] --> t1
  action --> t2
  action --> t3
  t1 --> skip([Skips classifier])
  t2 --> skip
  t3 --> classifier{Classifier}
  classifier --> approve[Approve]
  classifier --> deny[Deny]

Компонент дальше делает всё сам: раскладку, стили, появление узлов и связей. Плюс обрабатывает события для дальнейших шагов — например, “точка трассировки”, которая идёт по пути и подсвечивает узлы.
В конце я оборачиваю всё в отдельный CRT-шейдер компонент.

В итоге помогает общий язык с агентом. Когда я пишу «rise in fast on enter», он понимает это как: быстрое появление с движением вверх, из заданного смещения, с ускоренной длительностью и конкретной кривой Безье.

👉 @PortalToDesign

Знаешь, что PNG по сути сделали назло?

А JPEG просто выкидывает примерно половину цветов в картинке, потому что ты всё равно не заметишь.

Читай главу про сжатие изображений:

https://makingsoftware.com/chapters/image-compression

👉 @PortalToDesign

Хочешь использовать Claude Design без подписки на Claude?
Познакомься со skill baoyu-design, который переносит дизайн-движок Claude прямо в Hermes, Cursor, Claude Code, Codex или твоего локального агента.
Обычный промпт → получаешь отполированный UI-макет, прототип, wireframe или deck в виде самодостаточного HTML: весь CSS, JS и ассеты уже внутри.

Плюсы:
• 100% локально, ничего не нужно загружать
• Можно итерироваться через подход “point & edit” в превью
• Поддерживает офлайн-импорт Figma .fig файлов
• Результат сразу попадает в твой проект, его можно хранить в git
• Также можно экспортировать в PDF/PPTX

Репозиторий: https://github.com/JimLiu/baoyu-design

👉 @PortalToDesign