Фронтенд и UI
design-skills · Terracotta
Глиняный акцент на кремовом, заголовки DM Serif Display, чтение лонгридов.
Что это
Скилл-гайдлайн для выжженного солнцем редакционного интерфейса: кремовые поверхности #F3E9D8, один терракотовый акцент #C56A3C, заголовки DM Serif Display, JetBrains Mono. Настроен под блоги и сторителлинг.
A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.
Почему это важно для дизайна
- Только один акцентный цвет, поэтому акцентов мало, а иерархию несут заголовки.
- Тёплые кремовые поверхности снижают резь в длинных статьях по сравнению с чисто белыми страницами.
- Заголовочный сериф над чернильно-коричневым основным текстом задаёт ясный редакционный ритм.
Что внутри
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
Как установить
design-skills · Terracotta
-
Клонируйте репозиторий.
git clone https://github.com/bergside/awesome-design-skills -
Укажите Codex на файл скилла.
skills/terracotta/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Направьте Codex на терракотовый и кремовый токены прежде, чем он напишет хоть один компонент.
-
Запросите анатомию, варианты и состояния для каждого компонента, с явно названными токенами отступов.
-
Запросите антипаттерны и заметки по миграции, когда переделываете существующий несогласованный UI.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.