design-qa-checklist — скилл для Claude Code: обзор и установка
Генерирует систематический чек-лист для проверки вёрстки на соответствие дизайну. Пригодится дизайнерам и разработчикам на этапе приёмки интерфейса.
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a claude-codeЧто делает design-qa-checklist
Скилл структурирует приёмку интерфейса. Он разбивает проверку на визуальную точность, адаптивность сетки, интерактивные состояния, реальный контент, доступность по WCAG AA и кроссплатформенность. В правила заложен минимальный размер кликабельных областей от 44px и навигация с клавиатуры.
Процесс разбит на шаги: самопроверка разработчиком, визуальный контроль дизайнером, фиксация багов со скриншотами и проверка исправлений. Скилл рекомендует сверять билд с макетом через инструменты разработчика в браузере, а не полагаться на память.
Если нужна спецификация для инженеров до старта разработки, берите handoff-spec — этот скилл рассчитан только на приёмку готовой вёрстки.
Какие задачи решает
- составить чек-лист визуальной приёмки вёрстки
- проверить соответствие дизайн-токенам, шрифтам и отступам
- проконтролировать интерактивные состояния компонентов и фокус
- проверить базовые требования доступности по WCAG AA
Примеры запросов агенту
- Составь чек-лист дизайн-ревью для модального окна авторизации
- Помоги провести дизайн-QA новой карточки товара
- Сформируй список проверок доступности и адаптивности для таблицы профиля
Как установить design-qa-checklist
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a claude-code2Вручную: положить файлы
~/.claude/skills/design-qa-checklist/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-qa-checklist/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a codex2Вручную: положить файлы
.agents/skills/design-qa-checklist/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a cursor2Вручную: положить файлы
.cursor/skills/design-qa-checklist/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-qa-checklist2Вручную: положить файлы
.github/skills/design-qa-checklist/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-ops/skills/design-qa-checklistВручную: положить файлы
.devin/skills/design-qa-checklist/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-qa-checklist
Как установить design-qa-checklist в Claude Code?
Выполните команду npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a claude-code в терминале.
Что проверяет скилл design-qa-checklist?
Он генерирует пункты проверки токенов, адаптивной сетки, интерактивных состояний, доступности WCAG AA, реального контента и кроссплатформенности.
Чем design-qa-checklist отличается от handoff-spec?
Скилл handoff-spec готовит спецификацию для инженеров перед разработкой, а design-qa-checklist используется на этапе ревью готового интерфейса.
Исходный текст
SKILL.md · MIT
--- name: design-qa-checklist description: Build a QA checklist for verifying that a build matches the design. Use at implementation review. For the spec engineers build from, use `handoff-spec`. --- # Design QA Checklist You are an expert in creating systematic QA checklists for verifying design implementation. ## What You Do You create checklists that help designers systematically verify that implementations match design specifications. ## QA Categories ### Visual Accuracy - Colors match design tokens - Typography matches specified styles - Spacing and sizing match specs - Border radius, shadows, opacity correct - Icons are correct size and color - Images are correct aspect ratio and quality ### Layout - Grid alignment is correct - Responsive behavior matches specs at each breakpoint - Content reflows properly - No unexpected overflow or clipping - Minimum and maximum widths respected ### Interaction - All states render correctly (default, hover, focus, active, disabled) - Transitions and animations match specs - Click/touch targets are adequate size (44px minimum) - Keyboard navigation works in correct order - Focus indicators are visible ### Content - Real content fits the layout (no lorem ipsum in production) - Truncation works as specified - Empty states display correctly - Error messages are correct - Loading states appear as designed ### Accessibility - Screen reader announces correctly - Color contrast meets WCAG AA - Focus management works - ARIA labels and roles are correct - Reduced motion is respected ### Cross-Platform - Works in required browsers - Works on required devices - Handles different text sizes (OS accessibility settings) - Handles different screen densities ## QA Process 1. Self-review by developer against checklist 2. Designer visual QA pass 3. File bugs with screenshots comparing design vs implementation 4. Prioritize bugs by severity 5. Verify fixes ## Best Practices - QA against the design spec, not memory - Test with real content and data - Check edge cases, not just happy paths - Use browser dev tools to verify exact values - Document recurring issues for prevention
© Owl-Listener · MIT · Owl-Listener/designer-skills
