Claude Design убил Figma: дизайн-система из твоего же кода

масштаб

Об этом обновлении почему-то никто не рассказывает

Мы знаем Claude Design таким, каким он вышел три месяца назад. Правда в том, что сегодня это совершенно другой инструмент. Он заменяет конструктор лендингов, создание презентаций, создание документов и любые дизайн-задачи.

Я закрою эту несправедливость и расскажу о преимуществах, которыми пользуется один процент людей. С ними ты избавишься от AI-слопа в своём дизайне, соберёшь лендинг словно в конструкторе за несколько часов и поймёшь, как делать нормальные презентации.

Начну с главного обновления: Claude Design теперь коннектится с MCP-серверами. Claude Design и Claude Code стали буквально одним и тем же.

точка ноль

Раньше я таскал дизайн между инструментами руками

Вот как это работало раньше. Я создавал дизайн у себя, скачивал его, отправлял в Claude Code как промт, и он его адаптировал. В этом была большая проблема: мой UI Kit просто не учитывался.

Мне нужно было создать начало в Claude Design, потом руками перенести в Claude Code через архив, потом обратно. В итоге получалось так себе.

Сейчас я беру свой вайб-код проект, прошу Claude Code специальной командой отправить данные в Claude Design — и все мои компоненты, весь UI Kit уезжают прямо в приложение.

метод 1

Design Sync забирает проект целиком

Покажу на реальном проекте. У меня есть MVP — продукт, который делает аналитику для блогеров. Руки до него пока не доходят, но нулевой MVP мы сделали и первые несколько сотен пользователей набрали. В этом проекте есть UI Kit, собранный через Claude Code.

Допустим, я хочу создать новую страницу приложения или переделать текущий лендинг. Раньше пришлось бы переносить скринами. Сейчас нужно ввести команду Design Sync — и происходит магия. Одной команды достаточно, чтобы перенести из Claude Code в Claude Design всё, что мне нужно.

Он предлагает авторизоваться, спрашивает, что именно берём. Берём всё. Дальше он собирает библиотеку локально и готов воспроизводить её в Claude Design.

метод 2

По дороге он находит баги твоего дизайна

Перенос занял больше часа, и вот почему. Design Sync работает не только на создание дизайн-системы. Эта же команда находит все баги твоей вёрстки: где-то кнопки разного размера, где-то тени разбросаны хаотично. Она проверяет весь твой дизайн на такие UI- и UX-огрехи ещё до отправки.

Если дизайн сделан абы как, а UI Kit вообще нет — он создаёт его с нуля. Ему сложнее, но твой проект от этого оптимизируется.

Уточню честно. Если у тебя изначально не было хорошего референса и дизайн выглядит как AI-слоп — таким он его и загрузит. Он просто сделает из него консистентную дизайн-систему, которой можно пользоваться дальше для прототипов и страниц.

метод 3

Карусель в твоих цветах он собирает сам

Теперь у нас есть дизайн-система и UI Kit — и мы можем создавать новые страницы, прототипы, вайрфреймы, документы и даже анимацию. Всё в единой стилистике, как наш сайт.

Попробуем на простом. Я хочу пост-карусель, которая приглашает пользователей попробовать Атрибутор. Говорю: создай карусель по тексту, который я прикреплю. Вставляю текст, отправляю.

И тут Claude Design не просто делает, а спрашивает. Формат — портрет для Instagram, нужно пять кадров, их можно перетаскивать. Главная цель поста — перевести на Атрибутор. Тон чуть строже разговорного, продуктовый. На обложке крупный хук, в финале призыв потестить. Реальные картинки добавлять не будем, продолжаем.

На выходе готовая карусель — в наших цветах, в нашем дизайне, с нашим фирменным фоном.

метод 4

Так работают крупные компании, только порог входа был выше

Казалось бы, мы делаем это ради красивых сайтов. Но дело в другом: обновление помогает работать с дизайном системно — так, как это устроено в любой крупной компании.

Есть брендбук. По брендбуку и UI Kit создаются продукты, дизайн-материалы, рекламные материалы. Большинство вайб-кодеров сегодня не имели опыта создания чего-то подобного, поэтому логика была неочевидна. Мы такое делаем давно и без Claude Design. Но делают не все, и порог входа был выше.

Теперь он спокойно создаёт то, что нужно, внутри той же дизайн-системы. Заходишь в неё, нажимаешь «Редактировать», можешь дать доступ команде. Там правила дизайна в текстовом виде, там же все компоненты — работающие тумблеры, окна, всё остальное. Захотел поменять — жмёшь «Эдит» и даёшь задачу комментарием. Раньше через Claude Code это было сложнее.

центральный блок

Я перенёс сюда лендинг своего SaaS и правлю его как в конструкторе

Это замена Figma и Тильде, и покажу на своей реальной задаче. У меня есть довольно крупный SaaS, который я разрабатываю последние три месяца. Его MRR больше 10 000 $.

Я делал самое крупное обновление сайта с момента запуска: переделать блоки, обновить плитки под новые функции, переписать тексты. Раньше это занимало огромное количество времени в Claude Code — есть дизайн в Figma, и ты на каждый текст даёшь правку, подвинь десять пикселей туда, десять сюда. Не вау.

Той же командой Design Sync я перенёс сюда целый лендинг. Один раз я заплатил за него дизайнеру, а теперь у меня здесь вся страница и все блоки по отдельности — как шаблон, которым я пользуюсь.

Дальше я отправляю ему скриншот и говорю: подумай, как тут улучшить визуал. И мы дорабатываем вместе. Могу выбрать конкретный элемент, добавить текст, сохранить, тут же увидеть результат. Могу удалить, выделить, исправить, добавить новый фрейм. Это буквально новая Figma, которая работает и в браузере, и в приложении.

инструмент

Справедливый вопрос: это всё ещё только про сайты?

Справедливый вопрос: если это дизайн-инструмент, он полезен только тем, кто делает сайты? Отвечаю: нет, и вот что я получаю на выходе.

Анимации. Презентации — анимированные и красивые. Документы, которые генерятся под задачу.

Например, я готовлюсь к встрече с учениками курса: беру и создаю лонгриды, которые мы разбираем на созвоне, в красивом формате. По каждому вижу отчёт перед созвоном. Ты можешь делать то же самое для встречи с клиентами или партнёрами, чтобы прийти подготовленным.

wow-эпизод

Три месяца назад я говорил то же самое, но с оговорками

У меня три месяца назад было видео о том, что Claude убил Figma. Но там было много «но».

Сегодня этих «но» нет. Я больше не использую Figma вообще — как и ни один другой инструмент дизайна, кроме Claude Design. Не вижу в этом смысла.

Презентации он делает лучше, чем Gamma — я забыл, когда ей пользовался. Карусели делает неплохо и быстрее, чем любое приложение. Нужен лонгрид — тоже сюда.

дашборд

Что чем заменилось

Свожу в одну таблицу — не чтобы похвастаться списком, а чтобы ты понял, какие подписки у тебя останутся, а какие можно закрывать.

Одна оговорка, честная. Растровая графика — возможно, исключение. Но это не про создание продуктов, поэтому в моём списке её нет.

возражения

Но у меня нет UI Kit и нет дизайнера

что дальше

Перенеси свой проект и посмотри, что он найдёт

Ты дочитал до конца — значит, дело не в том, что Claude Design умеет рисовать. Дело в том, что твой дизайн наконец стал системой: UI Kit из кода, правила в текстовом виде, компоненты, к которым есть доступ у команды.

Один вопрос напоследок. Ответь себе одним предложением: сколько инструментов дизайна у тебя сейчас открыто в соседних вкладках? Назови их — и посмотри, сколько из них переживёт первый же перенос через Design Sync. Я читаю.