Figma Skills — это инструкции на основе markdown, которые определяют поведение ИИ-агента дизайна в вашем конкретном контексте. Думайте о них как о переиспользуемых пользовательских промптах — вы пишете их один раз, и они кодируют соглашения вашей команды, правила компонентов и стандарты качества, чтобы агент следовал им автоматически каждый раз.
Любой может написать навык. Не требуется код. Не нужна разработка плагинов. Не нужна интеграция API. Только markdown-текст, который описывает, что должен делать агент и как он должен это делать. Навыки — это разница между агентом, который генерирует общий UI, и агентом, который генерирует UI ВАШЕЙ команды.
Ключевой вывод
Навыки превращают агента дизайна из обычного ИИ в ИИ ВАШЕЙ команды. Без навыков агент использует стандартные соглашения и угадывает ваши предпочтения. С навыками он автоматически следует вашей системе отступов, правилам именования компонентов, требованиям доступности и брендовым руководящим принципам. 30 минут написания 3-4 навыков экономят часы исправлений за недели использования агента.
Что составляет Figma Skill?
| Элемент навыка | Что делает | Пример |
|---|---|---|
| Имя (с /) | Как вы его вызываете | /create-settings-page |
| Назначение | Что делает навык (одно предложение) | "Генерирует страницу настроек согласно соглашениям нашей команды" |
| Шаги | Упорядоченные инструкции, которым следует агент | "1. Используй Section Header для каждой группы..." |
| Соглашения | Правила, которым должен следовать агент | "Всегда используй сетку 8px, никогда не используй абсолютное позиционирование" |
| Компоненты | Какие опубликованные компоненты использовать | "Используй Toggle/Switch для булевых настроек" |
| Переменные | Какие дизайн-токены применять | "Используй color-surface-primary для фонов" |
| Запреты | Чего агент должен избегать | "Никогда не используй больше 3 уровней заголовков на страницу" |
Figma запустили с 9 примерами навыков, охватывающими: создание библиотек компонентов, генерацию новых дизайнов из брифов, создание спецификаций доступности, координацию мульти-агентных рабочих процессов и синхронизацию дизайн-токенов с кодом. Изучите их на figma.com/community/skills. Основополагающий навык /use-figma дает агенту общее понимание того, как работает Figma структурно. Команды настраивают его дальше.
Написание вашего первого навыка (с примером)
Начните с вашей самой частой дизайнерской задачи. Если вы создаете макеты форм еженедельно, напишите навык /form-layout. Вот полный, реальный пример:
Этот навык точно говорит агенту, как ваша команда создает формы. Без него агент использует стандартные соглашения Figma. С ним каждая форма, которую генерирует агент, следует вашим конкретным стандартам — последовательно между членами команды, последовательно между проектами.
📬 Получаете пользу от этого?
Один практический инсайт об ИИ в неделю. Плюс бесплатный набор промптов при подписке.
Подписаться бесплатно →Как навыки сравниваются с другими пользовательскими инструкциями ИИ
Навыки концептуально похожи на системы пользовательских инструкций в других инструментах ИИ:
| Инструмент | Пользовательские инструкции | Создаются | Общие? |
|---|---|---|---|
| Figma Skills | Markdown файлы, которые направляют агента дизайна | Вручную командой | Да (библиотека сообщества) |
| ChatGPT пользовательские инструкции | Текст, который формирует все ответы ChatGPT | Вручную пользователем | Нет (только личные) |
| Claude Code CLAUDE.md | Инструкции уровня проекта для агента кодирования | Вручную командой | Да (через репозиторий) |
| Hermes Agent навыки | Автоматически генерируемые переиспользуемые паттерны задач | Автоматически из использования | Да (библиотека навыков) |
Ключевое различие: Hermes Agent создает навыки автоматически из завершенных задач — учится по мере работы. Figma требует ручного создания навыков — вы обучаете его явно. Подход Hermes масштабируется с использованием; подход Figma дает вам больше контроля, но требует предварительных инвестиций. Обе системы производят лучший вывод ИИ, чем использование инструментов без пользовательских инструкций.
Базовый принцип одинаков во всех этих системах: ИИ работает лучше с явным контекстом о ваших предпочтениях, соглашениях и стандартах. Пишете ли вы Figma Skill, пользовательские инструкции ChatGPT или файл Claude CLAUDE.md, фреймворк ICCSSE производит лучшие инструкции. Бесплатный оптимизатор промптов применяет эту структуру автоматически — вставьте черновик вашего навыка, получите более четкую версию обратно.
4 основных навыка, которые нужны каждой дизайнерской команде
1. /form-layout — Стандартизирует дизайн форм в команде. (Пример выше.)
2. /page-layout — Определяет ваши соглашения структуры страницы: размещение заголовка, ширина боковой панели, максимальная ширина контента, структура подвала, паттерны навигации, адаптивные точки перехода.
3. /component-variant — Сообщает агенту, как создавать новые варианты компонентов, соответствующие вашей существующей системе: соглашения именования, определения состояний (по умолчанию, hover, активный, отключенный, ошибка), шкала размеров (sm, md, lg) и требования к документации.
4. /accessibility-check — Определяет ваши стандарты доступности: уровень WCAG (AA против AAA), минимальные размеры областей касания, коэффициенты контрастности, правила иерархии заголовков, обязательные метки ARIA и формат аннотаций для программ чтения с экрана. См. наше руководство по спецификациям доступности для деталей.
📬 Хотите больше подобного?
Один практический инсайт об ИИ в неделю. Плюс бесплатный набор промптов при подписке.
Подписаться бесплатно →Часто задаваемые вопросы
Сколько навыков я должен создать?
Начните с 3-4, покрывающих ваши самые распространенные дизайнерские задачи: навык форм, навык макета страницы, навык вариантов компонентов и навык проверки доступности. Они покрывают 80% ежедневной дизайнерской работы. Добавляйте больше навыков по мере выявления повторяющихся паттернов, с которыми агент справляется непоследовательно.
Могут ли навыки вызывать другие навыки?
Да — навыки могут ссылаться на другие навыки, создавая цепочки рабочих процессов. Навык /new-feature может вызвать /form-layout для секций ввода, затем /accessibility-check для проверки соответствия. Это позволяет сложные многоэтапные рабочие процессы из одного вызова.
Потребляют ли навыки кредиты?
Сам навык (инструкции markdown) не потребляет кредиты. Действия агента, которые запускает навык (генерация дизайнов, редактирование компонентов), потребляют кредиты по обычной ставке. Хорошо написанный навык может фактически сэкономить кредиты, производя лучший вывод с первой попытки — меньше итераций означает меньше потребляющих кредиты регенераций.
Могу ли я поделиться навыками с сообществом Figma?
Да — библиотека навыков сообщества Figma позволяет публиковать и просматривать навыки. Это означает, что вы можете использовать навыки, написанные другими дизайнерскими командами для общих паттернов (макеты дашбордов, потоки онбординга, страницы настроек), не написав их с нуля.
Где хранятся навыки?
Навыки связаны с вашей организацией Figma или личным аккаунтом. Навыки уровня команды доступны всем членам команды; личные навыки доступны только вам. Храните ваши самые важные навыки на уровне команды, чтобы все дизайнеры получали пользу от одинаковых соглашений.
Раскрытие информации: Некоторые ссылки в этой статье являются партнерскими ссылками. Мы рекомендуем только инструменты, которые мы лично тестировали и регулярно используем. См. нашу полную политику раскрытия информации.