review-design-parity — команда для Codex: сверка UI с макетом Figma
Сравнивает реализованный интерфейс с макетом Figma и перечисляет расхождения по вёрстке, токенам и поведению. Пригодится перед сдачей экрана.
~/.codex/prompts/review-design-parity.mdЧто делает review-design-parity
Команда берёт ссылку на фрейм или компонент Figma и локальную страницу или компонент, который нужно проверить. Сначала она запрашивает у Figma контекст дизайна и скриншот цели, затем смотрит текущую реализацию и запускает подходящий локальный превью или тест.
Дальше идёт сравнение по слоям: раскладка, типографика, токены, ассеты и интерактив. Отчёт строится так: сначала находки по убыванию серьёзности, потом предложенные исправления. Отдельным пунктом команда называет, какие доказательства она проверила — скриншот, локальный превью, тесты — и чего не хватило для полного вывода о совпадении.
Оба аргумента обязательны: без figma_url и target команда не стартует. Если у вас нет доступа к нужному файлу Figma, шаг со скриншотом и контекстом дизайна не отработает, и сравнивать будет не с чем.
Какие задачи решает
- сверить свёрстанный экран с макетом Figma
- найти расхождения в отступах и типографике
- проверить, что цвета и токены совпадают с дизайном
- отловить разницу в поведении интерактивных элементов
- собрать отчёт о расхождениях перед сдачей задачи
Примеры запросов агенту
- Проверь паритет вёрстки:
figma_url— ссылка на фрейм,target—src/pages/Checkout.tsx - Сравни компонент из Figma с локальной реализацией и отсортируй находки по серьёзности
- Прогони review-design-parity для страницы профиля и скажи, каких доказательств не хватило
Как установить review-design-parity
Вручную: положить файлы
~/.codex/prompts/review-design-parity.mdВызов — /prompts:review-design-parity. В Codex этот формат помечен устаревшим, замена — скиллы
Вручную: положить файлы
.claude/commands/review-design-parity.mdВызов — /review-design-parity. Для всех проектов — ~/.claude/commands/
Вручную: положить файлы
.github/prompts/review-design-parity.prompt.mdВручную: положить файлы
.gemini/commands/review-design-parity.tomlGemini хранит команды в TOML: текст запроса — в поле prompt
Вопросы о review-design-parity
Как установить review-design-parity в Claude?
Положите файл команды по пути ~/.codex/prompts/review-design-parity.md.
Что делает review-design-parity?
Сверяет реализованный интерфейс с макетом Figma и выдаёт список визуальных и поведенческих расхождений, сначала находки, потом правки.
Какие аргументы нужны команде?
Два обязательных: figma_url со ссылкой на фрейм или компонент Figma и target — локальная страница или компонент для проверки.