zanwei/design-dna

Что это?

Ключевые возможности

• 01Извлекает из примеров дизайн-токены: цвета, типографику, отступы, компоновку и анимацию.
• 02Описывает качественные характеристики стиля, включая настроение, композицию и ощущения от взаимодействия.
• 03Собирает каталог визуальных эффектов, в том числе WebGL, частиц, шейдеров и анимации при прокрутке.
• 04Генерирует новый UI на основе сохраненного JSON DNA и вашего контента.
• 05Поддерживает дополнительное измерение цветов по пикселям и проверку сгенерированного результата с помощью ΔE.
• 06Устанавливается через skills CLI для Cursor, Claude Code, Codex и других агентов.

Сценарии использования

• Воспроизведение стиля сайта-образца в новом проекте без необходимости подбирать значения наугад.
• Сохранение визуального языка команды в виде версионируемой спецификации JSON, общей для нескольких проектов.
• Проверка соответствия сгенерированного UI цветовой палитре бренда с заданной точностью измерений.
• Преобразование набора вдохновляющих скриншотов в единый дизайн-бриф для агента.

Быстрый старт

1. 1

   Установите skill с помощью skills CLI (требуется Node.js)

   npx skills add zanwei/design-dna
2. 2

   Или установите его для определённого agent, например Cursor, без интерактивного взаимодействия

   npx skills add zanwei/design-dna -a cursor -g -y
3. 3

   Попросите agent проанализировать референсные скриншоты или URL и преобразовать их в Design DNA JSON, а затем сгенерировать на его основе UI

Что важно знать

• !Это agent skill, поэтому для его запуска нужен совместимый AI coding agent.
• !Для работы необязательных скриптов детерминированной генерации цветов требуется локальный клон репозитория и установка npm install.

Темы

Частые вопросы

Что такое design-dna?

Навык агента извлекает визуальный стиль интерфейсов из примеров в структурированный JSON Design DNA и генерирует на его основе похожие интерфейсы. design-dna — это навык агента для сохранения визуального стиля существующих дизайнов в машиночитаемом JSON. Он принимает скриншоты, изображения или URL и создает профиль по трем направлениям: дизайн-токены (цвета, типографика, отступы, компоновка, формы, глубина, анимация, компоненты), качественные характеристики стиля (настроение, визуальный язык, композиция, изображения, ощущения от взаимодействия) и визуальные эффекты, например Canvas, WebGL, частицы, шейдеры, анимация при прокрутке и glassmorphism.

design-dna можно использовать бесплатно? Какая у него лицензия?

design-dna распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

design-dna всё ещё поддерживается?

Обновлялся за последние 6 месяцев. Последний коммит в design-dna — 28 авг. 2026 г..

Для чего можно использовать design-dna?

Воспроизведение стиля сайта-образца в новом проекте без необходимости подбирать значения наугад. Сохранение визуального языка команды в виде версионируемой спецификации JSON, общей для нескольких проектов. Проверка соответствия сгенерированного UI цветовой палитре бренда с заданной точностью измерений. Преобразование набора вдохновляющих скриншотов в единый дизайн-бриф для агента.

Как установить design-dna?

Установите skill с помощью skills CLI (требуется Node.js): npx skills add zanwei/design-dna Или установите его для определённого agent, например Cursor, без интерактивного взаимодействия: npx skills add zanwei/design-dna -a cursor -g -y Попросите agent проанализировать референсные скриншоты или URL и преобразовать их в Design DNA JSON, а затем сгенерировать на его основе UI

Где скачать design-dna?

Исходный код и инструкции по установке — на GitHub: https://github.com/zanwei/design-dna