Claude Code выходит за код
Когда появился Claude Code, его основным предназначением была разработка программного обеспечения. AI-агент мог анализировать проект, изменять файлы, исправлять ошибки, писать функции, запускать команды и помогать программисту непосредственно внутри рабочего окружения.
Но возможности подобных инструментов постепенно выходят далеко за пределы программирования.
Одно из самых интересных направлений — дизайн пользовательских интерфейсов.
Figma официально представила интеграцию Claude Code to Figma, позволяющую переносить работающие интерфейсы из Claude Code непосредственно на Figma canvas.
Причем речь идет не о создании обычного скриншота.
Интерфейс преобразуется в редактируемый Figma-объект. Страницы, состояния и пользовательские сценарии можно переносить на canvas, организовывать, дублировать и дорабатывать средствами Figma.
Это серьезно меняет привычную последовательность разработки сайта.
Раньше стандартный процесс выглядел примерно следующим образом:
идея → прототип → Figma → согласование → верстка → программирование → тестирование.
Теперь возможен другой вариант:
идея → Claude Code → рабочий интерфейс → Figma → визуальная доработка → Claude Code → готовый продукт.
И вот это уже гораздо интереснее обычной генерации макетов нейросетью.
Код превращается в макет
Главная особенность новой связки заключается в возможности переносить реально работающий интерфейс в Figma.
Claude Code может помочь разработчику создать страницу или приложение. Результат запускается в браузере — например, на localhost, staging-сервере или уже в production.
После этого интерфейс можно передать в Figma.
Figma описывает возможность как способ захватывать реальные работающие UI и преобразовывать их в редактируемые frames на canvas.
Это принципиально отличается от обычного скриншота.
Если разработчик сделал страницу и просто отправил дизайнеру PNG, дизайнер видит результат, но не получает нормальный рабочий макет.
Теперь полученный интерфейс можно продолжить редактировать непосредственно в Figma.
Можно сравнивать экраны, менять структуру, экспериментировать с расположением элементов и обсуждать варианты с другими участниками проекта.
В результате код становится одним из способов создания исходного дизайн-макета.
Именно поэтому фраза «Claude Code стал дизайнером» уже не выглядит сильным преувеличением.
Макет становится полностью редактируемым
Самая полезная возможность заключается именно в редактировании результата.
Представим, что я хочу создать новый лендинг.
Вместо того чтобы сначала вручную рисовать каждый блок в Figma, можно описать Claude Code структуру:
создай первый экран, добавь преимущества, карточки услуг, портфолио, отзывы, форму заявки и подвал.
Claude Code генерирует работающий интерфейс.
Его можно открыть в браузере и сразу оценить не как статичную картинку, а как настоящую страницу.
Работают размеры, адаптивность, кнопки, состояния и другие элементы, которые были реализованы на этапе прототипирования.
После этого результат переносится в Figma.
И уже там можно спокойно заниматься визуальной частью: сравнивать варианты, переставлять элементы, уточнять композицию, работать с типографикой и обсуждать макет с заказчиком или командой.
То есть AI позволяет начинать не с пустого Figma-фрейма, а с уже работающего интерфейса.
Можно переносить целые сценарии
Еще одна интересная возможность — работа не только с отдельными страницами.
Figma сообщает, что за одну сессию можно захватывать несколько экранов, сохраняя последовательность и контекст пользовательского сценария.
Это особенно важно при проектировании приложений.
Допустим, необходимо разработать процесс оформления заказа:
каталог → карточка товара → корзина → оформление → оплата → успешный заказ.
В обычном дизайн-процессе дизайнер создает отдельные экраны и связывает их в прототип.
Теперь первоначальный flow можно реализовать через Claude Code как работающий интерфейс, пройти его в браузере, а затем перенести необходимые состояния в Figma.
На canvas сразу становится видна вся последовательность.
Можно поставить экраны рядом и посмотреть, насколько логично пользователь проходит процесс.
Таким образом Claude Code становится инструментом не только программирования, но и быстрого UX-прототипирования.
Claude получает доступ Figma
На этом возможности не заканчиваются.
Существует и обратное направление взаимодействия.
Figma развивает собственный MCP server, через который AI-агенты получают структурированный доступ к данным дизайн-файлов.
Claude Code является одним из поддерживаемых MCP-клиентов.
Через Figma MCP Claude может получать информацию о компонентах, переменных, структуре layout, ресурсах и других элементах проекта.
Это означает, что AI работает уже не просто со скриншотом.
Он получает структурированный дизайн-контекст.
А это огромная разница.
По картинке нейросеть должна самостоятельно угадывать размеры, компоненты, отступы, цвета и взаимосвязи элементов.
При работе через MCP необходимые сведения можно передавать агенту непосредственно из дизайн-системы.
В результате вероятность получить интерфейс, соответствующий исходному макету, становится значительно выше.
Агенты работают прямо Figma
Следующим важным шагом стало расширение возможностей самого Figma canvas.
В марте 2026 года Figma объявила, что AI-агенты получили возможность создавать и изменять дизайн непосредственно в Figma.
Через специальный инструмент use_figma Claude Code, Codex и другие MCP-клиенты могут генерировать и изменять дизайн-объекты, связанные с существующей дизайн-системой.
Это уже значительно ближе к настоящей работе дизайнера.
Раньше взаимодействие AI с Figma в основном рассматривалось со стороны чтения макета:
Figma → AI → код.
Теперь направление становится двусторонним:
Figma ↔ AI-агент ↔ код.
Агент способен не только посмотреть на дизайн и написать по нему страницу, но и участвовать в создании самого дизайн-артефакта.
Для веб-разработки это может оказаться одним из наиболее существенных изменений последних лет.
Figma и код объединяются
На мой взгляд, самое важное здесь заключается даже не в том, что Claude научился создавать красивые интерфейсы.
Гораздо интереснее исчезновение жесткой границы между макетом и работающим сайтом.
До появления подобных инструментов существовали два разных мира.
В Figma находился дизайн.
В IDE находился код.
Чтобы перенести изменения из одного мира в другой, требовалась ручная работа.
Дизайнер меняет карточку товара — разработчик повторяет изменение в HTML и CSS.
Разработчик обнаруживает техническое ограничение — дизайнер снова открывает Figma и корректирует макет.
Возникает постоянный цикл согласований.
Теперь Figma пытается сделать этот процесс двусторонним.
Интерфейс можно создать в коде и перенести на canvas.
После визуальной доработки Figma-контекст можно снова передать агенту для реализации изменений.
Получается своеобразный roundtrip между кодом и дизайном.
Почему это удобно разработчику
Для frontend-разработчика новая возможность особенно интересна.
Я, например, могу хорошо понимать структуру страницы, UX и техническую реализацию, но создание полноценного макета в Figma все равно является отдельным этапом работы.
Теперь часть этого этапа можно ускорить.
Представим задачу: необходимо создать современную главную страницу сайта строительной компании.
Можно сформировать подробное техническое задание для Claude Code:
- определить структуру страницы;
- создать hero-блок;
- добавить каталог услуг;
- сделать преимущества;
- подготовить кейсы;
- добавить отзывы;
- разработать форму заявки;
- сделать адаптивную версию.
AI создает работающий прототип.
После этого я оцениваю результат непосредственно в браузере.
Если общая концепция устраивает, интерфейс переносится в Figma.
Там уже значительно проще заниматься точечной визуальной доработкой, чем начинать проектирование полностью с чистого листа.
Прототип сразу можно тестировать
У подхода code-first есть еще одно преимущество.
Макет в Figma по своей природе является моделью будущего интерфейса.
Даже хороший интерактивный прототип не всегда полностью передает поведение реального сайта.
Когда разработка начинается через Claude Code, первоначальный вариант уже является кодом.
Можно сразу проверить реальную адаптивность, прокрутку, hover-эффекты, анимации, формы и сложные состояния интерфейса.
Это позволяет раньше обнаруживать проблемы.
Например, блок может прекрасно выглядеть на статичном макете, но плохо работать на мобильном экране.
Или дизайнерская идея требует слишком сложной технической реализации.
При code-first подходе подобные вопросы становятся видны значительно раньше.
После этого рабочее решение переносится в Figma и становится основой для дальнейшего проектирования.
Можно использовать дизайн-систему
Особенно перспективно это выглядит для больших проектов с собственной дизайн-системой.
Одна из главных проблем AI-дизайна заключается в том, что нейросети любят создавать визуально привлекательные, но довольно универсальные интерфейсы.
Получается типичный «AI-дизайн»:
градиенты, большие скругления, стандартные карточки, одинаковые SaaS-интерфейсы.
Для реального продукта этого недостаточно.
Компания может иметь собственные кнопки, сетку, типографику, цвета, формы, карточки и десятки других компонентов.
Figma MCP позволяет агентам получать соответствующий контекст.
Кроме того, специальные skills могут содержать инструкции о том, каким образом агент должен работать с конкретной дизайн-системой.
Поэтому задача постепенно меняется.
Вместо:
«Нарисуй красивую страницу»
можно двигаться к задаче:
«Создай страницу продукта, используя компоненты и правила нашей существующей дизайн-системы».
Для профессиональной разработки второй вариант намного ценнее.
Claude Design дополняет возможности
Параллельно Anthropic развивает еще одно направление — Claude Design.
Это отдельный экспериментальный продукт Anthropic Labs, представленный в апреле 2026 года.
Claude Design предназначен непосредственно для визуальной работы: создания макетов, прототипов, презентаций, one-pager документов и других визуальных материалов.
Пользователь описывает необходимый результат обычным текстом, после чего Claude создает первоначальный вариант.
Затем его можно изменять через диалог, комментарии, прямое редактирование элементов и другие инструменты.
Claude Design также может учитывать дизайн-систему команды.
В результате у Anthropic постепенно формируется целая связка инструментов:
Claude → Claude Design → Claude Code → Figma → готовый продукт.
При этом Claude Design и Claude Code нельзя считать одним продуктом.
Claude Design ориентирован непосредственно на визуальное проектирование.
Claude Code остается агентом для работы с кодом, но благодаря интеграциям теперь активно участвует и в дизайн-процессе.
Дизайнеры уже используют Claude
Интересно, что Anthropic сама использует Claude Code подобным образом.
В официальном материале о внутренних сценариях применения Claude Code компания рассказывала о работе своей Product Design команды.
Дизайнеры используют Claude Code для визуальных изменений интерфейса, работы с состояниями и быстрого создания интерактивных прототипов.
Один из сценариев выглядит особенно показательно: дизайнер может передать Claude Code изображение макета, после чего AI помогает превратить его в функциональный прототип.
Anthropic отмечала, что Claude Code и Figma стали важными инструментами рабочего процесса команды.
То есть речь идет не только о теоретической возможности.
Подход дизайнер + AI + код уже применяется внутри компании, которая разрабатывает Claude.
Figma пока никуда исчезает
После подобных новостей легко сделать громкий вывод: «AI теперь заменит Figma».
Я бы с этим не спешил.
На текущем этапе происходит скорее обратное.
Figma становится площадкой, на которой встречаются человек, дизайн-система и AI-агент.
Claude Code может быстро создать работающий вариант.
Но команде все равно необходимо сравнить решения, обсудить интерфейс, проверить UX, сохранить визуальную последовательность и принять решение.
Canvas для этого подходит значительно лучше терминала.
Именно поэтому Figma не пытается бороться с AI-кодингом, а интегрирует его в собственную экосистему.
Получается интересная модель:
Claude Code хорошо сходится к работающему решению, а Figma позволяет снова расширить пространство вариантов.
Сделали интерфейс — перенесли в Figma — посмотрели альтернативы — выбрали лучший вариант — вернули изменения в код.
Заменит ли Claude дизайнеров
Скорее всего, вопрос поставлен неправильно.
Claude Code действительно забирает часть задач, которые раньше выполнялись вручную дизайнером или frontend-разработчиком.
Но умение автоматически нарисовать карточку, кнопку или лендинг еще не означает понимание продукта.
Хороший дизайнер решает значительно более сложные вопросы.
Кто пользователь?
Что он хочет сделать?
Какую информацию необходимо показать первой?
Почему человек должен нажать именно эту кнопку?
Где пользователь может запутаться?
Как интерфейс должен вести себя в нестандартной ситуации?
Как сохранить визуальный язык бренда?
AI может предложить решение, но качество результата по-прежнему сильно зависит от постановки задачи и контроля человека.
Поэтому я ожидаю не исчезновения дизайнеров, а изменения самого процесса работы.
Дизайнеру все меньше придется вручную создавать десятки однотипных вариантов.
Разработчику — меньше переводить статический макет в код.
А основное время можно будет тратить на архитектуру, UX, визуальную концепцию и качество конечного продукта.
Что меняется веб-разработке
Для создания сайтов это особенно важное изменение.
AI уже умеет генерировать HTML, CSS, JavaScript, React-компоненты и серверную логику.
Теперь активно автоматизируется предыдущий этап — проектирование интерфейса.
В результате один специалист получает возможность пройти значительно большую часть производственного процесса:
идея → структура → дизайн → прототип → код → тестирование → доработка.
Это не означает, что каждый сможет одной командой создать качественный коммерческий сайт.
Наоборот, чем доступнее становится генерация, тем важнее становится умение отличить хороший результат от плохого.
Создать очередной шаблонный лендинг AI уже относительно легко.
Создать сайт, который соответствует бизнес-задаче, правильно работает на разных устройствах, быстро загружается, имеет продуманную архитектуру и может развиваться несколько лет, — совершенно другая задача.
Но скорость создания первоначального варианта действительно меняется радикально.
Как выглядит новый процесс
Я бы рассматривал новый workflow следующим образом.
Сначала определяется задача сайта, аудитория и необходимая структура.
Затем Claude Code получает подробное описание проекта и создает первый работающий интерфейс.
Результат открывается в браузере и проверяется как настоящий сайт.
После этого страницы и необходимые состояния переносятся в Figma.
На canvas можно сравнить несколько вариантов, изменить композицию, доработать визуальную часть и согласовать решение.
Обновленный дизайн через Figma MCP снова становится доступен Claude Code.
Агент получает дизайн-контекст и помогает перенести изменения обратно в приложение.
После этого остается полноценная разработка, адаптация, оптимизация и тестирование.
Получается не линейный процесс «дизайн передали программисту», а постоянная связь между дизайном и кодом.
Claude действительно стал дизайнером
Фраза «Claude Code официально стал дизайнером» звучит громко, но направление развития действительно именно такое.
Claude Code больше нельзя воспринимать исключительно как инструмент, который пишет код в терминале.
Он может участвовать в создании интерфейса, работать с визуальными референсами, создавать функциональные прототипы, взаимодействовать с Figma и использовать контекст дизайн-системы.
Самое интересное — возможность перемещаться между кодом и Figma практически в обе стороны.
Создали интерфейс в Claude Code.
Перенесли его в Figma.
Получили редактируемый макет.
Изменили дизайн.
Передали Figma-контекст обратно агенту.
Продолжили разработку.
Именно этот цикл может серьезно изменить процесс создания сайтов и приложений.
Раньше дизайн и разработка были двумя последовательными этапами.
Теперь они постепенно превращаются в единый итерационный процесс, где код может стать макетом, а макет — снова кодом.
И, на мой взгляд, именно это является главным событием.
Не то, что Claude научился «рисовать сайты», — подобные генераторы существуют уже давно.
А то, что постепенно исчезает техническая граница между идеей, макетом, прототипом и работающим интерфейсом.
Официальные материалы по теме
Подробности интеграции опубликованы самой Figma в материале From Claude Code to Figma: Turning production code into editable Figma designs.
Также Figma предоставляет официальную инструкцию по подключению Claude Code к Figma MCP Server.
Anthropic отдельно описывает реальные сценарии использования Claude Code собственной Product Design командой.
А для чисто визуальной работы Anthropic развивает отдельный инструмент Claude Design.
Это уже не экспериментальная идея «а сможет ли AI когда-нибудь делать дизайн?».
Инструменты существуют сейчас — и постепенно становятся частью реального рабочего процесса дизайнеров и разработчиков.
