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

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

Telegram-канал «Вайбцех»

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

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

«Claude силён, но настоящая работа требует процедурного знания и организационного контекста».

• Barry Zhang, Keith Lazuka и Mahesh Murag, Equipping agents for the real world with Agent Skills

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Создай папку навыка.

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

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

   Скопировать

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

   Имя папки должно подсказывать назначение навыка. Не складывай все правила в один общий каталог без отдельных папок. Подробную сборку первого навыка с проверкой запуска я разбирал в отдельном руководстве.

2. Опиши условия запуска.

   Создай 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 символов.

3. Запиши рабочие правила.

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

   markdown

   Скопировать

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

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

4. Вынеси подробности в файлы.

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

   Скопировать

   .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 считает навык подходящим, а связанные файлы открываются дополнительно внутри папки навыка.

5. Попроси Claude проверить навык.

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

   Проверка дизайн-навыкаСкопировать промпт

   Проверь навык product-design в .claude/skills/product-design/.
   
   Сначала прочитай frontmatter, тело SKILL.md и связанные файлы.
   Затем проверь:
   - понятно ли, когда навык нужно запускать;
   - нет ли общих триггеров, которые включат его на нерелевантную задачу;
   - нет ли противоречий между правилами;
   - переводятся ли слова «красиво», «современно» и «уникально»
     в конкретные действия;
   - можно ли проверить каждый обязательный пункт по готовому интерфейсу.
   
   Не переписывай проект. Покажи список найденных проблем
   и предложи точечные изменения только в файлах навыка.

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

6. Уточни правила после теста.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Первая причина - описание. 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.

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

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

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

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

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

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

Для дизайн-навыка Skill может задать визуальное направление, порядок работы и список проверки. Hook подходит для обязательного механического действия. Например, для запуска проверки после изменения файла или для контроля конкретного шага рабочего процесса. Безопасную схему проверки автоматических действий я разбирал в материале про auto mode в Claude Code.

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

Что такое 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 для повторяемых задач я разбирал в отдельном материале.

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

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

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

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

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

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

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

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

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

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

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

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