Фронтенд и UI
design-skills · Editorial
Журнальная вёрстка на серифе Gelasio по строгой 8pt-сетке.
Что это
Скилл-гайдлайн дизайн-системы для современного редакционного вида: сериф Gelasio для основного и заголовочного текста, Ubuntu Mono, почти чёрный #111111 на белых поверхностях и базовая 8pt-сетка.
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
Почему это важно для дизайна
- Заголовки и основной текст серифом из одного семейства держат длинные пассажи для чтения типографически согласованными.
- Базовая 8pt-сетка задаёт вертикальный ритм заголовкам, основному тексту и отступам.
- Планка доступности включает поддержку reduced-motion, тач-цели 44px и обработку высокого контраста.
Что внутри
- Style foundations
- Accessibility
- Guideline authoring workflow
- Required output structure
- Component rule expectations
- Quality gates
Как установить
design-skills · Editorial
-
Клонируйте репозиторий.
git clone https://github.com/bergside/awesome-design-skills -
Укажите Codex на файл скилла.
skills/editorial/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Попросите Codex переформулировать замысел дизайна, а затем задать токены прежде, чем трогать компоненты.
-
Запросите правила компонентов, охватывающие анатомию, варианты, состояния и адаптивное поведение.
-
Завершите QA-чек-листом, чтобы ревьюер кода мог проверить результат.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.