К основному содержанию
скилл CX Codex

design-debt-audit — скилл для Claude Code: аудит дизайн-долга

Разбирает накопленные несоответствия в интерфейсе по категориям и выдаёт план правок с приоритетами. Нужен, когда продукт рос годами и дизайн поехал.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Owl-Listener/designer-skills --skill design-debt-audit -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/design-debt-audit/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/design-debt-audit/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Дизайн» →
tailwind-design-system sickn33 Скилл задаёт агенту рамки работы с Tailwind: токены, варианты компонентов, адаптивные паттерны и доступность. Пригодится, когда UI в проекте разъезжается. CX Codex +1 1 600установок design-better BuilderOS Скилл для ИИ-агентов, который добавляет к генерации и ревью интерфейса правила UX/UI: иерархия, состояния, доступность, анимация. Пригодится, когда код уже работает, но выглядит сыро. CX Codex +1 1 100установок ui-ux-design-pro saifyxpro Скилл для проектирования дашбордов, SaaS-приложений и лендингов: задаёт дизайн-систему, проверяет доступность и качество вёрстки. CX Codex +1 797установок improve-ui ibelick Проверяет интерфейс на соответствие его дизайн-системе, находит доказанные расхождения и составляет планы исправлений для другого агента. CX Codex +1 7 900установок better-interface jakubkrehel Проводит сквозной аудит экранов и интерфейсов по правилам доступности, вёрстки, текста, цвета и типографики. Сводит отчёты узких скиллов в единый список замечаний по приоритету. CX Codex +1 30 000установок audit-ai-design-slop MengTo Скилл находит визуальный шум, нагромождение декоративных слоёв и дефекты интерфейса в коде или макетах. Помогает очистить проект без принудительного редизайна. CX Codex +1 1 200установок

Из того же набора109

doherty-threshold Скилл задаёт пороги отклика для интерфейсов и подсказывает, какую обратную связь показать во время ожидания. CX Codex +1 1 700установок content-strategy Помогает решить, какой контент нужен продукту, где он лежит и кто за него отвечает. Пригодится, когда проблема в самом контенте, а не в вёрстке. CX Codex +1 1 700установок millers-law Разбивает интерфейс на смысловые группы примерно по четыре элемента под ограничения рабочей памяти. Пригодится при структурировании меню, шагов онбординга и длинных форм. CX Codex +1 1 700установок design-system-governance Скилл описывает, как дизайн-система меняется: кто владеет, кто предлагает правки, как версионировать и что выводить из обращения. Нужен, когда над системой работает несколько команд. CX Codex +1 1 700установок von-restorff-effect Скилл учит агента выделять главное целевое действие в интерфейсе за счёт эффекта изоляции. Он пригодится, когда одна кнопка или тариф должны сразу бросаться в глаза. CX Codex +1 1 700установок hicks-law Скилл применяет закон Хика: время решения растёт с числом одновременных вариантов. Пригодится, когда на экране слишком много кнопок и пунктов. CX Codex +1 1 700установок fitts-law Скилл для ИИ-агента, который подсказывает размеры и расположение кнопок по закону Фиттса. Пригодится при вёрстке интерфейсов и мобильных экранов. CX Codex +1 1 700установок readable-measure Задаёт оптимальную длину строки текста для экранов и брейкпоинтов. Пригодится при вёрстке статей, документации и описаний в интерфейсе. CX Codex +1 1 700установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой