design-debt-audit — скилл для Claude Code: аудит дизайн-долга
Разбирает накопленные несоответствия в интерфейсе по категориям и выдаёт план правок с приоритетами. Нужен, когда продукт рос годами и дизайн поехал.
npx skills add Owl-Listener/designer-skills --skill design-debt-audit -a claude-codeЧто делает design-debt-audit
Скилл проводит инвентаризацию дизайн-долга и раскладывает находки по пяти категориям: визуальные расхождения, структурные проблемы, нарушения доступности, пробелы в документации и долг реализации. Каждой находке присваивается серьёзность, частота и примерная трудоёмкость починки, а приоритет считается как серьёзность, умноженная на частоту и делённая на трудозатраты.
Работа идёт по шагам: сначала определяется охват (весь продукт, одна область или одна платформа), затем снимаются скриншоты всех экранов и состояний, потом идёт классификация и подсчёт. На выходе — короткий список первоочередных правок, быстрые победы вроде замены захардкоженных значений на токены и отдельный перечень задач под переработку. Отдельно ведётся живой реестр долга с владельцем, статусом и целевым сроком; его советуют пересматривать раз в квартал.
Скилл не заменяет точечные проверки. Для покрытия токенами есть design-token-audit из designer-toolkit, а для разрывов по WCAG — accessibility-audit из design-systems. Если нужен именно общий обзор накопленного разъезда, берите этот. Аудит — это исследование, а не спринт по исправлению, и оценку трудоёмкости лучше делать вместе с инженерами: дизайнеры часто недооценивают сложность реализации.
Какие задачи решает
- собрать список расхождений между продуктом и дизайн-системой
- отделить критичные нарушения доступности от мелкой полировки
- посчитать, сколько раз встречается одна и та же проблема
- оценить, какие правки дадут больше всего пользы на единицу усилий
- завести реестр долга с владельцами и сроками
Примеры запросов агенту
- проведи аудит дизайн-долга по всему продукту и расставь приоритеты
- собери расхождения между экранами и дизайн-системой, разложи по категориям
- составь реестр дизайн-долга с серьёзностью и трудоёмкостью починки
Как установить design-debt-audit
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-debt-audit -a claude-code2Вручную: положить файлы
~/.claude/skills/design-debt-audit/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-debt-audit/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-debt-audit -a codex2Вручную: положить файлы
.agents/skills/design-debt-audit/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-debt-audit -a cursor2Вручную: положить файлы
.cursor/skills/design-debt-audit/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-debt-audit2Вручную: положить файлы
.github/skills/design-debt-audit/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-debt-audit -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-ops/skills/design-debt-auditВручную: положить файлы
.devin/skills/design-debt-audit/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-debt-audit -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-debt-audit
Как установить design-debt-audit в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill design-debt-audit -a claude-code. После этого файл скилла появится по пути ~/.claude/skills/design-debt-audit/SKILL.md.
Что делает design-debt-audit?
Инвентаризирует накопленные несоответствия в интерфейсе, делит их на категории и выдаёт план правок с приоритетами. Плюс ведёт реестр долга, который можно обновлять со временем.
Чем он отличается от design-token-audit и accessibility-audit?
Этот скилл берёт общий разъезд по продукту. Покрытие токенами разбирает design-token-audit из designer-toolkit, а нарушения WCAG — accessibility-audit из design-systems.
Исходный текст
SKILL.md · MIT
--- name: design-debt-audit description: Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use `design-token-audit` (designer-toolkit); for WCAG gaps use `accessibility-audit` (design-systems). --- # Design Debt Audit You are an expert in systematically identifying and triaging design debt before it becomes structural. ## What You Do You conduct design debt audits that surface inconsistencies, outdated patterns, accessibility gaps, and structural problems — and produce a prioritized remediation plan that teams can act on. ## What Counts as Design Debt Design debt is any gap between the current state of the product and the standard it should meet. Categories: ### Visual Inconsistency Debt - Components that exist in the product but deviate from the design system (wrong color, spacing, type) - Multiple visual treatments for the same interaction (three different button styles doing the same thing) - Legacy UI that predates the current design system and hasn't been updated ### Structural Debt - Patterns that were designed for an earlier version of the product and don't scale to current complexity - Navigation that has been patched with new items and no longer reflects the underlying IA - Features that were added without holistic design, creating isolated islands in the product ### Accessibility Debt - Known WCAG violations that haven't been fixed - Components that work visually but fail with assistive technology - Missing keyboard navigation, focus management, or screen reader support ### Documentation Debt - Components in use that aren't in the design system - Specs that don't match implementation - Design decisions that exist only in someone's head ### Technical/Implementation Debt (design-relevant) - Designs that were implemented with hardcoded values instead of tokens - Components that were built differently across platforms (iOS, Android, web) without a documented reason ## Audit Process ### 1. Scope and Inventory - Define audit scope: full product, one feature area, or one platform - Screenshot every screen/state in scope - Catalog by screen type, component type, or user flow ### 2. Classify Debt For each screen or component, tag: - **Severity**: Critical (accessibility violation, major inconsistency) / Moderate (visual inconsistency, outdated pattern) / Minor (polish, edge case) - **Category**: Visual / Structural / Accessibility / Documentation / Implementation - **Frequency**: How many times does this issue appear? - **Effort to fix**: Low / Medium / High (rough engineering estimate) ### 3. Quantify - Total instances per issue type - Estimated user reach (how many users encounter each debt item?) - Business risk (does this debt create compliance, legal, or trust risk?) ### 4. Prioritize Score debt items using: Severity × Frequency / Effort Surface a short list of high-priority items — the debt that's causing the most harm per unit of effort to fix. ### 5. Remediation Plan - **Quick wins**: low-effort, high-frequency inconsistencies (token fixes, label updates) - **Structural projects**: require design and engineering investment; schedule into roadmap - **Accessibility fixes**: prioritize Critical violations; create a rolling fix backlog for Moderate - **Write-off items**: debt that exists in low-traffic areas and will be resolved by a planned redesign — document and defer ## Debt Register Maintain a living document (not a one-time audit) tracking: - Issue description - Category and severity - Affected screens/components - Status (open, in progress, resolved, deferred) - Owner - Target resolution (sprint or milestone) Review the register quarterly; update severity as the product changes. ## Common Findings - Navigation items added without IA review → structural nav debt - Features shipped under deadline without design system components → visual inconsistency debt - Third-party integrations with their own UI → visual inconsistency + accessibility debt - Rapid growth in content types not anticipated in original layout → structural debt ## Best Practices - Run a design debt audit before starting a major redesign — it defines the actual scope of work - Separate audit from remediation; auditing is research, not a fix sprint - Include engineering in severity and effort estimation — designers often underestimate implementation complexity - Track debt reduction as a metric; use it to advocate for dedicated cleanup capacity in roadmap planning - Prevent accumulation: include "does this create design debt?" as a question in design review checklists
© Owl-Listener · MIT · Owl-Listener/designer-skills