Фронтенд и UI
Details that make interfaces feel better
Шестнадцать конкретных правил полировки UI с чек-листом ревью.
Что это
Набор принципов дизайн-инженерии для полировки интерфейса: концентрические радиусы, оптическое выравнивание, слоёные тени, каскадные анимации появления, табличные цифры, области нажатия и точность в transition.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
Почему это важно для дизайна
- Называет точные значения, поэтому масштаб при нажатии всегда 0.96, а не догадка.
- Чинит рассогласование вложенных радиусов, из-за которого большинство компонентов выглядят неправильно.
- Ловит сдвиг раскладки от меняющихся чисел прежде, чем он дойдёт до пользователей.
Что внутри
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
Как установить
Details that make interfaces feel better
-
Клонируйте репозиторий.
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
Укажите Codex на файл скилла.
skills/make-interfaces-feel-better/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Направьте Codex на компонент и попросите применить принципы.
-
Запросите ревью: находки возвращаются таблицами «Было» и «Стало».
-
Прогоняйте чек-лист из четырнадцати пунктов перед мёрджем любого фронтенд-изменения.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.