Фронтенд и UI
design-skills · Neumorphism
Мягко выдавленные поверхности каменно-серого тона со шрифтом Space Mono.
Что это
Скилл-гайдлайн для неоморфного UI: внутренние и внешние тени на монохромной каменной поверхности #E7E5E4, бирюзовый акцент #006666, Space Mono для заголовков и текста, компактные плотные отступы.
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
Почему это важно для дизайна
- Монохромные поверхности означают, что глубина рождается из тени, а не из цветового контраста.
- Компактные плотные отступы подходят панелям с обилием контролов вроде дашбордов и экранов настроек.
- Правила запрещают смешивать визуальные метафоры, поэтому мягкое выдавливание остаётся единственным языком глубины.
Что внутри
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Как установить
design-skills · Neumorphism
-
Клонируйте репозиторий.
git clone https://github.com/bergside/awesome-design-skills -
Укажите Codex на файл скилла.
skills/neumorphism/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Дайте Codex задать токены поверхностей и теней прежде, чем стилизовать отдельный контрол.
-
Запросите видимые состояния фокуса, ведь одни мягкие тени подводят клавиатурных пользователей.
-
Требуйте семантичный HTML прежде ARIA, как предписывает этот скилл.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.