Claude для дизайнера: макеты в код за 5 минут

Я, Арина Михална, давно жду того момента, когда дизайнер сможет сам превратить макет в код за пятнадцать минут и не будет ждать разработчика две недели. Claude Code делает именно это — даёт дизайнеру силу решать задачи без фронтенд-команды.

Вот честный разговор: прототип на Figma смотрится красиво, но на экране пользователя это всё ломается. Дизайнер ждёт разработчика, разработчик ждёт уточнений, заказчик ждёт обоих. Claude Code встаёт в эту дыру и говорит: давайте я напишу компонент, вы его проверьте, и мы поймём, что не так.

Как Claude читает макет и пишет код

Первое, что нужно понять: Claude видит картинку, как человек. Вы даёте ему скриншот макета (или вектор, или описание) — он распознаёт кнопки, карточки, сетку, цвета, шрифты. Потом спрашивает уточнения или сразу пишет код.

Работает так:

1. Снимаете скриншот макета (Figma, Adobe XD, Sketch — любой софт)
2. Кидаете в Claude с описанием: «сделай React-компонент кнопки с такими-то цветами, шрифт такой-то, на ховере вот так»
3. Получаете файлы (index.tsx, styles.css, package.json) — готовы вставить в проект
4. Проверяете в браузере, говорите Claude, что переделать, и он правит

Видит ли Claude правильно? На 70–80% да. Он ловит:

• цвета, размеры, отступы (если они округлые)
• типографику (шрифты, вес, кегль)
• базовую сетку и алайнмент
• тени и градиенты

Проваливает:

• сложные кривые Безье (когда нужна точность до пикселя)
• микровзаимодействия (когда элемент движется по траектории при скролле)
• доступность (нужно явно просить ARIA-атрибуты и alt-текст в промпте)
• сложную логику (если в макете несколько состояний, нужно помочь)

Четыре workflow’а, которые дизайнеру реально помогают

1. Прототип в боевом коде вместо Figma Prototype

Обычно дизайнер делает прототип в Figma, заказчик смотрит, говорит «эх, а если кнопка тут?», и дизайнер снова в Figma. С Claude быстрее так:

• Дизайнер: “Сделай интерактивный прототип карточки товара товара — на клик раскрывается описание”
• Claude Code пишет файл за две минуты
• Дизайнер открывает в браузере, показывает заказчику живой прототип
• Заказчик видит на мобильном, как это реально смотрится

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

2. Быстрая генерация вариаций по бренд-гайду

У вас есть дизайн-система: 8 цветов, 3 шрифта, 4 размера кнопок. Нужны все комбинации — получается 96 вариантов. Рисовать вручную — день работы. Claude Code делает за пятнадцать минут:

Я дизайнер, нужна компонент-библиотека кнопок для React.
Палитра: primary #007AFF, secondary #5AC8FA, danger #FF3B30.
Размеры: small (12px), medium (14px), large (16px).
Состояния: normal, hover, active, disabled.
Выведи все комбинации в одном файле стилей, чтобы я мог
открыть HTML и увидеть матрицу всех вариантов.

Результат: файл с 96 кнопками, открыли, проверили, сказали Claude, что поправить — и он правит. Человеко-часы сэкономлены.

3. Автоматизация смены стилей в старом коде

Кодовая база — спагетти, никто не помнит, сколько там color: #3498db разбросано по файлам. Нужно переделать на новую палитру. По данным официальной документации Claude Code, инструмент умеет работать прямо в папке проекта: открываете терминал, переходите в папку командой cd your-project, запускаете Claude и следуете инструкции для входа при первом запуске.

Дальше даёте задачу: «Замени все #3498db на #007AFF в src/components. Проверь, ломается ли что.» Claude ищет вхождения, меняет, запускает тесты. Людям на это — день. Claude — двадцать минут.

4. Прототип сложного интерфейса за одну сессию

Большой проект — например, админка для e-commerce. 15 экранов, 40 компонентов, поля-формы-таблицы. Обычно дизайнер рисует в Figma месяц, потом программист пишет месяц, потом переделки.

С Claude Code проще:

• Дизайнер описывает структуру (или кидает макеты) страница за страницей
• Claude генерирует компоненты, дизайнер их проверяет
• За неделю есть движущийся прототип, который можно показать пользователям
• Пользователи сразу видят, что ломается, и это исправляется на прототипе, а не на готовом продукте

Это не значит, что программист не нужен. Это значит, что он приходит после тестирования прототипа, когда требования зафиксированы, а не в самом начале.

Где Claude для дизайнера проваливает — и как не влипнуть

Микровзаимодействия и анимация. Если нужна элегантная анимация (элемент прилетает со стороны, вращается по кривой), Claude напишет базовый CSS Transition, но тонкую настройку кривой скорости вы доделаете сами.

Доступность. Claude не добавляет ARIA-атрибуты и alt-текст автоматически — скажите явно в промпте, и он добавит. Если нужен WCAG AA, пишете это в задаче.

Интеграция с реальными данными. Claude напишет фронтенд, но если нужно дёргать API — уточните: какой фреймворк, параметры, как обрабатывать ошибки.

Очень сложные интерактивные логики. Фильтрация таблицы с 50+ колонками со сортировкой, группировкой, скрытием — Claude напишет базу, программист доделает оптимизацию.

Из России: доступ к Claude Code

Claude работает в России через VPN и свой аккаунт с зарубежной оплатой. Claude Code — это тот же инструмент, только CLI: ставится в терминал и работает в папке вашего проекта.

По данным документации Anthropic, установка выглядит так. Нативный способ (рекомендованный):

curl -fsSL https://claude.ai/install.sh | bash

Или через Homebrew на Mac:

brew install --cask claude-code

После этого переходите в папку проекта и запускаете Claude. При первом запуске инструмент попросит авторизоваться через браузер.

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

Когда дизайнеру хватает Claude, когда нужен программист

Задача	Claude справится сам	Нужен программист
Прототип или MVP	✓
Компонент-библиотека по бренд-гайду	✓
Смена стилей в существующем коде	✓
Интеграция с бэкендом, API		✓
Оптимизация производительности на больших данных		✓
Сложная логика (машина состояний, обработка ошибок)		✓
Поддержка старых браузеров, специальная доступность		✓
Быстрое тестирование идей	✓

Промежуточная зона: дизайнер пишет прото на Claude, программист доделывает логику и интеграцию. Это распространённый workflow в стартапах и агентствах.

Главный трюк: говорить с Claude как с коллегой, а не как с машиной

Худший промпт: «напиши кнопку». Лучший: «дизайн кнопки — тёмный фон, white текст, на ховере фон светлеет на 20%, бордеры 8px, шрифт Inter 14px semi-bold. При клике кнопка должна быть слегка придавлена (active state). Выведи все три состояния в одном компоненте».

Чем больше деталей, тем точнее результат. Если Claude не понял — покажите пример существующего кода. Если по-прежнему не так — разбейте задачу пополам.

Правда о дизайнере, который работает с Claude Code

Дизайнер, который освоил Claude — это не программист, но и не просто дизайнер. Это гибрид: думает визуально, но может быстро прототипировать. Берёт макет, ставит в Claude, видит, как это смотрится на экране за пятнадцать минут. Может править без помощи программиста. Может согласовать требования быстрее, потому что показывает живой прототип, а не картинку.

Это экономит деньги (не платите программисту на прототипирование), экономит время (дизайнер не ждёт), экономит нервы (проверка требований на живом коде, а не на макете).

Единственное: нужно привыкнуть, что результат не идеален. Claude напишет 80% кода, остальное — ваша работа или работа программиста. Но эти 80% — это часы скучной рутины, которых вы теперь не делаете.

Кейс: за неделю вместо месяца

Я помню проект — лендинг для SaaS, 5 страниц, куча компонентов. Дизайнер Катя сделала макеты в Figma, запросила у программистов оценку. Программисты сказали две недели. Катя подумала, взяла Claude Code и за три дня накидала прото. Программисты приходят, смотрят, говорят: «окей, осталось добавить API и деплой». Финал: лендинг живой за семь дней вместо месяца ожидания.

Что там было:

• Главная с героем, фичами, ценами
• Админка для добавления товаров (таблица, форма, валидация)
• Личный кабинет пользователя
• Страница ошибок (404, 500)

Катя дала Claude скриншоты по одному, с комментами типа «вот так оно должно двигаться на мобиле, а то на десктопе». Claude писал компоненты Vue. Катя проверяла, говорила: «тут отступ не то, тут цвет не совпадает». Claude правил. За неделю структура была готова, программист добавил бэкенд — и запустили.

Это не значит, что программист был лишний. Он сделал интеграцию, обработку ошибок, оптимизацию. Но скелет кода дизайнер выросла сама.

Что ещё можно автоматизировать

Смена палитры в готовом проекте. Заказчик говорит: «давай другой цвет». Вместо того чтобы искать по всем файлам #3498db, вы открываете Claude Code в папке, даёте маппинг старой палитры на новую, Claude находит все вхождения и меняет.

Генерация тёмной версии. У вас есть светлая тема. Claude может сгенерировать тёмную: инвертирует контрасты, переделает цвета, чтобы текст был читаемым. Потом вы проверите, что смотрится ок.

Responsive-ификация. Макет только для десктопа? Claude добавит медиа-запросы, сделает адаптив для мобиля, проверит, что ничего не сломалось.

Тестовые данные. Нужно заполнить форму примерами? Claude сгенерирует realistic данные (фейковые имена, адреса, телефоны), вставит в компоненты — и вы сразу видите, как это выглядит.

Риски и подводные камни

Claude может галлюцинировать код. Напишет вроде нормально, но потом при запуске падает с ошибкой. Это нормально. Вы даёте ошибку обратно в Claude — он исправляет. Это диалог, а не волшебство.

Сложные взаимодействия часто требуют переделки. Если в макете нужна многоуровневая навигация или сложный дропдаун, Claude напишет базовый вариант. Потом вы поправляете логику вручную или даёте уточнение.

Не загружайте сразу весь проект. Если проект большой, Claude может заблудиться в контексте. Работайте модульно: один экран = одна сессия. Это быстрее и понятнее.

CLAUDE.md файл — ваш друг. По данным документации, Claude Code автоматически читает файл CLAUDE.md при каждом запуске новой сессии. Туда кладут инструкции: архитектура проекта, соглашение о коде, компоненты, которые уже есть, как их использовать. Так Claude не будет писать дублей и будет придерживаться вашего стиля.

Три вещи, которые нужно знать перед первым запуском

1. Claude Code работает через CLI в вашей папке. Он выполняет команды локально, но сама модель работает на серверах Anthropic. Ваш код остаётся у вас — отправляется только контекст, который нужен для задачи.

2. Первый запрос может быть медленным. Claude грузит контекст проекта, читает файлы, строит картину. Первый раз может взять минуту-две. Потом в одной сессии работает быстро.

3. Не все языки одинаково хороши. На JavaScript/TypeScript Claude работает идеально. На Python тоже. На других языках может быть чуть хуже, но всё равно лучше, чем гадать вручную.

Как начать прямо сейчас

Если у вас есть MacBook, ноутбук на Windows или Linux:

1. Откройте терминал
2. Установите Claude Code одной командой (рекомендованный способ):

   curl -fsSL https://claude.ai/install.sh | bash

   Или через Homebrew на Mac:

   brew install --cask claude-code

3. Перейдите в папку проекта: cd path/to/your/project
4. Запустите: Claude
5. Следуйте инструкциям на экране (Claude попросит аутентифицировать через браузер)

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

Первый раз — просто попросите: «Создай компонент кнопки на React с пропсами color, size, disabled». Увидите, как это работает. Потом пробуйте более сложные задачи.

Что дальше — навык, который изменит вашу позицию

Дизайнер, который может писать код (пусть с помощью Claude) — уже не просто дизайнер. Это дизайнер-разработчик, гибрид. На рынке такие дороже. В агентствах такие быстрее закрывают проекты. В стартапах такие могут вообще запустить MVP сами.

Это не значит, что вы станете программистом. Но это значит, что вы сможете реализовать свои идеи сами, не ждя людей в очереди.

По материалам: документация Claude Code, официальный сайт Anthropic, Model Context Protocol.

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

Читайте также

• Claude Code: единый дизайн приложения без правок
• Claude Code ошибка установки за 10 минут
• Claude Code для непрограммистов: без кода
• На портале «Мастерская нейросетей»: Нейросети для дизайнера в 2026: что взять в работу, а что — маркетинговый шум