Телеграм канал «PixelMap»

Claude Design 🔥🔥🔥

Пятничный релиз Claude испортил выходные всем, кто имеет отношение к дизайну ) Я тоже поработал с Claude Design, решил несколько своих задач и провёл парочку экспериментов — вот мои выводы, не только про инструмент.

Claude Design практически идеален для меня лично и отлично ложится на мой workflow: быстро спроектировать и сделать основу с помощью AI, а затем доделать руками в режиме редактирования под своё видение, сохраняя полный контроль. Супер!

Очень быстрая адаптация! Я просто открыл его и сразу же решил две небольшие задачи. Без какого-либо обучения или поисков. Я теперь работаю в нём, маршрут перестроен! Обычно я ищу общий язык с инструментами намного дольше. Например, я вообще не могу пользоваться Canva, потому что ничего не понимаю там (

А вот перебросить результат в Claude Code и быстро внедрить в проект у меня не получилось ( Начались какие-то затыки и ручная возня. Я ожидал более глубокой интеграции между этими двумя инструментами.

И самое главное: теперь я вооружён Claude для проектирования/планирования, Claude Design для дизайна и Claude Code для реализации. Кажется, теперь вообще нет ограничений? Разве что в смелости и наличии идей.

И да, по отношению к рынку дизайн-инструментов и особенно к Figma — это было брутально. Особенно с учётом того, что Claude и Figma явно сотрудничали, создавая Figma MCP.
Этот релиз — наглядная демонстрация того, что AI-компании продолжат крушить рынки и концентрировать у себя влияние и невероятные потоки денег (

P.S.
В качестве картинки приложу простейший пример визуальной работы Claude Design. Стояла задача из моих топорных карточек в блоге сделать современные.

10-11 апреля встречаемся на XV IT-конференции «Стачка» в Ульяновске!

Здесь соберутся более 2000 участников (и онлайн-зрителей): разработчики, специалисты по контенту и коммуникациям, HR, а также руководители и собственники IT-компаний.

В течение двух дней – мощный IT-буст:
- 200+ докладов от лидеров индустрии из ВКонтакте, Авито, Яндекса, Сбера, Wildberries & Russ, Ozon, Газпром ИД, Альфа-Банка и т.д.
- 30+ секций по четырём направлениям: Разработка, Управление, Дизайн и Контент, Digital-маркетинг.
- мастермайнды, панельные дискуссии, мастер-классы, экспертные зоны, нетворкинг-события, афтепати в завершении первого дня.

Фиксируйте себе: 10-11 апреля, Ульяновск (УлГПУ)
И скорее на сайт👉 https://clck.ru/3SxRA5 – забрать билет любого формата со скидкой 15% по промокоду Intelsy

От Figma к коду: как прокинуть UI-кит в Claude Code и не сойти с ума

Про Claude Code сейчас трубят из каждого утюга. Способности — пушка, но давайте приземлим это на наши бытовые задачи. Например: как по-быстрому «обогатить» свой UI-кит кодовой базой, чтобы нейронки-агенты потом собирали вам консистентный дизайн, опираясь на ваши наработки, а не на свой рандомный вкус.

Суть: у вас есть кит в Figma. Компоненты, варианты, переменные — всё на месте. Теперь нужно, чтобы это зажило в коде как React-компоненты и CSS-токены. Claude Code через MCP залетает в ваш файл, читает его и пишет код на основе реальных данных. То, что раньше делалось неделями, теперь залетает за пару часов.

Но сначала — Шаг 0, на котором все обычно сыпятся.

Подготовьте Figma-файл (без этого будет хаос)
Claude читает файл через API. Если у вас там свалка из слоев «Rectangle 47» — чуда не будет.

Компоненты — только через Main Components.

Варианты — строго через Component Properties.

Стили — всё должно быть привязано к Variables или Styles. Никакого «красного на глаз».
Если кит причесан — вы в игре. Если нет — идите чинить, иначе Claude выплюнет мусор.

Инструменты: чем собрать кит, если его еще нет
Прежде чем скармливать кит коду, его надо по-человечески собрать. Вот что реально работает:

Figma AI / Make — база. Накидать черновик экрана или интерактивный прототип по промту. Быстро, удобно, но часто слишком стерильно. Хорошо как фундамент.

Figr Identity — это уже про систему. Генерит компоненты, которые дружат с токенами и логикой.

Готовые решения — иногда быстрее взять эталон. Untitled UI (база баз) или Shadcn/ui для Figma. Если работаете с Tailwind — это вообще кратчайший путь к адекватному результату.

Шаг 1. Коннектим Claude Code

Шаг 2. Выворачиваем структуру файла

Вот ссылка на файл. Вытащи через MCP все компоненты, цвета, HEX-ы, текстовые стили и отступы. Мне нужна полная карта, прежде чем начнем кодить.

Claude вернет структуру. Проверьте её. Это момент истины: станет понятно, где вы накосячили в Figma-файле.

Шаг 3. Генерим токены

«На основе файла создай tokens.json. Группируй всё: colors, typography, spacing. Сверху накинь скрипт generate-css.js, чтобы получить готовый styles/tokens.css. Запускай».

Это самая приятная часть — токены залетают идеально, потому что это голая математика.

Шаг 4. Пишем компоненты

Берем, например, Button. Просим Claude написать React-компонент, который в точности повторяет варианты из Figma.

Важно: заставляйте его использовать только CSS-переменные из вашего файла токенов. Добавляем стейты (hover, focus, loading), типы для TS и Storybook для документации. Повторяем для каждого элемента.

Шаг 5. Зацикливаем процесс (Builder.io)

Когда код готов, используем плагин Builder.io. Он «маппит» ваши компоненты в Figma на реальный код.

Результат? Дизайнер рисует новый экран из готовых компонентов в Figma, а разработчик получает чистый React-код, который дергает ваши компоненты, а не генерит новую фигню.

Что в сухом остатке:

За один вечер вы получаете живую дизайн-систему: токены, CSS, React-библиотеку и Storybook. Figma — источник истины для визуала, код — для продакшена.

Всё связано, всё летает. ну не чудо ли?

Дизайнерская «чуйка» — это главный самообман 2026 года

Сейчас из каждого утюга кричат: «Нахрен процессы, у нас есть ИИ и интуиция! Скорость решает всё!» Даже лиды из Anthropic подливают масла в огонь. Но давайте честно: если вы строите бизнес, а не играете в песочнице, то вера в «озарение» без фундамента — это прямой путь к кассовому разрыву.

Раскладываем по полкам, почему «интуитивный дизайн» — это часто просто ширма для лени:

👀 Сеньор не забивает на этапы, он просто пролетает их на автомате.
Когда у тебя за плечами сотни запущенных продуктов, ты не «пропускаешь» исследование. Ты проводишь его в голове за 10 минут, потому что уже знаешь все грабли в этой нише. Это не отмена процесса, это его экстремальное сжатие.

👀 Double Diamond — это не секта, это ваша страховка.
Все эти фреймворки придумали не для того, чтобы дизайнерам было чем заняться. Это способ не просрать бюджет клиента на решение проблемы, которой не существует. В финтехе или медицине «интуиция» без проверки — это не гибкость, это должностное преступление.

👀 ИИ — это бензин, а не двигатель.
Нейронки ахуенно ускоряют сборку, но они не понимают зачем мы это делаем. Если джун надеется, что Клод или Чатгпт заменят ему мозг и понимание задачи — он профнепригоден. ИИ помогает сжимать рутину, но не снимает ответственности за результат.

Короче:

Подход «сначала пилим решение, потом ищем проблему» работает только в одном случае — если вы делаете клон уже взлетевшего продукта. Во всех остальных ситуациях это авантюра. Главный скилл сегодня — не слепое следование методичке и не хаотичное «я так чувствую». Это умение врубать нужную скорость под конкретный риск.

Либо ты управляешь рисками, либо они управляют твоим временем. Третьего не дано. А более детально про все это написано в статье от NNG