13 августа 2026 года Figma открыла генератор скиллов для всех пользователей. Теперь прямо внутри Figma Agent можно попросить агента написать скилл, взять за основу любой дизайн-фрейм, запустить в превью и поправить. Без кода, без выхода в терминал.
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
Об авторе →Claude Code: новый CLI-агент от Anthropic
Anthropic выпустила Claude Code — терминальный AI-агент для разработчиков. Инструмент работает прямо в командной строке и умеет писать, редактировать и запускать код.
Zcode AI: Полный гид по визуальному интерфейсу для Claude Code и AI-агентов
Узнайте, как использовать Zcode для управления Claude Code, Gemini и Codex в едином GUI. Настройка провайдеров, MCP-серверов и визуальный вайбкодинг.
YouTube-канал с монетизацией из любой точки мира: Пошаговый гайд 2026
Инструкция по созданию YouTube-канала: обход блокировок SMS, настройка расширенных функций через виртуальные номера и правила безопасности для монетизации.
Windsurf Code Maps: Как глубоко понимать архитектуру проекта перед написанием кода
Полный гайд по Windsurf Code Maps, модели Sway 1.5 и Sway Grep. Узнайте, как визуализировать архитектуру кода и ускорить разработку в 13 раз.
Vk Fast Cash Strategy
Аудитория ВКонтакте — это те же люди, что и в Instagram, но 'социальный контракт' площадки другой. Если Instagram — это 'дорогой ресторан' с демонстрацией успеха, то VK — это 'душевная шашлычная'. Здесь не работает глянцевый 'успешный успех
13 августа 2026 года Figma открыла генератор скиллов для всех пользователей. Теперь прямо внутри Figma Agent можно попросить агента написать скилл, взять за основу любой дизайн-фрейм, запустить в превью и поправить. Без кода, без выхода в терминал.
Но сами скиллы появились раньше. Figma запустила Design Agent 20 мая 2026 года. 24 июня добавили кастомные инструменты и контекст. И к августу в Figma Community уже лежат десятки готовых скиллов — от аудита интерфейса до генерации дизайн-системы из нуля.
Если ты дизайнер — это меняет рутину. Если вайбкодер — это новый слой между идеей и готовым макетом, который стало проще пройти.
TL;DR: скилл в Figma — это Markdown-файл с инструкцией для агента, который вызывается командой /название прямо в чате. Работает в Figma Agent, Claude Code, Cursor и любом MCP-агенте. В Community уже есть 10 скиллов которые закрывают ревью, мобайл-адаптацию, спейсинг, анимации, UX-тексты и целую дизайн-систему. Разбираем каждый.
Figma Agent — это не волшебная кнопка «сделай красиво». Это агент внутри Figma, которому ты ставишь конкретную задачу и он её выполняет прямо на холсте.
Раньше дизайн-процесс выглядел так: открываешь Figma, руками собираешь компоненты, вручную проверяешь спейсинг, сам пишешь документацию для разработчика, сам конвертируешь десктопный макет в мобайл. Это часы работы на каждый экран.
Figma Agent берёт часть этой рутины на себя. Ты пишешь в чат «сделай мобильную версию этого фрейма» — и агент перебирает сетку, меняет навигацию, подгоняет тач-таргеты, конвертирует таблицы в аккордеоны. Не идеально — но 80% работы за несколько секунд.
Скилл — это способ научить агента делать это по твоим правилам. Не по каким-то общим, а именно так как принято в твоей команде, с твоими токенами, твоим голосом бренда, твоими критериями.
Технически скилл — это Markdown-файл (SKILL.md) с пошаговой инструкцией. Тот же стандарт что у Claude Code и Cursor. Вызывается командой /название в чате агента. Публикуется в Figma Community или в команду.
Скачать чужой скилл и запустить его — буквально два действия.
/название-скилла — готовоИли создай свой: открой Figma Agent, опиши задачу которую хочешь автоматизировать, попроси агента написать скилл. Можно взять за основу любой фрейм из файла. Дальше — превью, правки в Markdown-редакторе, публикация в команду или Community.
Скиллы работают не только в Figma. Тот же файл SKILL.md читает Claude Code, Cursor и любой другой MCP-совместимый агент — то есть один раз написал, используешь везде.
Не все 10 одинаково полезны. Ниже — честный разбор с пояснением для кого и зачем каждый.
Один скилл вместо шести проверок: доступность, вёрстка, тексты, типографика, цвет, UI-паттерны.
Это аудит по шести направлениям сразу. Agент проходит по каждому элементу и выдаёт находки с уровнем критичности — HIGH, MEDIUM, LOW — и конкретным объяснением что не так и почему.
Два режима работы:
quick — только главный пользовательский путь, только HIGH и MEDIUM, максимум 5 находокfull — весь скоуп включая пустые состояния, загрузку, ошибки, узкие экраны, до 15 находокКаждая находка выглядит как: severity, домен, локация file:line, что сейчас, что должно быть, почему. В конце вердикт: Block / Needs changes / Approve.
Это не «посмотри как выглядит». Это структурированная проверка с конкретным выходом который можно передать в задачу разработчику.
Где взять: github.com/fradser/dotclaude
Если хочешь честного ревью без дипломатии — это он.
Проверяет визуальную иерархию, типографику, отступы, цвет и контраст, анимации, состояния компонентов, адаптивность, доступность и консистентность бренда. Находки ранжируются от blocking до polish — и у каждой есть конкретный фикс, не просто «исправьте».
Что делает сам: применяет безопасные правки (контраст, отступы, фокус-стейты, reduced-motion, alt-текст). Субъективные вещи оставляет как рекомендации — не лезет туда где нужно решение дизайнера.
Проверяет состояния компонентов: hover, focus-visible, active, disabled. И тач-таргеты: минимум 44×44px по iOS, 48dp по Android.
Где взять: figma.com/community/skill/65434
Превращает любой компонент в готовую спеку за минуту.
На выходе получается Markdown-документ: название, версия, владелец, описание, live-превью, сетка вариантов, do's и don'ts, разбор состояний, полная анатомия с токенами.
Актуально перед передачей разработчику. Вместо того чтобы дизайнер руками писал документацию или разработчик сам догадывался что имелось в виду — агент собирает спеку автоматически.
Берёт десктопный фрейм и делает из него мобильный по чёткому набору правил.
База — 390px, iPhone 14/15. Агент делает следующее:
Что не делает: не выдумывает контент, не меняет стиль, использует только мобильные варианты из подключённой библиотеки.
Где взять: figma.com/community/skill/72495
Генерирует нумерованные маркеры по каждому элементу и таблицу атрибутов.
Знаешь как в дизайн-системах делают схему компонента с подписями — это вот такое, это вот то? create-anatomy делает это автоматически.
Розовые точки + линии по каждому элементу. Таблица с четырьмя колонками: номер, тип (instance/text), имя, семантические заметки. Скрытые элементы показываются и помечаются (hidden). Повторяющиеся группируются: Star (x5) вместо пяти отдельных строк.
Источник методологии: docs.uspec.design/specs/anatomy
Ищет места которые не анимируются, но должны. И наоборот.
Главная особенность — сдержанность. Скилл построен на принципе Emil Kowalski «You Don't Need Animations» и работает через Gate из четырёх вопросов для каждого кандидата:
Выдаёт таблицу с точными значениями: кривая, длительность, transform/opacity. И отдельно — список отвергнутых кандидатов с причиной отказа.
Ничего не реализует сам — только анализирует.
Где взять: figma.com/community/skill/68151
Аудит макета по сетке 4/8pt и автоматический фикс всего что не попало в шаг.
Проверяет padding фреймов, gap между элементами, отступы секций. Всё off-grid — флажит. Снэпает к ближайшему шагу: 0, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 80, 96.
Сначала выдаёт сводку до и после: Card padding: 14 → 16. Потом применяет фиксы. Не трогает дизайн-токены, hairlines, оптические отступы и намеренные исключения.
Где взять: figma.com/community/skill/70410
Агент как UX-райтер внутри Figma: проверяет, переписывает, создаёт, нормализует.
Четыре режима:
Жёсткие ограничения: не выдумывает фичи, цены, политики и юридические тексты. Сохраняет голос бренда и ограничения по длине.
Выход — таблица: приоритет, локация, текущий текст, предлагаемый, объяснение.
Где взять: figma.com/community/skill/64048
Проходит по всей странице, каталогизирует компоненты, находит мусор и чинит.
Флажит три вещи: orphans (осиротевшие компоненты без использования), дубликаты и ошибки нейминга. После показывает список — и автоматически фиксит то что можно.
Идеален перед передачей в разработку или рефактором дизайн-системы. Особенно когда в файле накопился год работы нескольких дизайнеров и там царит хаос.
Берёт выделенные элементы с реальными шрифтами, цветами и радиусами — и строит из них систему компонентов.
Работает в два шага:
Плюс двухуровневая система токенов (primitives → semantic), проверка WCAG AA (контраст ≥ 4:1), light и dark mode из коробки.
Где взять: figma.com/community/skill/65614
| Скилл | Для кого | Что автоматизирует | Применяет правки |
|---|---|---|---|
| better-interface | Дизайнер, PM | Аудит по 6 осям | Нет, только отчёт |
| superfuture-design-review | Дизайнер | Ревью по 9 осям | Да, безопасные правки |
| component-handoff | Дизайнер, разработчик | Документация компонента | Нет, только документ |
| desktop-to-mobile | Дизайнер, вайбкодер | Конвертация в 390px мобайл | Да |
| create-anatomy | Дизайнер | Визуальная анатомия | Да, маркеры на холст |
| find-animation-opportunities | Дизайнер, motion | Поиск мест для анимации | Нет, только анализ |
| spacing-audit | Дизайнер | Аудит и фикс сетки 4/8pt | Да, после подтверждения |
| balise-ux-writing | Дизайнер, копирайтер | UX-тексты | Да, в 4 режимах |
| analyze-components | Дизайнер | Уборка компонентов | Да |
| design-system-gen | Дизайнер, вайбкодер | Генерация дизайн-системы | Да |
Скилл — это Markdown. Если ты объяснил задачу в промпте — ты уже почти написал скилл.
Минимальная структура:
---
name: мой-скилл
description: Краткое описание когда использовать этот скилл (агент читает это чтобы понять когда его звать)
---
## Что делает скилл
[Описание задачи]
## Шаги
1. Сначала это
2. Потом то
3. Проверь вот это
## Чего не делать
- Не трогать X
- Не выдумывать YГотово. Клади в .claude/skills/мой-скилл/SKILL.md — и скилл будет работать в Claude Code, Cursor и Figma Agent.
Хочешь сразу из Figma: открой агент, напиши «создай скилл для [задача]», агент напишет файл сам. Превьюишь — итерируешь — публикуешь.
На Config 2026 Figma дала ответ на вопрос который висел в воздухе: что делать когда Claude Design собирает кликабельный интерфейс из промпта за минуту и ставит под сомнение само существование дизайн-файла?
Ответ: собрать всю AI-генерацию внутри холста. Code Layers — пишешь настоящий код прямо в Figma-файле. Figma Make — от промпта до кликабельного прототипа без выхода в IDE. MCP-сервер — Figma подключается к твоему агенту как источник данных о компонентах и токенах.
Скиллы в этой картине — уровень кастомизации. Не просто «что умеет Figma», а «что умеет Figma под мои конкретные задачи». Это важно особенно для команд: один раз написал скилл под голос бренда — и каждый дизайнер в команде работает с одинаковым набором правил, не держа их в голове.
Максим: «Я уверен: языки программирования вообще не нужно изучать. Нужно погружаться в архитектуру: фронт, бэк, база данных. Со скиллами в Figma то же самое — не надо знать как работает агент под капотом, надо понять какую задачу он решает в твоём процессе.»
Figma Agent — это платно?
Figma перешла на pay-as-you-go для тяжёлых AI-операций. Базовый план Professional — $15 за пользователя в месяц. Генерация компонентов и интенсивная работа с агентом расходует AI credits — за серьёзную автоматизацию придётся доплачивать. Сами скиллы из Community — бесплатны.
Чем Figma Agent отличается от Figma Make?
Figma Make — это генерация интерфейса из промпта с нуля, как Lovable или Bolt но прямо в Figma. Figma Agent — это работа с существующим файлом: ревью, правки, документация, аудит. Две разные задачи, один инструмент.
Скиллы работают только в Figma?
Нет. Тот же формат SKILL.md читают Claude Code, Cursor, Codex и любой MCP-совместимый агент. Написал один раз — работает везде где поддерживается Agent Skills стандарт.
Как вайбкодеру использовать Figma скиллы?
Самые полезные для вайбкодинга — desktop-to-mobile (конвертация макета без ручной работы) и design-system-gen (сгенерировать компоненты из брендовых вводных). Плюс component-handoff даёт готовую спеку для передачи в Cursor или Claude Code.
Можно ли публиковать скиллы коммерчески?
Сейчас скиллы в Figma Community публикуются бесплатно. Монетизация кастомных скиллов — пока не объявлена.
Как Figma Agent понимает когда звать скилл?
Читает поле description в SKILL.md. Это короткая строка: «когда использовать этот скилл». Чем конкретнее описание — тем точнее агент понимает в какой момент его подтянуть.
Figma Agent — встроенный AI-агент в Figma, который работает с содержимым файла по текстовым командам. Запущен 20 мая 2026.
Skill / скилл — Markdown-файл (SKILL.md) с инструкцией для агента. Вызывается командой /название в чате. Тот же стандарт что у Claude Code и Cursor.
Figma Make — инструмент генерации кликабельного интерфейса из промпта прямо внутри Figma.
Code Layers — возможность писать настоящий код внутри Figma-файла, анонсировано на Config 2026.
MCP (Model Context Protocol) — протокол подключения внешних инструментов к AI-агентам. Figma MCP-сервер позволяет агентам в Cursor или Claude Code читать компоненты и токены из Figma-файла.
WCAG AA — стандарт доступности: минимальный контраст текста к фону — 4:1. Используется в скиллах для автоматической проверки.
Tach-target — область на экране по которой пользователь может нажать пальцем. Минимальный размер: 44×44px по iOS, 48dp по Android.
Handoff — передача дизайн-файла разработчику с описанием всех компонентов, состояний и токенов.
Orphan component — компонент в файле который нигде не используется. Мусор, который засоряет библиотеку.
Все AI-инструменты для дизайна и вайбкодинга в каталоге: vibecoderz.ru/ide
Вопросы по настройке Figma Agent под свой процесс: t.me/maxnagovitsyn
Источники: figma.com/blog · figma.com/community/ai-skills · habr.com · Данные Figma, август 2026