# d2c

Превращает фреймы Figma в код на ваших компонентах и токенах, а потом сам сверяет результат со скриншотом.

- плагин · `type=plugin` · Claude Code · ★ 8
- Автор: d2c-ai
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/d2c-ai/d2c
- Обновлён: 2026-06-22
- HTML: https://affpapa.org/nevibecode/plugins/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 цикл визуальной проверки не запустится, а именно на нём держится вся сверка с макетом.

## Установка

### Claude Code (родная платформа)

**Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
В чате агента (не в терминале):
```text
/plugin install d2c@claude-community
```

## Когда брать
- собрать страницу по фрейму Figma на существующих компонентах
- вытащить дизайн-токены из кодовой базы в один файл
- сверить вёрстку с макетом по pixel-diff и доработать расхождения
- связать экран с API типизированными вызовами в стиле проекта
- найти захардкоженные цвета и отступления от дизайн-системы

## Примеры запросов агенту
- Инициализируй d2c в проекте: `/d2c-init`
- Собери страницу дашборда из этого фрейма Figma, переиспользуй компоненты Card и Badge: `/d2c-build`
- Собери онбординг из трёх экранов с переходами: `/d2c-build-flow`

## Похожие
- [build-design](https://affpapa.org/nevibecode/skills/build-design.md) — скилл · 3600 установок
- [figma-integration](https://affpapa.org/nevibecode/skills/figma-integration.md) — скилл · 718 установок
- [screenshot-to-code](https://affpapa.org/nevibecode/skills/screenshot-to-code.md) — скилл · 1300 установок
- [designfit](https://affpapa.org/nevibecode/mcp/designfit.md) — MCP-сервер · ★ 7
- [understand-figma](https://affpapa.org/nevibecode/skills/understand-figma.md) — скилл · 1800 установок
- [figma-designer](https://affpapa.org/nevibecode/skills/figma-designer.md) — скилл · 807 установок

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md