# pix

Переносит интерфейсы из Figma в код и автоматически подгоняет вёрстку по скриншотам браузера. Пригодится фронтендерам при переносе макетов в проект.

- плагин · `type=plugin` · Claude Code · ★ 96
- Автор: skobak
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/skobak/pix
- Обновлён: 2026-02-04
- HTML: https://affpapa.org/nevibecode/plugins/pix

## Что делает

Плагин автоматизирует вёрстку компонентов по ссылке на макет. Он распознаёт рабочий стек проекта вроде Vite или Next, находит дизайн-систему на базе Tailwind или styled-components и библиотеку иконок. Затем утилита считывает переменные через Figma MCP, применяет существующие компоненты через Code Connect и создаёт разметку.

Для проверки задействован Chrome. Плагин запускает локальный dev-сервер, открывает страницу и делает снимок экрана. Дальше он сопоставляет браузерный рендер с эталонным скриншотом из Figma, находит расхождения и сам правит код до полного визуального совпадения.

Без платной подписки Claude (Pro, Team или Enterprise) и заранее настроенного Figma MCP запустить генерацию не получится. Также понадобятся Claude Code версии не ниже v2.0.73 с флагом `--chrome` и расширение Claude in Chrome от v1.0.36.

## Установка

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

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

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

## Примеры запросов агенту
- /pix
- Сверстай карточку товара по ссылке на Figma через команду `/pix`

## Похожие
- [screenshot-to-code](https://affpapa.org/nevibecode/skills/screenshot-to-code.md) — скилл · 1300 установок
- [build-design](https://affpapa.org/nevibecode/skills/build-design.md) — скилл · 3600 установок
- [daisyui](https://affpapa.org/nevibecode/skills/daisyui.md) — скилл · 12100 установок
- [frontend-design](https://affpapa.org/nevibecode/skills/julianoczkowski-frontend-design.md) — скилл · 5500 установок
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16073
- [implement-from-figma](https://affpapa.org/nevibecode/commands/implement-from-figma.md) — команда · ★ 7604

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