Фронтенд и UI
design-skills · Claymorphism
Пухлые скруглённые 3D-формы, заголовки Poppins, синее на белом.
Что это
Скилл-гайдлайн для клейморфного UI: мягкие, скруглённые, пухлые формы, имитирующие податливую глину. Заголовки Poppins, текст Montserrat, синий акцент #3B82F6 и тёмно-синий текст на белом.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Почему это важно для дизайна
- Пухлые скруглённые формы дают кнопкам очевидную подсказку нажимаемости без лишних подписей.
- Тёмно-синий текст #1C398E на белом держит контраст, пока палитра остаётся игривой.
- Правила запрещают смешивать метафоры, поэтому глиняная глубина никогда не соединяется со стеклом или плоским стилем.
Что внутри
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Как установить
design-skills · Claymorphism
-
Клонируйте репозиторий.
git clone https://github.com/bergside/awesome-design-skills -
Укажите Codex на файл скилла.
skills/claymorphism/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Сначала попросите у Codex токены радиусов и теней, ведь именно они задают глиняный вид.
-
Сочетайте заголовочный Poppins с текстовым Montserrat, как предписано, а не два похожих гротеска.
-
Проверьте, что состояния focus-visible и disabled переживают обработку мягкими формами.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.