/ Каталог / Песочница / design-dna
← Все серверы ↗ GitHub
● Сообщество zanwei ⚡ Сразу

design-dna

автор zanwei · zanwei/design-dna

Извлеките количественную Design DNA из любого референсного UI — токены, качественный стиль, визуальные эффекты — затем генерируйте компоненты, ей соответствующие.

design-dna принимает изображения, скриншоты или живые URL как референсы и выдаёт структурированный JSON Design DNA: цветовые токены, типографическую шкалу, отступы, качественные стилевые дескрипторы и параметры визуальных эффектов. Передайте DNA обратно в Claude при генерации компонентов — и вывод будет соответствовать бренду, а не выглядеть как generic Tailwind.

▶ Смотреть демо 📦 Установить 💡 Сценарии

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

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

Живое демо

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

готово

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "design-dna-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json
{
  "context_servers": {
    "design-dna-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/zanwei/design-dna",
          "~/.claude/skills/design-dna"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add design-dna-skill -- git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

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

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

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

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

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

Предварительные требования
  • Установленный скилл — git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna
Поток
  1. Извлечь DNA
    Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ Скопировано
    → JSON с токенами + стилем + эффектами
  2. Сгенерировать компонент
    Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ Скопировано
    → TSX с подходящей эстетикой
  3. Сравнить визуально
    Render side-by-side; tweak any drift in shadow strength.✓ Скопировано
    → Визуальное совпадение в допустимых пределах

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

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

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

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

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

Поток
  1. DNA из живого URL
    Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ Скопировано
    → DNA отражает реальный продукт
  2. Аудит расхождения токенов
    Compare DNA to our existing tailwind.config — flag drift.✓ Скопировано
    → Список расхождений (например, 'shadow-md непоследователен между страницами')
  3. Сгенерировать новый экран
    Generate the new 'Settings' screen using our reconciled DNA.✓ Скопировано
    → Экран неотличим от остального приложения

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

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

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

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

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

Поток
  1. Выбрать 3 референса
    Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ Скопировано
    → 3 отдельных объекта DNA
  2. Синтезировать
    Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ Скопировано
    → Объединённый DNA
  3. Вывести стартовую систему
    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-загрузчик (при использовании)

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

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

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

Используйте --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