design-qa — скилл для Codex: сравнение дизайна и кода перед сдачей
Скилл для сопоставления макета с реализацией перед передачей в разработку. Работает с Figma, скриншотами и URL-адресами; ловит визуальные расхождения на уровне вёрстки, типографики и состояний.
npx skills add openai/plugins --skill design-qa -a codexЧто делает design-qa
design-qa — внутренний помощник для проверки качества прототипов. Вы даёте ему дизайн (из Figma, картинку или скриншот) и реализацию (локальный адрес, развёрнутый сайт или скриншот), а он сравнивает их как рецензент — ищет расхождения в раскладке, отступах, цвете, шрифте и интерактивных состояниях.
Скилл нужен для Product Design прототипов, URL-to-code и image-to-code сборок. Он не годится для широких аудитов UX или критики дизайна в целом — для этого есть отдельный скилл audit. Сравнивать надо на одном вьюпорте и в одном состоянии: если источник в мобильной версии, а реализация на десктопе, скилл сначала укажет на это, потом даст список приоритизированных поправок. Если нельзя открыть макет или захватить скриншот реализации, скилл блокирует сдачу с объяснением причины.
Цикл может быть долгим: после первого сравнения скилл может найти проблемы, вы их чините, скилл проверяет результат заново. Итеративно, пока нет P0/P1/P2 расхождений.
Какие задачи решает
- Захватить и нормализовать скриншоты дизайна и реализации для честного сравнения
- Найти визуальные расхождения в раскладке, отступах, типографике и цветах
- Приоритизировать поправки перед передачей макета разработчикам
- Повторно проверить результаты после исправлений
Примеры запросов агенту
- Сравни Figma-узел с локальным URL и назови P0-проблемы
- Дай мне скрипт Playwright для захвата мобильного экрана без масштабирования
- Проверь, что скриншот реализации и исходный макет одного размера перед сравнением
Как установить design-qa
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill design-qa -a codex2Вручную: положить файлы
.agents/skills/design-qa/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill design-qa -a claude-code2Вручную: положить файлы
~/.claude/skills/design-qa/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-qa/
Вручную: положить файлы
.cursor/skills/design-qa/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/plugins design-qa2Вручную: положить файлы
.github/skills/design-qa/SKILL.mdКомандой платформы
gemini skills install https://github.com/openai/plugins --path plugins/product-design/skills/design-qaВручную: положить файлы
.devin/skills/design-qa/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора201
Весь набор →Похожие
Вопросы о design-qa
Как установить design-qa в Codex?
Выполни npx skills add openai/plugins --skill design-qa или npx skills add openai/plugins --skill design-qa -a codex. Скилл откроется в .agents/skills/design-qa/SKILL.md.
Что делает design-qa?
Сравнивает макет из Figma, картинку или скриншот с реализацией сайта или приложения, ловит расхождения в визуалах и даёт список приоритизированных поправок перед сдачей.
Когда нельзя использовать design-qa?
Для broad UX-критики, аудитов дизайна, ревью потоков или пользовательских запросов на критику — используй скилл audit. design-qa нужен только когда есть оба артефакта: исходный дизайн и готовая реализация.
