Фронтенд и UI
Skeuomorphic UI
Придаёт кнопкам и панелям тактильную глубину слоёными градиентами и тенями.
Что это
Рецепт поверхностей для тактильного веб-UI: вертикальные градиентные заливки, отражающая градиентная рамка 1px, наложенные внешние и внутренние тени. Тиснёный текст, иконки и микротекстура опциональны.
Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, rea
Почему это важно для дизайна
- Приподнятые и нажатые состояния инвертируют глубину, поэтому контролы читаются как физические.
- Глубина остаётся направленной: свет сверху, тень снизу.
- Предостерегает от смешивания гласморфизма, неоморфизма и скевоморфизма в одном компоненте.
Что внутри
- Use when
- Surface recipe
- Raised surface
- Pressed surface
- Embossed text and icons
- Micro texture
Как установить
Skeuomorphic UI
-
Клонируйте репозиторий.
git clone https://github.com/MengTo/Skills -
Укажите Codex на файл скилла.
agent-skills/web-design/skeuomorphic-ui/SKILL.md -
Дальше опишите нужный интерфейс. 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. Свой ключ, свой результат.