extract
Извлекает и консолидирует переиспользуемые компоненты, дизайн-токены и паттерны в дизайн-систему. Полезен при создании компонентов, рефакторинге UI или построении дизайн-системы.
AIpbakaus
official
Разработка
★ 76.2k
Что делает навык
Навык идентифицирует переиспользуемые паттерны, компоненты и дизайн-токены в целевой области, а затем извлекает и консолидирует их в дизайн-систему для систематического повторного использования. Он решает задачу создания или рефакторинга дизайн-системы, устраняя дублирование и жестко закодированные значения.
Когда применять
- Создание дизайн-системы с нуля при отсутствии существующей структуры.
- Рефакторинг UI для выявления и устранения повторяющихся компонентов и стилей.
- Консолидация разрозненных дизайн-токенов (цвета, отступы, типографика) в единую структуру.
- Стандартизация компонентов (например, кнопок или карточек) для устранения несогласованных вариаций.
Как работает
- Найти дизайн-систему, библиотеку компонентов или общую директорию UI, используя поиск по ключевым словам (например, 'design system', 'ui', 'components').
- Проанализировать структуру существующей дизайн-системы: конвенции именования компонентов, структуру токенов, паттерны документации и соглашения об импорте/экспорте.
- Если дизайн-система отсутствует, обязательно спросить пользователя о предпочтительном расположении и структуре перед созданием.
- Выявить повторяющиеся компоненты (кнопки, карточки, инпуты) и жестко закодированные значения (цвета, отступы, тени), которые следует преобразовать в токены.
- Обнаружить несогласованные вариации одних и тех же концепций (например, несколько стилей кнопок) и паттерны компоновки, подлежащие систематизации.
- Извлечь и консолидировать выявленные элементы в дизайн-систему для обеспечения переиспользуемости.
Примеры запросов агенту
Найди повторяющиеся компоненты в проекте и извлеки их в общую дизайн-систему.
Проанализируй UI-код на наличие жестко закодированных цветов и отступов, преобразуй их в токены.
Устрани дублирование стилей кнопок, консолидируй их в единый компонент дизайн-системы.
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «extract» из репозитория:
# https://github.com/pbakaus/impeccable
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r extract/ ~/.claude/skills/extract/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.