Я выложил в открытый доступ набор скиллов для работы с Figma и текстами. С ними можно поручить агенту разобрать дизайн-систему, спланировать сценарий, собрать экран, внести правки, восстановить привязки переменных, сделать презентацию или переписать текст так, чтобы он не звучал как сгенерированный. Ты описываешь задачу в чате, а агент работает прямо в Figma, учитывая компоненты, переменные и решения, которые уже есть в твоём продукте. Коротко о наборе и установка в две команды — на skills.chudarin.com.
О том, как я работаю с агентами и превращаю ошибки в правила, уже рассказал в статье «Принять без правок (рекомендовано)». Здесь хочу показать, как пользоваться этим набором и какие задачи можно попробовать на своём проекте.
Один набор, отдельные скиллы
Ты устанавливаешь сразу весь набор, в котором собраны отдельные скиллы. Каждый отвечает за свою часть работы: планирование сценариев, аудит дизайн-системы, создание и редактирование экранов, работу с Figma API, восстановление привязок переменных, презентации или тексты.
При этом тебе не нужно запоминать команды и запускать каждый скилл отдельно. Достаточно описать задачу обычными словами, а агент сам подберёт нужные инструкции. Иногда для одной задачи ему понадобятся сразу несколько скиллов: например, при сборке экрана он будет учитывать и правила дизайна, и особенности работы с API.
Разобраться в дизайн-системе
Допустим, ты подключился к проекту или вернулся к файлу, который давно не открывал. Компоненты и переменные вроде бы есть, но непонятно, что из этого используется, где появились дубли и каких состояний не хватает.
Можно дать агенту ссылку на страницу и попросить:
Разбери дизайн-систему на этой странице. Посмотри, какие компоненты и переменные есть, где дубли и чего не хватает. Пока ничего не меняй.
Со скиллом аудита агент исследует файл и покажет на конкретных примерах, где одинаковые элементы используют разные токены, у каких компонентов отсутствуют состояния и какие повторяющиеся решения пока существуют только отдельными кусками на экранах.
По умолчанию он ничего не меняет в файле, поэтому можно спокойно изучить отчёт и уже после этого решить, что исправлять и нужна ли отдельная документация.
Спланировать сценарий и собрать его в Figma
Агенту можно поручить целый пользовательский сценарий: продумать последовательность шагов, определить нужные экраны и состояния, а затем собрать всё в Figma. При этом необязательно сразу переходить к дизайну. Можно сначала разобраться с логикой и договориться, что именно нужно сделать.
Спланируй восстановление пароля для веб-приложения. Пользователь начинает с экрана входа. Опиши экраны, переходы и состояния, включая ошибки и загрузку. Пока ничего не рисуй, сначала обсудим план.
Со скиллом планирования агент составит карту сценария и предложит структуру файла. Ты сможешь посмотреть на весь путь пользователя, обсудить пропущенные ветки, убрать лишние шаги и согласовать состояния до того, как начнётся работа над экранами.
Когда план устроит, достаточно попросить агента собрать согласованный сценарий в Figma. Для этого он подключит скиллы создания экранов и работы с API. А если отдельное обсуждение не требуется, планирование и сборку можно поручить одним запросом.
Создать новый экран или поправить готовый
С помощью набора можно собирать новые экраны по описанию задачи. Ты объясняешь, что нужно пользователю и что должно быть на экране, а агент разбирается в контексте проекта и создаёт дизайн прямо в Figma.
Например, можно дать ему ссылку на файл и попросить:
Собери экран настроек профиля, где пользователь сможет изменить имя, фотографию и почту. Используй нашу дизайн-систему и учитывай, как устроены остальные экраны продукта. Если каких-то компонентов или состояний не хватает, покажи, что нужно добавить.
Скилл создания и редактирования экранов сначала помогает агенту определить, на что опираться. Если в проекте есть дизайн-система, он работает с ней, а если нет, ориентируется на готовые экраны продукта.
При сборке из существующей системы у него есть три варианта: использовать инстанс, обновить дизайн-систему или создать новый компонент. Просто нарисовать похожий фрейм и выдать его за компонент нельзя.
Тот же скилл подходит для работы с уже готовым дизайном. Можно попросить изменить конкретную деталь, сохранив всё остальное:
На этом экране поправь состояние выбранной вкладки. Сохрани текущую геометрию, тексты и остальные элементы.
Агент вносит правки по одному элементу и сверяется с согласованным дизайном, чтобы просьба поправить выделение не превратилась заодно в новые скругления, отступы и композицию.
Отдельный сценарий, который мне очень пригодился, это синхронизация продакшна с макетами. Дизайн-система у нас уже была, но работающий продукт давно разошёлся с тем, что лежало в Figma. Нужно было отснять продакшн и восстановить экраны на существующих компонентах.
Такую задачу можно поставить, передав агенту обе ссылки:
Вот ссылка на страницу продакшен-сайта и наш Figma-файл. Пересобери этот экран на указанной странице в Figma. Используй существующие компоненты и переменные. Если чего-то не хватает, покажи, что нужно добавить.
Таким способом я пересобрал больше пятидесяти экранов за один день. Руками, с учётом параллельных задач, у меня ушёл бы месяц. Все экраны я, конечно, отсмотрел, а когда находил ошибки, поручал агенту их исправить. Даже с учётом этих правок сэкономленное время для меня бесценно.
Восстановить привязки переменных
Бывает, что экран выглядит нормально, хотя отступы на нём заданы числами, цвета введены вручную, а часть переменных ссылается на удалённую коллекцию. Обнаруживается это уже при смене темы или обновлении библиотеки.
Проверь на этой странице привязки цветов, типографики, отступов и скруглений. Покажи, что отвалилось и что можно вернуть на переменные нашей библиотеки.
Со скиллом восстановления привязок агент сначала покажет, что можно связать с библиотекой, для каких значений нет совпадений и что останется без изменений. К исправлениям он перейдёт после твоего подтверждения, причём сначала можно попробовать на одном фрейме.
Если значение не совпадает ни с одним токеном, с ним нужно разобраться отдельно. Например, отступ в 10 пикселей при токенах 8 и 12 нельзя просто заменить ближайшим: сначала стоит понять, это ошибка или дизайнер намеренно выбрал такое расстояние.
Написать текст по-человечески
Подписи кнопок, пустые состояния, описание в README или статья. Агент пишет такие тексты легко, но их почти всегда видно: канцелярит, тройки ради ритма, длинные тире, одинаковые обороты.
Перепиши текст пустого состояния на этом экране простыми словами. Если я поправлю формулировку, предложи записать её в мой голос.
Со скиллом текстов агент пишет и правит тексты на русском и английском: убирает шаблонные обороты, называет вещи конкретно и говорит, кто что делает.
Со временем он учится твоему голосу. Когда ты поправляешь его формулировку, он предлагает записать правку в ~/.agents/voice.md и записывает только после твоего «да». Правка, которая нужна только в этом тексте, например «тут короче, места нет», в голос не попадает. Если файла ещё нет, агент один раз предложит прислать два-три твоих текста и выпишет из них, как ты пишешь.
У продукта голос может быть свой: обращение, термины, правила для кнопок и ошибок. Он лежит в .claude/voice.md в папке проекта, и для текста интерфейса он главнее личного.
Сделать презентацию
Презентацию, которую агент собрал сам, узнаёшь сразу: все слайды на одном шаблоне, главное подано с тем же весом, что и сноска, вместо цифр заглушки.
Сделай питч-дек по этому документу. Сначала покажи план и вопросы, слайды пока не делай.
Со скиллом презентаций агент сначала показывает план: что доказывает каждый слайд и какая раскладка ему подходит. Цифра попадает на слайд, только если у неё есть источник, а если источника нет, агент спрашивает. Стиль он берёт из твоего шаблона, бренда или прошлых презентаций. Если ничего нет, предлагает три направления на выбор. Перед тем как отдать презентацию, он проверяет её в том формате, в котором она уйдёт, например в PDF.
Готовую презентацию можно отдать на разбор без правок или на проверку перед отправкой. Тогда агент исправит только поломки, а остальное предложит списком.
Агенту не приходится заново разбираться с API
При изменениях в файле вместе с остальными инструкциями агент использует правила работы с Figma API.
Без знания особенностей API он начинает пробовать вызовы, получать ошибки и тратить токены на поиск рабочего способа. Даже простая задача из-за этого может стать долгой и нудной. В правилах уже собраны ограничения, рабочие подходы и способы проверки, поэтому агент получает опыт, который иначе пришлось бы заново набирать на твоём файле.
Например, после изменения нужно прочитать результат обратно, потому что успешный ответ инструмента ещё не означает, что переменная действительно привязалась или свойство применилось.
Перед тем как показать тебе экран, агент также должен проверить, всё ли он собрал по задаче, включая нужные состояния, применились ли переменные и стили и сохранились ли принятые решения продукта.
При этом объём проверки зависит от задачи: ради точечной правки не нужно пересматривать весь экран, а выбранное тобой направление не должно меняться только потому, что агенту больше нравится другое.
Как начать пользоваться
В Claude Code набор устанавливается одним плагином, который добавляет все скиллы, а для Codex есть отдельная инструкция в README на русском.
Для работы нужно подключить агента к Figma и дать ему доступ к нужному файлу. Ещё стоит проверить свой тип места: у Dev и Full существенно больше доступных обращений к инструментам, чем у View и Collab. Актуальные условия можно посмотреть в документации Figma.
Если Claude Code у тебя уже установлен, часть настройки можно поручить ему самому:
Установи набор скиллов chudarin-design-skills по инструкции в README. Проверь, что нужно для подключения к Figma, и помоги завершить настройку.
После установки нужно перезапустить агента и пройти вход в Figma. Дальше можно переходить к своей задаче:
- Запусти агента в отдельной папке своего проекта.
- В Figma скопируй ссылку на нужный фрейм или страницу через Copy link to selection.
- Отправь ссылку вместе с задачей, а если компоненты находятся в другом файле, добавь ссылку и на него.
В следующих сессиях возвращайся в ту же папку: скилл работы с экранами сохраняет туда контекст проекта и принятые решения.
Я бы начал с небольшой реальной задачи, например аудита страницы, восстановления привязок на одном экране или конкретной правки. Так проще посмотреть, как агент работает с твоими компонентами, и проверить результат.
Попробуй и пришли сессию
Набор можно забрать из репозитория chudarin-design-skills, он доступен под лицензией MIT. А мне нужна обратная связь: что у тебя получилось хорошо, где пришлось вмешаться и в какой момент результат разошёлся с ожиданиями.
Если что-то пошло не так, пришли сессию или фрагмент разговора, по которому можно восстановить ход работы. Будет полезно приложить (не обязательно):
- Исходный запрос и ожидаемый результат.
- Название агента и модели.
По сессии я смогу посмотреть, нашёл ли агент дизайн-систему, загрузил ли нужные инструкции и как вообще пришёл к такому решению. Самому выяснять причину перед отправкой не обязательно.
Чтобы подготовить обезличенный отчёт, можно попросить агента:
Подготовь краткий отчёт по этой сессии для публикации. Не включай API-ключи, токены, пароли, cookies, персональные данные, приватные ссылки и закрытые материалы проекта. Замени их метками
[REMOVED]. Сохрани относящиеся к проблеме запросы, ответы, названия инструментов и шаги, необходимые для понимания ошибки. Перед выводом проверь текст на секреты и персональные данные.
Перед отправкой просмотри готовый отчёт, а затем напиши мне в Telegram или создай issue.
Если ты тоже делаешь скиллы для Figma, присылай свои подходы и примеры. Мне интересно сравнить, с какими проблемами мы сталкиваемся и какие решения можно объединить. Так разбор одной неудачной сессии сможет помочь всем, кто позже придёт с похожей задачей.