Claude Code Design Skills MCP — Сценарии использования, Установка & Живое демо

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

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

Навыки Figma-to-Next.js с приоритетом повторного использования компонентов
Вариант Figma → отображение реквизита
Строгие типы TypeScript «из коробки»
Встроенные настройки доступности по умолчанию
Шаблоны макетов данных для гигиены границ интерфейса и серверной части

Живое демо

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

claude-code-design-skills.replay ▶ готово

0/0

Установка

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

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

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

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

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "claude-code-design-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "claude-code-design-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/scoobynko/claude-code-design-skills",
          "~/.claude-code/skills/claude-code-design-skills"
        ]
      }
    }
  }
}

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

claude mcp add claude-code-design-skills -- git clone https://github.com/scoobynko/claude-code-design-skills ~/.claude-code/skills/claude-code-design-skills

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

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

Реальные сценарии: Claude Code Design Skills

Создайте новую страницу из кадра Figma.

👤 Frontend-инженеры преобразуют проекты в код ⏱ ~45 min intermediate

Когда использовать: У вас есть готовый фрейм Figma и вам нужен код React/Next.js, который соответствует вашей кодовой базе.

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

Настройка Figma MCP — Установите Figma MCP и предоставьте PAT.
Навык установлен — git клонировать в ~/.claude-code/skills/

Поток

Наведите курсор на рамку

Преобразуйте этот фрейм Figma в страницу Next.js: <figma URL>. Повторно используйте компоненты из src/comComponents/.✓ Скопировано

→ Агент проводит инвентаризацию существующих компонентов перед написанием новых.
Варианты реквизита-карты

Сопоставьте варианты Figma с введенными реквизитами (размер, намерение, отключено).✓ Скопировано

→ Генерируемые типы TS; нет вообще
Ложные данные

Используйте фиктивные данные; не изобретайте вызовы API. Держите бэкэнд подальше.✓ Скопировано

→ Очистите компонент без выборки с помощью файла макетов.

Итог: Настоящая страница Next.js объединена в один PR — рецензент не переписывает.

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

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

Сочетать с: figma · magic-ui-mcp

Синхронизируйте реквизиты компонента с вариантами Figma.

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

Когда использовать: Дизайнер добавил новый вариант в Figma, и код должен догнать его.

Поток

Разница Figma с компонентом

Сравните варианты Button (figma) с реквизитами src/comComponents/Button.tsx.✓ Скопировано

→ Очистить список изменений: новый вариант, переименованный вариант и т. д.
Применить разницу

Обновите Button.tsx, включив в него новый «призрачный» вариант; сохранить API.✓ Скопировано

→ Типизированное обновление со значением по умолчанию, которое не нарушает работу вызывающих абонентов.

Итог: Дизайн-система закрывается, не ломая потребителей.

Комбинации

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

claude-code-design-skills + figma

Извлечение кадров Figma через MCP; конвертировать с помощью этого навыка

Получить кадр X Фигмы; используйте навыки преобразования с повторным использованием существующих компонентов.✓ Скопировано

claude-code-design-skills + magic-ui-mcp

Сопоставьте шаблоны Figma с компонентами Magic UI там, где они существуют.

Там, где Figma использует героя размытия, используйте размытие и затухание Magic UI вместо того, чтобы писать его.✓ Скопировано

claude-code-design-skills + claude-design-auditor-skill

Убедитесь, что сгенерированный код проходит проверку по 18 правилам.

После преобразования запустите аудитор проекта и исправьте все ВЫСОКИЕ результаты.✓ Скопировано

Инструменты

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

Инструмент	Входные данные	Когда вызывать	Стоимость
figma-to-code (SKILL)	Figma frame URL + repo conventions	Превращение дизайна в код, соответствующий вашей кодовой базе	0

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

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

Квота API: Нет для навыков; Figma MCP имеет собственную квоту
Токенов на вызов: Фрейм Figma + существующий код + вывод — может быть большим; точно масштабируйте кадр
Деньги: Бесплатно
Совет: Конвертируйте один кадр за раз; гигантские выборы тратят впустую как контекст, так и энергию обзора.

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

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

Хранение учётных данных: Figma PAT принадлежит Figma MCP, а не этому навыку.

Исходящий трафик: Ничего из навыка; сетевые вызовы происходят в Figma MCP

Сгенерированный код все еще требует проверки. «Пропускает типы» не означает «правильно работает во время выполнения».
Не принимайте слепо импорт компонентов, которых нет в вашем белом списке; навык предпочитает повторное использование, но обзор по-прежнему принадлежит вам.

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

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

Агент записывает новую кнопку вместо повторного использования существующей.

Явно укажите каталог компонентов репозитория в командной строке.

Проверить: Include 'check src/components/ first' in the request

Отсутствует реквизит для нового варианта Figma.

Перед конвертацией запросите вариант различия; обновите компонент вместо его разветвления.

Проверить: Agent output includes a 'variants' section

Типы слишком свободные (любые везде)

Требовать «нет любого; громко провалиться, если вариант не может быть напечатан».

Проверить: Search the diff for ': any'

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

Claude Code Design Skills в сравнении

Альтернатива	Когда использовать	Компромисс
magic-ui-mcp	Вам нужны готовые анимированные компоненты, а не конвертер Figma.	Библиотека прежде всего, а не дизайн
claude-design-auditor-skill	Вы хотите оценить качество дизайна, а не генерировать код	Аудит, а не производство
hue-brand-skill	Вам нужен язык дизайна, а не преобразование кадров	В первую очередь система, а не кадр

Ещё

Ресурсы

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

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

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