Преобразование потока Figma с правильной семантикой и управлением фокусом

Вам нужен диалог/меню/форма, которая проходит проверку программой чтения с экрана. Доступная реализация без необходимости держать каждый компонент вручную.

Claude Code Design Skills — Установка & Живое демо

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

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

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

Живое демо

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

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

0/0

Установка

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

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

Реальные сценарии: 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