Дизайн-системы
Design DNA
Извлекает референсный дизайн в структурированный JSON, а затем генерирует из него.
Что это
Процесс из трёх фаз, который схватывает дизайн-идентичность через измеримые токены, качественный стиль и визуальные эффекты. Он выдаёт полный JSON Design DNA, а затем применяет этот JSON к новому контенту.
>-
Почему это важно для дизайна
- Превращает скриншот или URL в именованные значения цвета, шрифта и отступов.
- Фиксирует настроение, композицию и голос бренда, а не только измеримые токены.
- Схватывает эффекты Canvas, WebGL, шейдеров и скролла, которые обычный CSS выразить не может.
Что внутри
- Design system tokens
- Design style
- Visual effects
- Analyzing references
- Generating from JSON
- Phase combinations
Как установить
Design DNA
-
Клонируйте репозиторий.
git clone https://github.com/zanwei/design-dna -
Укажите Codex на файл скилла.
SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Запросите схему, чтобы увидеть все три измерения прежде, чем что-либо анализировать.
-
Передайте Codex референсные изображения или URL и запросите заполненный DNA JSON.
-
Передайте JSON вместе со своим контентом, чтобы сгенерировать самодостаточную HTML-страницу.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.