pix — плагин для Claude Code: что делает и как установить
Переносит интерфейсы из Figma в код и автоматически подгоняет вёрстку по скриншотам браузера. Пригодится фронтендерам при переносе макетов в проект.
/plugin marketplace add anthropics/claude-plugins-community
/plugin install pix@claude-communityЧто делает 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.
Какие задачи решает
- перенести компонент из Figma в разметку проекта
- синхронизировать токены дизайна из макета с конфигом
- автоматически устранить расхождения между макетом и вёрсткой
- подключить существующие компоненты через Code Connect
Примеры запросов агенту
- /pix
- Сверстай карточку товара по ссылке на Figma через команду
/pix
Как установить pix
Через маркетплейс плагинов
/plugin marketplace add anthropics/claude-plugins-community/plugin install pix@claude-communityПо шагам, с командами для каждой платформы: Плагины Claude Code: маркетплейсы, установка и как собрать свой
Вопросы о pix
Как установить pix в Claude Code?
В терминале Claude Code выполните по очереди две команды: сначала /plugin marketplace add anthropics/claude-plugins-community, а затем /plugin install pix@claude-community.
Что делает плагин pix?
Он читает спецификации макета из Figma, верстает компонент под ваш стек и сверяет результат с эталоном через скриншоты в Chrome. Ошибки в разметке и стилях исправляются автоматически в цикле.
Что требуется для запуска pix?
Нужна платная подписка Claude, Claude Code версии v2.0.73 или новее с ключом --chrome и браузерное расширение Claude in Chrome от v1.0.36. Также в окружении должен быть настроен сервер Figma MCP.
