BIAsia/c2d2c

Что это?

Ключевые возможности

• 01Перенос дизайна из Figma в код с анализом повторно используемых компонентов перед реализацией
• 02Экспорт компонентов, состояний и design tokens из кода в Figma
• 03Унификация стилевой системы с единым источником токенов и CI-проверкой
• 04Инструмент для регрессионных скриншотов на базе Playwright: снимки всей страницы и отдельных секций крупным планом
• 05Необязательный плагин Figma, который отправляет изменения дизайнеров обратно в код в виде merge request

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

• Точное воспроизведение дизайна из Figma в существующей frontend-кодовой базе
• Экспорт компонентов кодовой базы в Figma для ревью дизайна
• Объединение разрозненных значений отступов, скруглений или цветов в единую шкалу токенов

Быстрый старт

1. 1

   Установите skills с помощью менеджера пакетов

   npx skills add BIAsia/c2d2c
2. 2

   Подключите коннектор Figma MCP (доступ на чтение для d2c, на запись — для c2d)

3. 3

   Попросите агента выполнить skill, указав, что нужно сделать, и ссылку на Figma; при первом запуске конфигурация автоматически создаётся в C2D2C.md

Что важно знать

• !Коннектор Figma MCP — обязательное предварительное условие.
• !В README рекомендуется запускать его с Claude Fable 5 и отмечается, что более ранние модели часто пропускают шаги.

Темы

Частые вопросы

Что такое c2d2c?

Навыки Claude Code для переноса дизайнов из Figma в кодовую базу и отправки состояния кода обратно в Figma, а также для управления стилевой системой. c2d2c — набор из трёх навыков Claude Code, которые связывают Figma и production-кодовую базу в обоих направлениях. Навык d2c превращает ссылку на дизайн в Figma в код: анализирует существующие компоненты, предлагает план на проверку, реализует дизайн в масштабе 1:1, создаёт страницу регрессионного тестирования, проверяет результат по скриншотам и автоматически открывает merge request. Навык c2d работает в обратном направлении и экспортирует компоненты, состояния и design tokens из исходного кода в файлы Figma.

c2d2c можно использовать бесплатно? Какая у него лицензия?

c2d2c распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

c2d2c всё ещё поддерживается?

Обновлялся за последние 6 месяцев. Последний коммит в c2d2c — 3 авг. 2026 г..

Для чего можно использовать c2d2c?

Точное воспроизведение дизайна из Figma в существующей frontend-кодовой базе Экспорт компонентов кодовой базы в Figma для ревью дизайна Объединение разрозненных значений отступов, скруглений или цветов в единую шкалу токенов

Как установить c2d2c?

Установите skills с помощью менеджера пакетов: npx skills add BIAsia/c2d2c Подключите коннектор Figma MCP (доступ на чтение для d2c, на запись — для c2d) Попросите агента выполнить skill, указав, что нужно сделать, и ссылку на Figma; при первом запуске конфигурация автоматически создаётся в C2D2C.md

Где скачать c2d2c?

Исходный код и инструкции по установке — на GitHub: https://github.com/BIAsia/c2d2c