Фронтенд и UI
design-skills · Bento
Сетка из разнокалиберных блоков на кремовом, шрифт Inter, компактная шкала.
Что это
Скилл-гайдлайн для бенто-раскладок, которые подают контент блоками сетки разного размера. Inter повсюду, компактная шкала шрифтов от 12 до 32, персиковый и синий акценты на кремовом.
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Почему это важно для дизайна
- Разный размер блоков несёт иерархию, поэтому ранжирует сама сетка.
- Компактная шкала шрифтов от 12 до 32 вмещает плотный текст в маленькие плитки.
- Кремовая поверхность #FFF5E6 держит края блоков читаемыми без тяжёлых рамок.
Что внутри
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
Как установить
design-skills · Bento
-
Клонируйте репозиторий.
git clone https://github.com/bergside/awesome-design-skills -
Укажите Codex на файл скилла.
skills/bento/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Попросите Codex назначить каждому блоку размер по приоритету контента.
-
Задайте токены отступов по шкале от 4 до 32 прежде, чем раскладывать плитки.
-
Запросите обработку переполнения и длинных подписей, которые этот скилл относит к краевым случаям.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.