Как я пыталась разобраться в Claude Code, а в итоге сделала плагин для Figma

Последние полгода я пытаюсь понять, как теперь вообще жить и работать дизайнеру. AI‑инструменты появляются быстрее, чем успеваешь разобраться в предыдущих. Кто‑то уже генерирует приложения голосом, кто‑то собирает продукты в Cursor, кто‑то показывает, как за вечер сделать стартап с помощью Claude Code. А я в какой‑то момент поняла, что знаю про всё это примерно следующее: «Ну… я пользовалась Figma AI» и решила, что пора расширять кругозор. Так я открыла Claude Code, а через месяц отправила на публикацию в Figma Community свой плагин.

Он берёт standalone‑export из Claude Design, сам находит внутри экраны и переносит их в Figma как редактируемые слои. С настоящим auto‑layout, с текстом, с загруженными шрифтами, с векторами, заливками, градиентами и тенями. И, что для меня было особенно важно, с реальными данными проекта, а не с какими‑нибудь условными John Doe и Lorem ipsum.

Я просто хотела разобраться в том, что умеет Claude.Расскажу как это вообще произошло

До этого я работала в продуктовых командах и довольно долго жила обычной жизнью продуктового дизайнера: задачи, интерфейсы, макеты, дизайн‑системы, разработчики, правки, ещё правки. Потом я оказалась в ситуации, когда начала снова искать своё место в профессии и вместе с этим пытаться понять, что вообще происходит вокруг. Все говорят про AI. Все что‑то с ним делают. Как раз в это время в моём поле зрения оказался Claude Design.

Сначала у меня с ним вообще не сложилось. Я привыкла к Figma и примерно понимала, как взаимодействовать с Figma AI. Там всё достаточно близко дизайнеру: попросил собрать интерфейс, посмотрел, поправил, ещё раз попросил. Claude же поначалу жил своей жизнью. Я пишу ему одно, он понимает по‑другому. Делаю правку, он вносит ещё три. В какой‑то момент я почти бросила эту затею, но потом начала замечать одну вещь.

Claude Design, на мой взгляд, гораздо интереснее работает не там, где нужно быстро накидать красивый лендинг, а там, где нужно собрать что‑то большое и системное. Админку, CRM, личный кабинет, интерфейс с большим количеством состояний, таблиц, данных и повторяющихся паттернов. И вот тут у меня появилась другая проблема.

Хорошо. Claude собрал интерфейс. А дальше что?

Допустим, я собрала в Claude Design какой‑то проект. Там есть несколько экранов, разные состояния, навигация, реальные данные. Всё работает. Но теперь я хочу открыть это в Figma и иметь возможность нормально редактировать. И тут оказалось, что всё не так просто.
Да, можно подключить Figma через MCP. Я видела, как люди через Claude Code и подобные подключения собирают макеты прямо в Figma. Но лично мне этот сценарий показался довольно странным:

• Во‑первых, это всё равно немного работа вслепую.

• Во‑вторых, если у тебя большой проект, количество запросов начинает быстро превращаться в отдельную проблему.

• В‑третьих, правки всё равно будут.

То есть я не очень понимала, зачем заставлять Claude снова и снова что‑то пересобирать в Figma, если результат уже существует в виде работающего проекта. Я хотела другое:
Собрать проект в Claude Design → взять готовый результат → открыть его в Figma → получить нормальные редактируемые макеты.

Начала искать инструмент для переноса, но нормального варианта не нашла. Были плагины и сервисы, которые конвертируют HTML в Figma. Однако в моём случае они либо работали криво, либо требовали отдельную ссылку на каждую страницу. А мне хотелось взять один файл и вытащить из него весь проект.

Первая версия была весьма странной...

Сначала мы с Claude сделали что‑то вроде компилятора, который работал через браузер.
Он пытался переносить видимый HTML из проекта через MCP‑подключение. Технически оно даже работало, практически — не очень. Все эти запросы к MCP продолжали жрать ресурсы.
Уже на первых экранах процесс мог отвалиться, и приходилось ждать, пока обновится запас токенов, чтобы продолжить. У меня была довольно простая мысль: если проект уже сгенерирован, почему я вообще должна продолжать тратить токены на то, чтобы просто перенести его в Figma? Это означало, что надо менять подход.

В какой‑то момент я решила просто залезть внутрь файла. У Claude Design есть возможность сохранить проект как standalone‑файл. То есть ты получаешь один HTML‑файл, открываешь его, и внутри уже живёт весь проект. Можно переходить между страницами, смотреть разные состояния и так далее. Обычный HTML‑to‑Figma конвертер видит только то, что ему положено видеть, а внутри standalone‑бандла есть вся необходимая информация, из которой можно восстановить экраны и их состояния.

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

Но нужно было научить его:

• Находить внутри бандла отдельные экраны.

• Понимать, где заканчивается один и начинается другой.

• Вытаскивать реальные данные.

• Восстанавливать структуру интерфейса.

• А потом уже создавать всё это в виде нативных объектов в Figma.

И вот здесь начался мой любимый этап, когда ты думаешь, что почти всё готово...

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

Дизайн плагина на тот момент меня вообще не волновал

Поначалу он выглядел вот так:

Я не пыталась сделать красивый продукт, а хотела ответить на один вопрос: оно вообще может работать? Если файл разобрался, нашлось десять экранов, реальные данные определились и ничего не умерло — это уже был отличный день!
Позже, когда основная механика начала становиться более стабильной, я наконец вернулась к тому, чем дизайнеры обычно хотят заниматься с самого начала — к дизайну.

Появился более понятный сценарий: выбрать ширину макета, загрузить standalone‑бандл (плагин сам находит внутри экраны, но при необходимости можно выбрать или исключить конкретные), и запустить импорт.

Примерно в середине пути интерфейс уже выглядел вот так:

А потом, наконец, случился тот самый момент. Теперь оно не только работает, этим ещё и можно пользоваться!

Что в итоге получилось

В финальной версии плагин работает так: вы экспортируете проект из Claude Design как standalone‑HTML и загружаете этот файл в плагин. Он сам разбирает бандл и ищет внутри отдельные экраны, а затем собирает их в Figma.

На выходе получается редактируемая структура с auto‑layout там, где он был восстановлен, с текстом, со шрифтами, с векторами, заливками, градиентами и тенями, и с данными конкретного проекта.

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

Наверное, главный вывод здесь вообще не про AI

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

Главное произошло раньше:

• Я увидела проблему

• Попробовала существующие способы

• Поняла, почему они мне не подходят

• Нашла ограничения

• Поменяла подход

• Собрала рабочую гипотезу

• Методично ломала её новыми проектами

• Исправляла несоответствия

• Проверяла, что новые исправления не сломали старые сценарии

• И только потом начала делать красиво

Если убрать из этой истории Claude, по сути останется довольно знакомый процесс: исследовать проблему → придумать решение → сделать прототип → протестировать → найти слабые места → доработать → упаковать в продукт.

Просто раньше результатом моей работы чаще был интерфейс. А в этот раз результатом стал инструмент, который помогает создавать интерфейсы.

Я всё ещё дизайнер. Я не собираюсь внезапно называть себя «senior software engineer» после одного месяца общения с Claude Code. Но теперь я гораздо спокойнее смотрю на нетривиальные задачи. Потому что иногда между «я не умею это делать» и «я могу придумать, как это сделать» оказывается не пять лет обучения новой профессии, а немного любопытства, очень много попыток и готовность несколько раз подряд увидеть сообщение об ошибке. Возможно, именно так и появляются нужные нам инструменты.

Что дальше?

Плагин бесплатный, называется Claude Design → Figma Import и он уже опубликован в Figma Community:
https://www.figma.com/community/plugin/1674342585857591088/claude‑design‑figma‑import

Технически, я не могу обещать, что в мире существует standalone‑файл, который на сто процентов обработается идеально. Я не волшебник и пока не знаю, какие ещё сценарии могут встретиться у других людей.

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