Claude Skills (вони ж Agent Skills) - це папка з файлом SKILL.md і допоміжними матеріалами, яку Claude підвантажує тільки тоді, коли задача їй відповідає. Для дизайнера це спосіб один раз описати повторюваний процес - UI-тексти, неймінг токенів, перевірку доступності чи handoff - і далі запускати його однією командою в Claude або Claude Code. Почніть з шести скілів нижче: кожен закриває рутину, яку ви зараз щоразу пояснюєте в промпті заново.
Я Dmytro Nikolaienko, 15 років у продуктовому дизайні, і скіли - це перше, що я налаштовую в новому проєкті після CLAUDE.md. Нижче - визначення, чим скіл відрізняється від CLAUDE.md і MCP, шість прикладів SKILL.md, які можна скопіювати, і покрокове створення свого.
Що таке Claude Skill одним реченням?
Skill - це інструкція до однієї задачі, оформлена як папка, яку Claude знаходить за коротким описом і читає повністю лише в момент, коли вона потрібна.
Anthropic запустила Agent Skills 16 жовтня 2025 року, а 18 грудня 2025 року відкрила формат як стандарт на agentskills.io. Тому той самий SKILL.md сьогодні розуміють не лише Claude, а й інші інструменти: його підтримують, наприклад, VS Code, GitHub Copilot і Cursor.
Типовий скіл виглядає так:
ux-copy/
├── SKILL.md обов'язковий: опис + інструкція
├── glossary.md словник термінів продукту
└── examples.md хороші й погані прикладиГоловна фішка - завантаження шарами (progressive disclosure):
- Завжди в контексті лише
nameіdescriptionкожного скіла - орієнтовно сотня токенів на скіл. - Коли запит збігається з описом або ви пишете
/ux-copy, Claude читає тіло SKILL.md. - Допоміжні файли відкриваються тільки якщо інструкція на них посилається і вони потрібні саме зараз.
Тому скілів можна мати десятки, і вони не забивають контекст так, як один гігантський файл правил.
Чим Skill відрізняється від CLAUDE.md, інструкцій проєкту і MCP?
Це чотири різні шари, і плутанина між ними - найчастіша причина, чому «Claude знову все забув».
| Що | Коли Claude це читає | Для чого | Приклад |
|---|---|---|---|
| CLAUDE.md | на старті кожної сесії в репозиторії, повністю | постійні правила проєкту | стек, структура папок, «тільки семантичні токени» |
| Інструкції проєкту в Claude | у кожному чаті цього проєкту, повністю | контекст і тон для однієї теми | «це редизайн банківського застосунку, аудиторія 35+» |
| Skill | опис завжди, тіло - тільки коли задача збігається або за /назва | повторювана процедура з кроками | перевірка доступності, специфікація компонента |
| MCP | коли Claude викликає інструмент | доступ до зовнішніх даних і дій | прочитати фрейм у Figma, створити issue в GitHub |
Просте правило вибору:
- Правило потрібне в кожній розмові - у CLAUDE.md.
- Це процедура, яку ви запускаєте кілька разів на тиждень, - у Skill.
- Claude бракує доступу до файлу чи сервісу - підключайте MCP.
Скіли і MCP добре працюють у парі: MCP дає Claude прочитати ваш макет, а скіл пояснює, що саме з ним перевірити. Як налаштувати файли правил для дизайн-системи (AGENTS.md, DESIGN.md), детально розібрано в окремому матеріалі AGENTS.md для дизайн-системи, а підключення Figma - у статті про Figma MCP. Тут не повторюю.
Які Claude Skills дизайнеру зробити першими?
Критерій простий: задача, яку ви цього тижня пояснювали Claude хоча б тричі. У дизайнерів це майже завжди одні й ті самі шість речей. Приклади нижче скорочені, але робочі: їх можна взяти як основу і дописати під себе.
1. ux-copy: UI-тексти в голосі бренду
Найшвидший виграш. Без скіла Claude щоразу пише «Упс! Щось пішло не так», зі скілом - у вашому тоні і з вашими термінами.
---
name: ux-copy
description: Пише й редагує UI-тексти продукту (кнопки, помилки, порожні стани, тости). Використовуй, коли просять текст для інтерфейсу або перевірити мікрокопі.
---
# UI-тексти
- Кнопка = дієслово + об'єкт: «Зберегти зміни», не «ОК».
- Помилка: що сталося + що робити далі. Без «Упс».
- Звертання на «ти», без знаків оклику.
- Терміни бери тільки з glossary.md.
- Дай 3 варіанти і познач найкоротший.2. token-naming: перевірка назв токенів
Вставляєте список Figma Variables або JSON - отримуєте таблицю проблем. Схему беріть свою, логіку побудови схеми ми розбирали в гайді з нейменінгу токенів.
---
name: token-naming
description: Перевіряє назви design tokens і Figma Variables на відповідність схемі. Використовуй, коли показують список токенів, JSON або колекцію змінних.
---
# Схема: category.role.variant.state
1. Primitive без ролі в назві: blue.600, space.4.
2. Semantic описує роль, а не значення: color.text.muted, не color.grey.
3. Поверни таблицю: назва | проблема | запропонована назва.3. component-spec: специфікація компонента
Спека завжди має однакову структуру, тож це ідеальний кандидат. Шаблон кладете поруч у template.md. Що саме має бути в хорошій спеці, описано в матеріалі про специфікацію компонента.
---
name: component-spec
description: Пише специфікацію UI-компонента для розробки. Використовуй, коли просять описати компонент, його варіанти, стани або пропси.
---
# Заповни template.md по пунктах
1. Призначення одним реченням і коли НЕ використовувати.
2. Анатомія: з яких частин складається.
3. Стани: default, hover, focus, active, disabled, loading, error.
4. Токени для кожної частини.
5. Пропси: назва, тип, значення за замовчуванням.4. a11y-review: перевірка доступності
Конкретні пороги WCAG 2.2 рівня AA, а не загальне «перевір доступність», - тоді Claude перевіряє, а не фантазує.
---
name: a11y-review
description: Перевіряє екран або компонент на доступність за WCAG 2.2 AA. Використовуй, коли просять a11y-рев'ю, перевірку контрасту, фокусу чи підписів.
---
# Перевір по черзі
- Контраст звичайного тексту від 4.5:1, великого тексту та іконок від 3:1.
- Ціль натискання від 24x24 px.
- Видимий фокус і логічний порядок Tab.
- Помилки форм позначені не тільки кольором.
Формат: пункт | статус | як виправити.5. handoff-notes: передача в розробку
Розробнику не потрібен роман. Скіл тримає нотатки в межах одного екрана тексту.
---
name: handoff-notes
description: Готує нотатки для передачі макета в розробку. Використовуй, коли дизайн готовий і треба описати його для розробника або для PR.
---
# Що включити
- Що змінилось відносно поточної версії.
- Нові й змінені компоненти та токени.
- Поведінка: стани, анімації, адаптив 375 / 768 / 1440.
- Відкриті питання окремим блоком.
Не більше одного екрана тексту.6. pre-send-check: «перевір мене перед відправкою»
Мій улюблений. Рядок disable-model-invocation: true у Claude Code означає, що скіл запускається тільки вручну через /pre-send-check, а не сам по собі.
---
name: pre-send-check
description: Фінальна перевірка роботи перед відправкою клієнту чи команді.
disable-model-invocation: true
---
# Чекліст
1. Чи відповідає результат брифу з brief.md?
2. Друкарські помилки і однаковість термінів.
3. Порожні стани, довгі тексти, помилки.
4. 3 найслабші місця і що з ними зробити.
Не хвали. Тільки проблеми за пріоритетом.Як створити свій Skill крок за кроком?
- Оберіть одну задачу. Ту, яку ви пояснювали тричі за тиждень. Один скіл - одна задача.
- Створіть папку. У Claude Code:
~/.claude/skills/ux-copy/- для всіх ваших проєктів, або.claude/skills/ux-copy/у репозиторії - щоб скіл отримала вся команда разом з кодом. - Напишіть SKILL.md. Зверху між рисками
---два поля:name(малими літерами через дефіс) іdescription- що робить скіл і коли його брати. Нижче - кроки, правила і формат відповіді. - Додайте матеріали. Словник, шаблон, приклади - окремими файлами, з посиланням на них у SKILL.md.
- Протестуйте двома способами. Спершу викличте напряму через
/ux-copy. Потім попросіть звичайними словами («напиши текст для порожнього кошика») і подивіться, чи Claude сам підхопить скіл. - Перенесіть у застосунок Claude, якщо треба. Запакуйте папку в ZIP і завантажте в розділі Customize > Skills. Для цього має бути увімкнене виконання коду; скіли доступні на планах Free, Pro, Max, Team і Enterprise.
- Дописуйте після кожної правки. Виправили результат руками - додайте одне правило в SKILL.md. За місяць скіл знає ваш процес краще за новачка в команді.
Лінуєтесь писати з нуля - опишіть процес Claude словами і попросіть зібрати SKILL.md. Він зробить чернетку за хвилину, вам лишиться прибрати зайве.
Чому скіл не спрацьовує?
- Розмитий description. «Допомагає з дизайном» не збігається ні з чим. Пишіть конкретні тригери: «коли просять текст для кнопки, помилки, порожнього стану».
- Задовге тіло. Якщо SKILL.md розрісся на сотні рядків, винесіть довідку в окремі файли. Тіло має читатись за хвилину.
- Один скіл на все. «Дизайн-асистент» з двадцятьма задачами гірший за п'ять маленьких скілів: Claude не розуміє, яку частину брати.
- Правила без прикладу. Один хороший і один поганий приклад працюють краще за абзац пояснень.
Де навчитися будувати свої Skills?
Скіли - це місце, де дизайнер найшвидше відчуває, що AI працює на нього, а не навпаки. Але справжня сила відкривається, коли скіли живуть у репозиторії поруч з кодом: тоді a11y-review перевіряє не скріншот, а реальний компонент, а token-naming - змінні, які вже їдуть у продакшн.
Саме так ми вчимо на курсі UX Hero «Design Engineer». В лекції про Claude Code ви налаштовуєте середовище, пишете CLAUDE.md як «мозок» проєкту, робите перші власні Skills і команду агентів, а далі збираєте набір скілів дизайнера, що кодить: TypeScript, Tailwind-конвенції, accessibility, синхронізація неймінгу з Figma. Наш кут простий: генерувати картинки сьогодні вміє кожен, а доводити дизайн до коду, який не розвалюється, - ні. Як я сам користуюсь скілами в живих проєктах, показую на YouTube-каналі UX Hero. Якщо ви ще не пробували сам Claude Code, почніть з матеріалу Claude Code для дизайнерів.
Часті питання
Що таке Claude Skills простими словами?
Claude Skill (Agent Skill) - це папка з файлом SKILL.md і допоміжними матеріалами, де описано, як виконати одну конкретну задачу. Claude постійно бачить лише назву й короткий опис скіла, а повну інструкцію підвантажує тільки тоді, коли ваш запит їй відповідає або коли ви викликаєте скіл командою /назва. Для дизайнера це спосіб один раз описати повторюваний процес і більше не пояснювати його в кожному промпті.
Чим Claude Skills відрізняються від CLAUDE.md і MCP?
CLAUDE.md - це постійні правила проєкту, які Claude читає на старті кожної сесії. Skill - це процедура для однієї задачі, яка завантажується лише коли потрібна, тому скілів може бути десятки без перевантаження контексту. MCP - це підключення до зовнішніх інструментів на кшталт Figma, GitHub чи Notion: воно дає доступ до даних, але не пояснює, як з ними працювати. Коротко: CLAUDE.md - що завжди правда, Skill - як робити задачу, MCP - до чого є доступ.
Чи треба вміти програмувати, щоб створити Skill?
Ні. SKILL.md - це звичайний markdown-файл з коротким заголовком (name і description) і текстовою інструкцією. Скрипти в папці скіла опціональні. Перший скіл для UI-текстів чи перевірки неймінгу токенів дизайнер пише за 20-30 хвилин, а найпростіше - попросити самого Claude зібрати SKILL.md з опису вашого процесу.
Де працюють Claude Skills?
У Claude Code скіли лежать у папках ~/.claude/skills/ (для всіх ваших проєктів) або .claude/skills/ у репозиторії (для конкретного проєкту) і викликаються через /назва. У застосунках Claude скіл завантажується ZIP-архівом у розділі Customize > Skills, для цього має бути увімкнене виконання коду; скіли доступні на планах Free, Pro, Max, Team і Enterprise. З грудня 2025 року формат Agent Skills відкритий, тому той самий SKILL.md підтримують і інші інструменти.
Які Claude Skills дизайнеру зробити першими?
Почніть з шести: ux-copy для UI-текстів у голосі бренду, token-naming для перевірки назв design tokens, component-spec для специфікацій компонентів, a11y-review для перевірки доступності за WCAG 2.2 AA, handoff-notes для передачі макета в розробку і pre-send-check для фінальної перевірки роботи перед відправкою. Будувати власні скіли під свій процес вчать на курсі UX Hero «Design Engineer» від Dmytro Nikolaienko.
Skill - це найдешевший спосіб зробити Claude вашим асистентом, а не асистентом «взагалі». Візьміть одну задачу, яку пояснювали цього тижня тричі, запишіть її в SKILL.md за пів години - і з наступного разу вона робиться однією командою.