Design Extract (MCP server) — Сценарии использования, Установка & Живое демо

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

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

Трёхуровневый вывод DTCG-токенов (primitive → semantic → composite)
Мульти-платформенный экспорт: SwiftUI, Compose, Flutter, Tailwind v4, Figma
Проверка WCAG — выявляет проблемные пары и предлагает исправления
Аудит CSS (специфичность, мёртвые правила, избыточные токены)
Расширение для Chrome для захвата в один клик
На базе Playwright, Node 20+, лицензия MIT

Живое демо

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

design-extract-mcp.replay ▶ готово

0/0

Установка

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

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "design-extract-mcp",
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

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

claude mcp add design-extract-mcp -- npx -y design-extract-mcp

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

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

Реальные сценарии: Design Extract

Как клонировать визуальную систему бренда в DTCG-токены

👤 Дизайн-инженеры, агентские команды, продуктовые команды с выровненным брендом ⏱ ~25 min intermediate

Когда использовать: Вы пересобираете маркетинговый сайт или приложение по референсу и хотите токены за 10 минут, а не в ходе сессии в Figma.

Предварительные требования

Публичный URL референсного сайта — Например, https://stripe.com — должен быть публично доступен

Поток

Извлечь

Use design-extract on https://stripe.com. Output DTCG tokens, SwiftUI, and Tailwind v4. Save to /tokens/.✓ Скопировано

→ Записаны tokens.json + tokens.swift + tailwind.css; отчёт о покрытии
Провести аудит

Run the CSS health pass and the WCAG remediation. Flag everything below AA.✓ Скопировано

→ Отчёт аудита со списком проблемных пар и рекомендациями
Применить

Now generate a starter Next.js page using these tokens — nav, hero, 3 feature cards.✓ Скопировано

→ Страница отображается в визуальной идентичности бренда

Итог: Набор токенов + аудит + стартовая страница, всё из одного URL.

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

Сайт требует входа или сильно зависит от SSR — Передайте авторизованные cookies через расширение или пользовательский pre-step Playwright

Сочетать с: filesystem

Аудит собственного сайта на отклонение от дизайн-системы

👤 Внутренние сопровождающие дизайн-систем ⏱ ~30 min intermediate

Когда использовать: Вы подозреваете, что в production просочились 47 несанкционированных цветов. Проверьте это.

Поток

Инвентаризация

Run design-extract against https://yoursite.com. Don't emit code — just report unique colors, font stacks, spacing values used.✓ Скопировано

→ Количество уникальных значений по каждой категории
Сравнить с источником истины

Compare against /design/tokens.json. Flag every value used in production that's not in the source-of-truth.✓ Скопировано

→ Таблица отклонений с ссылками на файлы/компоненты
Спланировать исправления

Group drift by likely cause (legacy CSS, ad-hoc style, wrong token). Suggest a 3-PR cleanup plan.✓ Скопировано

→ План из трёх PR написан

Итог: Конкретный отчёт об отклонениях для передачи в разработку, а не расплывчатое «у нас непоследовательность».

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

Инструмент завышает результаты из-за CSS-переменных, разрешаемых в runtime — Передайте --resolve-vars, чтобы цепочки var(--x) отслеживались до подсчёта

Сочетать с: filesystem

Генерация переменных Figma из живого сайта

👤 Дизайнеры, которым нужно синхронизировать Figma с кодом ⏱ ~15 min beginner

Когда использовать: Код ушёл в production первым; дизайн должен догнать его в Figma.

Поток

Экспортировать JSON для Figma

Use design-extract on https://yoursite.com with output=figma-variables. Save to /design/figma-vars.json.✓ Скопировано

→ Готовый для импорта JSON переменных Figma
Импортировать

Walk me through importing this with the Figma Variables Import plugin.✓ Скопировано

→ Пошаговые инструкции по плагину

Итог: Файл Figma синхронизирован с выпущенным кодом, без ручного «пипетирования».

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

Имена токенов конфликтуют с существующими переменными Figma — Используйте флаг --prefix для создания пространства имён, например site/color.bg.primary

Комбинации

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

design-extract-mcp + filesystem

Сохранять вывод токенов в репозитории, чтобы последующие запуски могли сравнивать изменения

design-extract-mcp + Figma-Context-MCP

Двусторонняя синхронизация: извлечь с живого сайта, отправить обратно в Figma

Инструменты

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

Инструмент	Входные данные	Когда вызывать	Стоимость
extract	url, output_format[]: dtcg\|swiftui\|compose\|flutter\|tailwind\|figma\|wordpress\|shadcn	Основная точка входа	1 обход Playwright
audit_css_health	url	Вместо extract или после него, когда цель — аудит, а не клонирование	1 обход
wcag_remediate	tokens	После extract, перед публикацией токенов	бесплатно (постобработка)
diff_tokens	url, source_tokens_path	Аудит отклонений на собственном сайте	1 обход

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

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

Квота API: Локально — зависит от вашей машины
Токенов на вызов: 1500–6000 на сводку по извлечению
Деньги: Бесплатно (MIT)
Совет: Не запускайте извлечение на каждый PR — кэшируйте результат и запускайте при изменениях

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

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

Хранение учётных данных: Отсутствует, если цель не требует авторизации (тогда через файл cookies)

Исходящий трафик: Только на указанный вами URL. Playwright запускается локально.

Соблюдайте robots.txt и ToS целевого сайта — это запросы как от браузера, но в масштабе это всё равно скрапинг.

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

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

Playwright Chromium не запускается

Выполните npx playwright install chromium один раз

Проверить: `npx playwright --version` возвращает версию

Сайт блокирует headless-браузер

Передайте --headed или предоставьте residential proxy / файл cookies

Выходные токены выглядят неполными

Сайт использует тяжёлый CSS-in-JS — попробуйте --wait-for-selector main, чтобы дождаться отрисовки SPA

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

Design Extract в сравнении

Альтернатива	Когда использовать	Компромисс
Figma-Context-MCP (GLips)	Источник истины — Figma, а не живой сайт	Figma MCP требует файл Figma; design-extract работает с любым URL
Tokens Studio plugin	Вы уже находитесь в Figma и хотите UI для управления токенами	Ручной процесс; design-extract автоматизирует начальное извлечение

Ещё

Ресурсы

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

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

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