design-parity-review-agent — субагент для Codex: обзор UI
Сверяет вёрстку интерфейса с макетами Figma и скриншотами. Помогает находить расхождения в отступах, шрифтах и токенах перед сдачей задачи.
.codex/agents/design-parity-review-agent.tomlЧто делает design-parity-review-agent
Субагент сопоставляет готовую вёрстку с задумкой дизайнера в Figma. Главное внимание уделяется визуальным дефектам и поведению интерфейса, а не форматированию исходного кода. Агент отслеживает подмену графики и съехавшие отступы. Заодно он проверяет токены стилей и расхождения в гарнитурах шрифтов.
Результат проверки формируется в строгой структуре: список находок по степени критичности, недостающие данные или блокеры и общая сводка паритета. Без скриншотов или файлов дизайна субагент не станет строить догадки, а сразу потребует недостающий контекст у разработчика.
Какие задачи решает
- отловить расхождения в типографике и отступах между макетом и кодом
- выявить некорректное применение дизайн-токенов
- обнаружить подменённые иконки и графические ассеты
- составить отчёт о визуальных дефектах с сортировкой по критичности
Примеры запросов агенту
- Сравни свёрстанную карточку со скриншотом из Figma и проверь отступы
- Проверь модальное окно на соответствие дизайн-макету и найди ошибки в токенах
Как установить design-parity-review-agent
Вручную: положить файлы
.codex/agents/design-parity-review-agent.tomlCodex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/
Вручную: положить файлы
.claude/agents/design-parity-review-agent.mdДля всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию
Вручную: положить файлы
.cursor/agents/design-parity-review-agent.mdCursor понимает и .claude/agents/
По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст
Вопросы о design-parity-review-agent
Как установить design-parity-review-agent в Codex?
Создайте файл конфигурации агента по пути .codex/agents/design-parity-review-agent.toml.
Что проверяет design-parity-review-agent?
Он сравнивает сверстанный интерфейс с референсными скриншотами и макетами Figma. Приоритет отдаётся видимым багам и несовпадениям в интерактивных элементах.
Что делает агент, если нет скриншота интерфейса?
Субагент не пытается угадывать вид компонентов. Он помечает отсутствие данных как блокер и запрашивает графические материалы.
