design-dna (Claude Skill) — Установка & Живое демо

Зачем использовать

Ключевые функции

Извлечение токенов (цвет, типографика, отступы, радиусы) из референсов
Захват качественного стиля (редакционный / брутальный / стеклянный)
Захват эффектов (тень, размытие, зерно, градиенты) с параметрами
Переносимый JSON-вывод — передавайте в любой LLM для генерации кода
Работает с изображениями, скриншотами или живыми URL

Живое демо

Как выглядит на практике

готово

Установка

Репозиторий автора · Официальная документация Claude Skills

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

Реальные сценарии: design-dna

Создание компонента, соответствующего понравившемуся скриншоту

👤 Разработчики без дизайнера, создающие полированные UI ⏱ ~25 min intermediate

Когда использовать: Увидели отличный UI-скриншот в Twitter и хотите захватить его атмосферу.

Поток

Извлечь DNA

Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ Скопировано

→ JSON с токенами + стилем + эффектами
Сгенерировать компонент

Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ Скопировано

→ TSX с подходящей эстетикой
Сравнить визуально

Render side-by-side; tweak any drift in shadow strength.✓ Скопировано

→ Визуальное совпадение в допустимых пределах

Итог: Соответствующий бренду компонент без копирования кода оригинала.

Подводные камни

DNA не захватывает тонкие эффекты (зернистая текстура) — Передайте --high-fidelity для более медленного, но детального извлечения

Сочетать с: filesystem

Создание новых компонентов, соответствующих дизайну существующего продукта

👤 Разработчики, добавляющие фичи в готовый продукт ⏱ ~30 min intermediate

Когда использовать: Добавляете экран к существующему приложению и хотите, чтобы он выглядел нативно.

Поток

DNA из живого URL

Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ Скопировано

→ DNA отражает реальный продукт
Аудит расхождения токенов

Compare DNA to our existing tailwind.config — flag drift.✓ Скопировано

→ Список расхождений (например, 'shadow-md непоследователен между страницами')
Сгенерировать новый экран

Generate the new 'Settings' screen using our reconciled DNA.✓ Скопировано

→ Экран неотличим от остального приложения

Итог: Цельный продукт, даже при добавлении экранов спустя месяцы.

Подводные камни

Живой URL за авторизацией — DNA с публичной landing-страницы вводит в заблуждение — Используйте аутентифицированный скриншот, а не маркетинговую страницу

Начальная загрузка дизайн-системы из референсов

👤 Соло-основатели / небольшие команды без дизайнера ⏱ ~60 min advanced

Когда использовать: Начинаете приложение и хотите согласованную дизайн-систему быстро.

Поток

Выбрать 3 референса

Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ Скопировано

→ 3 отдельных объекта DNA
Синтезировать

Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ Скопировано

→ Объединённый DNA
Вывести стартовую систему

Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ Скопировано

→ Стартовая дизайн-система в репозитории

Итог: Согласованная база для итерации вместо старта с дефолтным Tailwind.

Подводные камни

Синтез кардинально разных эстетик рождает хаос — Выбирайте референсы одного «семейства» — вариации внутри стиля, а не противоположности

Сочетать с: frontend-slides-skill

Комбинации

Сочетайте с другими MCP — эффект x10

design-dna-skill + filesystem

Хранить DNA + сгенерированные компоненты в репозитории

Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ Скопировано

design-dna-skill + frontend-slides-skill

Генерация слайдов, соответствующих эстетике продукта

Use design-dna to capture our brand; pass to frontend-slides-skill for matching deck templates.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
extract_dna	image_path or url, fidelity?	Первый шаг с любого референса	Vision LLM токены
synthesize_dna	dna[]	Объединение нескольких референсов	LLM токены
generate_component	dna, component_spec	Генерация компонентов в соответствии с брендом	LLM токены
diff_dna	dna_a, dna_b	Аудит дрейфа между референсом и текущим продуктом	0

Стоимость и лимиты

Во что обходится

Квота API: Зависит от Vision-LLM
Токенов на вызов: Извлечение ~3000–8000 токенов (ввод изображения + JSON-вывод)
Деньги: Бесплатно (скилл); платите LLM-провайдеру
Совет: Кешируйте DNA на проект; повторно извлекайте только при реальном обновлении бренда

Безопасность

Права, секреты, радиус поражения

Минимальные скоупы: filesystem-read (изображения) Outbound HTTPS (URL-референсы)

Хранение учётных данных: Нет (авторизация vision LLM через переменные окружения)

Исходящий трафик: LLM-провайдер для vision; URL-загрузчик (при использовании)

Не извлекайте DNA из объектов авторских прав, на которые нет прав использования как референса; вывод может нести характерные признаки

Устранение неполадок

Частые ошибки и исправления

Извлечение пропускает градиенты

Используйте --fidelity high; по умолчанию тонкие градиенты пропускаются для экономии токенов

Токены DNA различаются от запуска к запуску

Vision-модели стохастичны — задайте seed если поддерживается; или извлекайте дважды и берите медианные значения

Сгенерированный код использует inline-стили вместо токенов

Передайте --token-mode strict; скилл откажется инлайнить значения, которые существуют как токены

Извлечение из живого URL даёт пустой результат

Сайт требует JS; используйте полностью отрендеренный скриншот вместо URL-загрузки

Альтернативы

design-dna в сравнении

Альтернатива	Когда использовать	Компромисс
design-extract (Manavarya09)	Нужен полный экспорт дизайн-токенов включая DTCG + многоплатформенные эмиттеры	Тяжелее; полный пайплайн дизайн-системы vs лёгкий DNA
Manual style guide curation	Есть дизайнер и библиотека паттернов	Медленнее; более авторитетно

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills