# Skills в Claude Code: как собрать дизайн-навык с правилами за 6 шагов

> Skill превращает визуальные правила в набор файлов, который Claude Code подключает к подходящим задачам. Показываю структуру дизайн-навыка, сборку и причины сбоев.

Источник: https://vibeceh.ru/guides/skills-navyki-sobrat-dizayn-navyk-dlya-claude-code
Автор: Сергей Мазур · опубликовано 2026-08-08

Skills в Claude Code - это набор инструкций и дополнительных материалов, который Claude Code подключает к подходящей задаче. Обычный запрос описывает конкретную работу один раз. Дизайн-навык задаёт постоянные правила: для кого создаётся интерфейс, какой у него визуальный характер, как выбирать цвета, шрифты и компоновку, а также что проверить перед завершением.

Каждую неделю разбираю рабочие связки Claude Code для малого бизнеса и показываю, как собрать свои Skills без программирования. Подпишись на канал, чтобы не пропустить:

[Telegram-канал «Вайбцех»](https://t.me/vibeceh)

## Что такое Skills в Claude Code и зачем нужен дизайн-навык?

Skill - это папка с инструкциями, файлами и ресурсами для специализированной задачи. Поддержка Skills появилась в Claude Code 2.0.20. Обычный запрос даёт Claude разовое поручение, а дизайн-навык добавляет визуальный контекст и порядок решений: от предмета продукта и аудитории до типографики, палитры и проверки готового интерфейса.

Anthropic описывает Skills как способ упаковать рабочее знание в переносимый набор файлов:

> «Claude силён, но настоящая работа требует процедурного знания и организационного контекста».
> - Barry Zhang, Keith Lazuka и Mahesh Murag, [Equipping agents for the real world with Agent Skills](https://www.anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills)

В обычном запросе ты пишешь: «Собери страницу для сервиса». Claude сам достраивает недостающие решения. Поэтому результат часто выглядит как заготовка: знакомая сетка, нейтральные цвета, стандартные карточки и шрифт, который уже встречался в десятках интерфейсов.

Дизайн-навык меняет правила принятия решений. В нём можно зафиксировать:

- предмет продукта;
- аудиторию;
- визуальное направление;
- палитру;
- типографику;
- компоновку;
- допустимый визуальный риск;
- способ проверки результата.

Идеальный экран не гарантирован. Claude всё равно может пропустить часть правил. При этом у него появляется рабочий контекст, от которого можно отталкиваться, вместо одной команды «сделай страницу».

Agent Skills появились как формат, который упаковывает процедурное знание и контекст в файлы и папки. В декабре 2025 года Anthropic опубликовала этот формат как открытый стандарт для переносимости между AI-инструментами. В Claude Code он называется Skills, а в более широком контексте - Agent Skills.

## Что должно входить в дизайн-навык?

рабочий дизайн-навык описывает не абстрактную красоту, а конкретную систему решений. В нём есть предмет продукта, аудитория, визуальное направление, палитра, типографика, компоновка и намеренный визуальный риск. Каждое правило связывается с действием или проверкой. Формулировка «сделай красиво» такой системой не становится.

![Кот изучает карточки с четырьмя элементами дизайн-навыка.](https://s3.regru.cloud/crossmark/statejnik/images/guides/skills-navyki-sobrat-dizayn-navyk-dlya-claude-code/kadr-1.webp)

Начинай с предмета продукта. У финансового сервиса, музыкального архива и панели для производственного цеха разный визуальный материал. Anthropic формулирует это так:

Мир самого предмета, его материалы, инструменты, артефакты и живой язык предметной области - вот откуда берутся отличительные решения».

Дальше зафиксируй аудиторию. Один и тот же продукт можно показать новичку, оператору или руководителю. У каждого свои ожидания от плотности информации, размера текста и количества подсказок.

После этого опиши визуальное направление. Не «современно» и не «дорого». Такие слова не говорят, что именно делать. Напиши, например, что интерфейс должен выглядеть как рабочий инструмент архива: плотная сетка, заметные номера записей, спокойная палитра бумаги и один контрастный цвет для действий. Это уже набор решений, а не оценка вкуса.

В палитре укажи роли цветов:

- фон;
- основной текст;
- вторичный текст;
- граница;
- акцент;
- состояние ошибки;
- состояние успеха.

Типографика должна объяснять иерархию. Укажи, какой шрифт отвечает за заголовки, какой за основной текст, как выделяются подписи и где нельзя терять читаемость.

Компоновка отвечает за форму экрана:

- ширина основного блока;
- положение заголовка;
- отношение текста и изображения;
- плотность карточек;
- поведение на узком экране;
- место для главного действия.

Последний обязательный блок - риск. Встроенный в Claude Code `frontend-design` Skill требует сделать «один настоящий эстетический риск», который можно объяснить. Риск не означает добавить случайную анимацию или кричащий градиент. Это может быть необычная пропорция hero-блока, крупная типографика, асимметричная сетка или материал, связанный с предметом продукта.

Такая фраза не задаёт действие и не даёт критерия проверки. Замени её на конкретное решение: выбери один выразительный акцентный шрифт, задай роли цветов, опиши сетку и попроси проверить результат по этим пунктам.

Для малого бизнеса такой подход собирается в [набор из нескольких навыков](/guides/claude-code-sobrat-lichnyy-nabor-skills-dlya-malogo-biznesa). Дизайн-навык не должен превращаться в учебник на сотни страниц. Общие правила держи в основном файле. Примеры, токены, референсы и чек-листы выноси в связанные материалы. Так Claude получает нужную глубину только тогда, когда задача этого требует.

## Как собрать собственный Skill шаг за шагом?

создай в проекте `.claude/skills/`, внутри неё отдельную папку навыка и файл `SKILL.md`. В frontmatter запиши имя и условия запуска, в теле - короткие рабочие правила, а подробности вынеси в связанные файлы. Затем проверь навык на типичных запросах и отдельно посмотри, применил ли Claude правила в результате.

![Кот одобрительно смотрит на схему первых трёх шагов создания Skill.](https://s3.regru.cloud/crossmark/statejnik/images/guides/skills-navyki-sobrat-dizayn-navyk-dlya-claude-code/kadr-2.webp)

В корне проекта создай каталог `.claude/skills/`, а внутри него папку с понятным именем, например `product-design`.

Такая структура отделяет навык от остального кода:

   ```text
   .claude/
   └── skills/
       └── product-design/
           └── SKILL.md
   ```

Имя папки должно подсказывать назначение навыка. Не складывай все правила в один общий каталог без отдельных папок. Подробную сборку первого навыка с проверкой запуска я разбирал в [отдельном руководстве](/guides/skills-navyki-pervyy-navyk-dlya-claude-code-bez-kashi).

Создай `SKILL.md` и добавь frontmatter с именем и описанием. В описании укажи, что делает навык и когда его применять: при создании сайта, landing page, dashboard, UI или frontend-компонента.

   ```yaml
   ---
   name: product-design
   description: >
     Помогает создавать отличительный визуальный дизайн для сайтов,
     landing page, dashboard и UI-компонентов. Используй при создании
     нового интерфейса или переработке существующего визуального стиля.
   ---
   ```

Описание - это не рекламный текст. По нему Claude решает, подходит ли навык к текущей задаче. По сути ты выступаешь как skill builder: собираешь инструкции, примеры и проверки в одну папку, а claude code skill creator - это твоя роль на время сборки. В руководстве Anthropic отдельно указано, что описание должно содержать и назначение, и условия запуска, а его объём должен быть меньше 1024 символов.

После frontmatter добавь короткую инструкцию: сначала определить предмет и аудиторию, затем выбрать визуальное направление, палитру, типографику и компоновку, после этого собрать интерфейс и проверить результат.

   ```markdown
   # Product design

   Перед сборкой интерфейса:

   1. Определи предмет продукта и аудиторию.
   2. Зафиксируй визуальное направление одним предложением.
   3. Выбери роли цветов, типографику и компоновку.
   4. Сделай один намеренный визуальный риск и объясни его.
   5. Проверь читаемость, иерархию и поведение интерфейса на узком экране.

   Не используй абстрактные правила вроде «сделай красиво»,
   «сделай современно» или «сделай уникально». Переводи их
   в наблюдаемые решения и действия.

   Не требуй повторять или не повторять решения из прошлых диалогов.
   Claude не видит другие изолированные генерации.
   ```

Главные правила держи рядом с началом файла. Не прячь критическое требование в длинном описании, где оно потеряется среди общих советов.

Если правила палитры, типографики и компоновки растут, создай внутри папки навыка дополнительные файлы.

   ```text
   .claude/
   └── skills/
       └── product-design/
           ├── SKILL.md
           └── references/
               ├── color.md
               ├── typography.md
               └── layout.md
   ```

В `color.md` положи роли цветов и примеры сочетаний. В `typography.md` - правила иерархии. В `layout.md` - схемы компоновки. В основном `SKILL.md` оставь ссылки на эти материалы и условие, когда их читать.

Устроено это в три слоя: frontmatter постоянно находится в системном контексте, тело `SKILL.md` подгружается, когда Claude считает навык подходящим, а связанные файлы открываются дополнительно внутри папки навыка.

После создания файла отправь запрос, который заставляет Claude прочитать структуру, найти конфликтующие правила и проверить условия запуска.

   

Проверка самого файла не заменяет проверку результата. Попроси Claude применить навык к типичным запросам: создать landing page, переработать dashboard и улучшить существующий UI. Смотри, запускается ли навык и появляются ли в интерфейсе зафиксированные решения.

Удали фразы, которые Claude пропускает или трактует по-разному. Добавь в Skill реальные повторяющиеся сбои: стандартные карточки, слабую иерархию, перегруженный hero, нечитаемый текст или отсутствие проверки узкого экрана.

Anthropic советует хранить в Skills не пересказ того, что Claude и так делает по умолчанию, а места, где он регулярно ошибается. Если правило должно выполняться каждый раз без исключений, одного Skill недостаточно. Для такого действия нужны hooks.

На этом этапе у тебя есть локальный навык, но не гарантия идеального результата. Skill задаёт направление и рабочий порядок. Результат всё равно надо открыть, посмотреть и уточнить.

Создание дизайн-навыка связано с практикумом напрямую: на практикуме я показываю полную связку, где ты собираешь навык руками, проверяешь на интерфейсе и исправляешь правила по результату.

## Как пользоваться Skills в Claude Code?

Claude Code может подключить Skill автоматически, если описание подходит к задаче, или получить его по ручному вызову. Несколько Skills могут загружаться одновременно. Frontmatter виден постоянно, тело навыка подгружается при совпадении с задачей, а связанные файлы открываются по необходимости. Готовый интерфейс всё равно нужно просмотреть и уточнить вручную.

Автоматический сценарий выглядит просто: ты просишь создать или переработать интерфейс, Claude сопоставляет запрос с описаниями доступных Skills и выбирает подходящие. Дизайн-навык может загрузиться вместе с другим навыком, например для работы с данными или отдельного рабочего процесса.

Ручной сценарий нужен, когда результат важен или автоматический запуск уже подводил. В Claude Code навык можно вызвать по его имени, если он поддерживает ручной вызов. Так ты не оставляешь выбор полностью на совпадение между запросом и описанием.

У Skills есть три уровня загрузки:

1. Frontmatter с именем и описанием постоянно находится в системном контексте. Каждый Токен на счету, поэтому описание должно быть коротким.
2. Тело `SKILL.md` загружается, когда Claude считает навык подходящим.
3. Связанные файлы загружаются дополнительно внутри папки навыка.

Несколько Skills могут работать одновременно. Поэтому дизайн-навык лучше делать узким. Он должен отвечать за визуальное направление, а не пытаться управлять всем проектом сразу.

Anthropic описывает рабочий процесс своих команд так: Claude создаёт прототип, после чего люди просматривают решения и вносят финальные уточнения. Для [вайб-кодера](/concepts/vajb-koding) правило то же. Не принимай фразу «готово» за проверку. Открой экран, посмотри иерархию, текст, цвета и поведение на узком окне.

## Как хранить Skill в GitHub и подключать его к Claude Code?

храни Skill в отдельной папке репозитория с `SKILL.md` и связанными файлами внутри. Agent Skills опубликованы как открытый стандарт для переносимости между AI-инструментами, а Claude Code следует этому стандарту и сохраняет собственные расширения. В этой статье я не описываю установку и обновление из GitHub: подтверждённой пошаговой фактуры для этих действий здесь нет.

Минимальная структура репозитория может выглядеть так:

```text
design-skills/
└── product-design/
    ├── SKILL.md
    └── references/
        ├── color.md
        ├── typography.md
        └── layout.md
```

Внутри проекта Claude Code использует ту же идею: отдельная папка навыка, основной `SKILL.md` и дополнительные файлы рядом.

В декабре 2025 года Anthropic сообщила:

Мы опубликовали Agent Skills как открытый стандарт для переносимости между платформами».

Claude Code следует Agent Skills standard, но добавляет собственные возможности управления вызовом, запуска в отдельном контексте и динамической вставки контекста. Старые custom commands тоже продолжают работать, но Skills поддерживают дополнительные файлы и более широкую структуру.

Не смешивай факт открытого стандарта с готовой инструкцией подключения конкретного репозитория. Сам стандарт подтверждён. Пошаговая процедура установки из GitHub и обновления подключённого навыка в фактуре этой статьи не подтверждена.

## Почему Skill не срабатывает, хотя он установлен?

установленный Skill может не запуститься из-за длинного описания, большого набора навыков, отсутствия в системном контексте или слишком общего триггера. Автоматический выбор не является гарантией. В практическом тесте активация составила 0% без hooks, 20% после простой подсказки, 80% после оценки и 84% после принудительной проверки.

![Мужчина закрывает лицо ладонью рядом со списком причин сбоя Skill.](https://s3.regru.cloud/crossmark/statejnik/images/guides/skills-navyki-sobrat-dizayn-navyk-dlya-claude-code/kadr-3.webp)

Первая причина - описание. Claude Code добавляет имена и описания Skills в системный контекст. Если описания длинные или навыков слишком много, часть списка может перестать попадать в контекст. При этом отдельного предупреждения может не быть.

Вторая причина - общий триггер. Слова `design`, `page`, `done` или `fix` встречаются в задачах, которые не относятся к конкретному Skill. В результате навык может не запускаться на нужный запрос или включаться случайно.

Третья причина - навык не виден Claude. Тело `SKILL.md` не загружается постоянно. Сначала Claude должен увидеть описание в системном контексте, затем решить, что навык подходит к задаче. Если описание выпало из списка, тело файла само по себе не поможет автоматическому выбору.

Четвёртая причина - конкуренция. При большом количестве Skills описания могут пересекаться. Claude видит несколько подходящих вариантов или решает, что справится без любого из них.

Скотт Спенс (Scott Spence) в своём тесте на Haiku 4.5 получил такие показатели:

- без hooks - 0% активации;
- после простой подсказки - 20%;
- после LLM-проверки - 80%;
- после принудительной проверки - 84%.

Это не универсальная метрика для каждого проекта. Это результат конкретной конфигурации и конкретного теста. Но он хорошо показывает разницу между «файл установлен» и «файл реально вызван».

Проверь проблему по порядку:

1. Посмотри, короткое ли описание и есть ли в нём условия запуска.
2. Убери общие слова и добавь предметные сценарии.
3. Проверь, не слишком ли много Skills подключено одновременно.
4. Вызови навык вручную и сравни результат с автоматическим сценарием.
5. Если правило должно работать без исключений, вынеси контроль в hook.

| Причина | Симптом | Решение |
|---------|---------|--------|
| Длинное описание | Навык не попадает в контекст | Сократи описание до ≤1024 символов |
| Общий триггер | Навык включается не на те задачи | Добавь предметные сценарии |
| Навык не виден Claude | Тело SKILL.md не загружается | Проверь попадание описания в контекст |
| Конкуренция Skills | Claude выбирает другой навык | Вызови вручную или сузь триггеры |

Файл может лежать в правильной папке, но Claude всё равно решит работать без него. Для важных задач сначала используй ручной вызов, а автоматический режим проверяй на нескольких типичных запросах.

## Какие правила нельзя надёжно поручать Skill?

Skill не гарантирует буквальное исполнение каждой инструкции. Claude может частично пропустить правило, не видит другие изолированные генерации и плохо работает с оценками вроде «красиво» или «уникально». Для действий без исключений Anthropic предлагает hooks. Skill задаёт направление, а hook механически проверяет обязательное действие.

Нельзя требовать от Claude сравнения с прошлыми изолированными генерациями. В каждом диалоге модель не видит другие свои результаты. Поэтому правило «не повторяй решения из прошлых экранов» звучит разумно, но недостижимо.

Практик Justin Wetch описал эту границу прямо:

Claude не видит другие свои генерации. Каждый разговор полностью изолирован».

Нельзя оставлять правила в виде вкусовой оценки. «Сделай красиво», «сделай уникально» и «сделай интересно» не объясняют, какое действие выполнить и по чему принять результат. Перепиши их через наблюдаемые признаки: выбери выразительный шрифт для заголовка, задай иерархию размером и весом, проверь контраст основного текста.

Нельзя держать противоречивые инструкции в разных частях файла. Требование «выбери экстремальную эстетику» конфликтует с правилом «главное не интенсивность, а намеренность». Сначала найди такие пары, потом оставь одну последовательность решений.

Нельзя рассчитывать, что Skill будет выполнять действие без исключений. В документации Claude Code это разделено так:

Используй hooks для действий, которые должны происходить каждый раз без исключений».

Для дизайн-навыка Skill может задать визуальное направление, порядок работы и список проверки. Hook подходит для обязательного механического действия. Например, для запуска проверки после изменения файла или для контроля конкретного шага рабочего процесса. Безопасную схему проверки автоматических действий я разбирал в [материале про auto mode в Claude Code](/guides/claude-code-vklyuchit-i-bezopasno-proverit-auto-mode).

## Какие вопросы чаще всего задают о Skills в Claude Code?

здесь собраны частые вопросы о Skills в Claude Code: от создания и настройки до отличий от Agent Skills, ручного вызова и причин, по которым навык не запускается.

### Что такое Skill в Claude Code?

Skill в Claude Code - это папка с `SKILL.md`, инструкциями и связанными файлами для специализированной задачи. Claude видит описание навыка, а тело и дополнительные материалы загружает, когда считает их подходящими к текущему запросу.

### Как создать Skill для Claude Code?

Создай `.claude/skills/`, отдельную папку навыка и файл `SKILL.md`. Добавь frontmatter с именем и описанием условий запуска, затем запиши рабочие правила и вынеси подробности в связанные файлы.

### Как настроить Skill в Claude Code?

Настрой описание, условия запуска, основные правила и связанные материалы. Описание должно одновременно говорить, что делает навык и на какие задачи он должен реагировать. После этого проверь автоматический и ручной сценарии.

### Как использовать Skill в Claude Code?

Можно дождаться автоматического выбора по описанию или вызвать навык вручную по имени. После загрузки проверь, применились ли правила в готовом интерфейсе, потому что запуск навыка не гарантирует буквальное исполнение каждой инструкции.

### Как создать дизайн-навык для Claude Code?

Зафиксируй предмет продукта, аудиторию, визуальное направление, палитру, типографику, компоновку и один намеренный визуальный риск. Затем добавь критерии проверки, которые можно увидеть в результате.

### Где искать готовые Skills для Claude Code?

Единого официального рейтинга top skills claude и claude code skills marketplace в фактуре этой статьи нет. Agent Skills опубликованы как открытый стандарт, а конкретный навык нужно проверять по структуре, описанию, условиям запуска и поведению на типичных запросах.

### Как подключать Skills из GitHub к Claude Code?

Подтверждённый факт здесь только один: Skill можно хранить в репозитории как отдельную папку с `SKILL.md` и связанными файлами, а Agent Skills предназначены для переносимости между AI-инструментами. Пошаговая установка из GitHub в этой статье не описана.

### Какие Skills подходят для Claude Code?

Подходят узкие Skills для конкретных задач: дизайн интерфейса, отдельный рабочий процесс, доменное знание, повторяемая процедура. Среди примеров - marketing skills claude: навык для лендингов, рассылок и визуала кампаний. Несколько Skills могут загружаться одновременно, поэтому один файл не должен пытаться управлять всем проектом.

### Чем отличаются Claude Skills и Agent Skills?

Claude Skills - название поддержки в Claude Code. Agent Skills - более широкое название открытого стандарта, опубликованного для переносимости между AI-инструментами. Claude Code следует стандарту и добавляет собственные расширения. Сравнение MCP и Skills для повторяемых задач я разбирал в [отдельном материале](/guides/mcp-protiv-skills-gde-khranit-instruktsiyu-dlya-claude-code).

### Что делать, если Skill не запускается автоматически?

Проверь длину описания, количество Skills, наличие навыка в системном контексте и конкретность триггеров. Для важной задачи вызови навык вручную. Если нужна проверка без исключений, используй hook.

### Почему установленный Skill не виден Claude?

Описание навыка может не попасть в системный контекст, если описания слишком длинные или Skills слишком много. Без описания Claude не сможет выбрать тело `SKILL.md` по текущему запросу.

### Можно ли загрузить несколько Skills одновременно?

Да. Claude может загружать несколько Skills одновременно. Поэтому навыки стоит делать узкими и совместимыми, а пересекающиеся триггеры и дублирующиеся инструкции проверять отдельно.

### Можно ли поручить Skill правило «сделай красиво»?

Надёжно - нет. Такая оценка не описывает действие и критерий результата. Замени её на конкретные решения по шрифту, цвету, иерархии, сетке и проверке интерфейса.

### Может ли Skill сравнить текущую генерацию с прошлой?

Нет, если прошлый результат находится в другом изолированном диалоге. Skill не даёт Claude общей памяти о предыдущих генерациях. Сравнивать можно только материалы, которые находятся в текущем проекте или текущем контексте.

### Когда вместо Skill нужны hooks?

Hooks нужны для действий, которые должны происходить каждый раз без исключений. Skill подходит для правил, доменного знания и рабочего направления, но модель может частично проигнорировать его инструкцию.

- [Equipping agents for the real world with Agent Skills - Anthropic](https://www.anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills)
- [Best practices for Claude Code - Anthropic](https://code.claude.com/docs/en/best-practices)
- [The Complete Guide to Building Skills for Claude - Anthropic](https://resources.anthropic.com/hubfs/The-Complete-Guide-to-Building-Skill-for-Claude.pdf)
- [`frontend-design` Skill - GitHub](https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md)
- [Teaching Claude to Design Better: Improving Anthropic's Frontend Design Skill - Justin Wetch](https://www.justinwetch.com/blog/improvingclaudefrontend)
- [Claude Code skills not triggering? It might not see them](https://blog.fsck.com/2025/12/17/claude-code-skills-not-triggering/)
- [Claude Code skills activate 20% of the time. Here's how I got to 84%](https://www.reddit.com/r/ClaudeCode/comments/1oywsa1/claude_code_skills_activate_20%25_of_the_time_heres/)
- [Lessons from building Claude Code: How we use skills - Claude](https://claude.com/blog/lessons-from-building-claude-code-how-we-use-skills)