d2c — плагин для Claude Code: Figma в код с проверкой пикселей
Превращает фреймы Figma в код на ваших компонентах и токенах, а потом сам сверяет результат со скриншотом.
/plugin marketplace add anthropics/claude-plugins-community
/plugin install d2c@claude-communityЧто делает d2c
Плагин добавляет в Claude четыре скилла: d2c-init, d2c-build, d2c-audit и d2c-guard. Первый запускается один раз на проект: Claude проходит по кодовой базе, находит подход к стилям, цвета, отступы, типографику, брейкпоинты, существующие компоненты и хуки, а также то, как в проекте делаются запросы к API. Результат ложится в .claude/d2c/design-tokens.json. Если Figma MCP подключён, туда же подтягиваются переменные Figma, а расхождения с токенами в коде помечаются. Повторный запуск идёт инкрементально.
d2c-build берёт ссылку на фрейм в Dev Mode и собирает страницу. Спрашивает про вьюпорты, компоненты для переиспользования и подключение к API, предлагает компоненты по анализу макета. Дальше генерация кода с типизированными вызовами API в стиле проекта, скриншот через Playwright CLI и сравнение: pixel-diff плюс визуальная оценка структуры. Цикл повторяется до 4 раундов, ниже 95% — правки и новый прогон. Для многоэкранных сценариев есть d2c-build-flow: один промпт со списком шагов, общий layout, навигация между страницами и smoke-тест на переходы. В v1 это работает только на Next.js App Router.
Что нужно до старта: аккаунт Figma с Dev Mode, настроенный Figma MCP с токеном доступа и Playwright, установленный глобально (npm install -g playwright и npx playwright install chromium). Без глобального Playwright цикл визуальной проверки не запустится, а именно на нём держится вся сверка с макетом.
Какие задачи решает
- собрать страницу по фрейму Figma на существующих компонентах
- вытащить дизайн-токены из кодовой базы в один файл
- сверить вёрстку с макетом по pixel-diff и доработать расхождения
- связать экран с API типизированными вызовами в стиле проекта
- найти захардкоженные цвета и отступления от дизайн-системы
Примеры запросов агенту
- Инициализируй d2c в проекте:
/d2c-init - Собери страницу дашборда из этого фрейма Figma, переиспользуй компоненты Card и Badge:
/d2c-build - Собери онбординг из трёх экранов с переходами:
/d2c-build-flow
Как установить d2c
Через маркетплейс плагинов
/plugin marketplace add anthropics/claude-plugins-community/plugin install d2c@claude-communityПо шагам, с командами для каждой платформы: Плагины Claude Code: маркетплейсы, установка и как собрать свой
Вопросы о d2c
Как установить d2c в Claude Code?
Через маркетплейс плагинов: сначала /plugin marketplace add anthropics/claude-plugins-community, затем /plugin install d2c@claude-community. После установки перезапустите Claude.
Что делает d2c?
Сканирует проект, собирает дизайн-контракт из токенов и компонентов, генерирует код по фрейму Figma и проверяет результат скриншотом с pixel-diff, повторяя правки до совпадения с макетом.
Что нужно настроить до первого запуска?
Аккаунт Figma с Dev Mode, Figma MCP с персональным токеном доступа и Playwright, установленный глобально с браузером chromium.
