Фронтенд и UI
apple-design
Принципы плавных интерфейсов Apple, переложенные на веб-пружины и жесты.
Что это
Знания, собранные из дизайн-докладов Apple на WWDC, прежде всего Designing Fluid Interfaces, и переложенные на CSS, Pointer Events и библиотеки пружин. Охватывает отклик, прерываемость, инерцию, материалы, типографику и доступность.
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible tran
Почему это важно для дизайна
- Отклик срабатывает на pointer-down, поэтому нажатые элементы перестают ощущаться мёртвыми.
- Анимации стартуют от текущего значения на экране, что убирает заметные рывки при прерывании.
- Быстрые взмахи проецируют точку приземления, поэтому броски приходят туда, куда целился жест.
Что внутри
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
Как установить
apple-design
-
Клонируйте репозиторий.
git clone https://github.com/emilkowalski/skills -
Укажите Codex на файл скилла.
skills/apple-design/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Попросите Codex собрать шит, drawer или перетаскивание.
-
Он ведёт слежение 1:1 через захват указателя и записывает историю скорости.
-
При отпускании он передаёт скорость в пружину с заданными значениями затухания.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке codex-design ↗Другие дизайн-плагины для Codex
Фронтенд и UI Что он делает gpt-taste Собирает премиальные лендинги в духе award-сайтов: GSAP-анимация скролла и плотные бенто-сетки без пустот. 
Дизайн-системы Что он делает Stitch Design Taste Пишет DESIGN.md, который уводит Google Stitch от шаблонных экранов. 
Фронтенд и UI Что он делает image-to-code Сначала генерирует изображения дизайна, разбирает их, а затем собирает соответствующий фронтенд-код. 
Фронтенд и UI Что он делает imagegen-frontend-mobile Генерирует премиальные флоу экранов мобильного приложения как изображения, а не код. Следующий шаг
Проектируйте с Open Design без возни с настройкой
Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.