Design DNA
zanwei/design-dnaСкилл для AI-агентов: анализирует скриншоты, изображения и URL, извлекает дизайн-токены, стиль и визуальные эффекты в JSON-профиль, затем генерирует UI с точным воспроизведением исходного дизайна.
Установка
npx skills add zanwei/design-dnaREADME
Скилл для AI-агентов, который извлекает, структурирует и применяет визуальную идентичность дизайна в виде машиночитаемой «Design DNA» по трём измерениям: дизайн-токены, качественный стиль и визуальные эффекты.
https://github.com/user-attachments/assets/00e0a28d-42ce-4a08-a0c0-1ecf8b9f7e97
https://github.com/user-attachments/assets/80793608-930d-42ca-951f-eb21ac188d54
https://github.com/user-attachments/assets/cd4cba94-cd2c-480f-8efa-4ac86e00ae1f
Требования
- Установленная среда Node.js
- Возможность выполнять команды
npx
Установка
Быстрая установка (рекомендуется)
npx skills add zanwei/design-dna
Установка для конкретного агента
# Только Cursor, без интерактивного режима, глобальная установка
npx skills add zanwei/design-dna -a cursor -g -y
# Только Claude Code
npx skills add zanwei/design-dna -a claude-code -g -yУстановка из локального клона
git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -yСписок доступных скиллов
npx skills add zanwei/design-dna --list
Что делает скилл
| Измерение | Роль |
|---|---|
| Дизайн-система | Измеримые токены: цвет, типографика, отступы, макет, форма, тени, анимация, компоненты |
| Стиль дизайна | Качественное восприятие: настроение, визуальный язык, композиция, изображения, ощущение взаимодействия, голос бренда |
| Визуальные эффекты | Выходящее за рамки обычного CSS: Canvas, WebGL, 3D, частицы, шейдеры, scroll-анимации, эффекты курсора, SVG-анимация, glassmorphism и др. |
Скилл реализует трёхфазный рабочий процесс:
- Структура — раскрывает полную схему и значения полей (см.
references/schema.md). - Анализ — по скриншотам, изображениям или URL формирует полный JSON-профиль (все поля заполнены; конфликты отмечены).
- Генерация — на основе DNA JSON и контента реализует дизайн (по умолчанию: самодостаточный HTML/CSS/JS) согласно
references/generation-guide.md.
Фазы можно использовать по отдельности или последовательно (например, Анализ → Генерация).
Как это работает
Общая схема пайплайна (Mermaid отображается на GitHub):
flowchart LR
A["Референсные дизайны<br/>Скриншоты · URL · изображения<br/><br/>Любой понравившийся дизайн"]
B["Design DNA JSON<br/>Количественная спецификация<br/><br/>Структурированный профиль"]
C["Итоговый результат<br/>Точная реализация<br/><br/>Production-ready UI"]
A -->|"Анализ — извлечение всех визуальных свойств"| B
B -->|"Генерация — применение DNA к вашему контенту"| C
B -.-> D["Сохранение · повторное использование · версионирование"]Шаг 1 — Подбор референсов. Соберите скриншоты, изображения или URL живых сайтов, чью визуальную идентичность хотите захватить. Можно комбинировать несколько референсов; скилл выявляет доминирующие паттерны и фиксирует варианты.
Шаг 2 — Извлечение DNA. Передайте референсы агенту. Он анализирует каждое визуальное свойство по всем трём измерениям и выдаёт полный, количественный Design DNA JSON — без пустых полей, без домыслов. Этот JSON становится переносимой, многократно используемой дизайн-спецификацией.
Шаг 3 — Генерация из DNA. Передайте DNA JSON вместе с вашим контентом. Агент создаёт реализации, точно воспроизводящие исходный дизайн-язык и адаптированные под ваш материал.
DNA JSON — ключевой артефакт. После извлечения его можно зафиксировать в системе контроля версий, передавать между командами, переиспользовать в разных проектах и итеративно уточнять — превращая субъективное «сделай как тот сайт» в точную, воспроизводимую спецификацию, которую может использовать любой агент.
[!TIP] Улучшение визуальной насыщенности. Если первый результат выглядит визуально бедно по сравнению с референсами, выполните целенаправленную итерацию полировки: повторно прикрепите те же URL или скриншоты. Это позволяет приблизить рабочий черновик к визуально богатому, точному результату без начала с нуля.
Промпт: Сравни с референсом, проверь иерархию, орнаментику, типографический ритм, анимацию, материальность и общий UI — затем объедини выводы с текущей реализацией.
Совместимость
Соответствует спецификации Agent Skills. Устанавливается через skills CLI для всех поддерживаемых агентов, включая Cursor, Claude Code, Codex, GitHub Copilot и ещё 39.
Участие в разработке
Issues и pull requests приветствуются. При существенных изменениях поведения обновляйте SKILL.md и затронутые файлы в references/, чтобы скилл оставался внутренне согласованным.
Лицензия
MIT