Claude Code для дизайнеров: рабочее рабочее место дизайнера

Дизайнер, с которой я работала в прошлом месяце, за три дня полностью переработала дизайн-систему. Она не инженер. Она не знает Bash. Она никогда в жизни не писала регулярные выражения. У неё был Claude Code, файл CLAUDE.md и склонность к самокритике собственных ошибок.

Это та версия инструмента, о которой никто не говорит. Каждый пост о Claude Code написан опытным инженером для опытных инженеров. Он полон рулеток агентов, скриптов-хуков и непонятных флагов. Дизайнеры читают его, думают, что это не для них, и закрывают вкладку.

Но это для вас. Честно говоря, даже больше, чем для большинства инженеров. Потому что дизайнеры испытывают трудности не с набором кода. Они борются с система проектирования в десяти репозиториях, пока команда постоянно добавляет новые функции. Именно эту проблему Claude Code решает на ура.

Claude Code — это агент, а не автозаполнение

Claude Code — это не клон GitHub Copilot. Это не окно чата с темой кода. Это долго работающий агент, который живет в вашем терминале, читает весь ваш репозиторий, редактирует файлы, запускает тесты, открывает запросы на слияние и отвечает, когда ему что-то непонятно.

Важное изменение: он не ждет, пока вы укажете ему, какую строку редактировать. Вы задаете ему цель. Он сам определяет, какие файлы открыть, что изменить, добавить ли новый компонент или модифицировать существующий, и как обеспечить бесперебойную работу остального кода во время работы.

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

Работа дизайнера всегда заключалась во вкусе, а не в синтаксисе. Claude Code делает вкус самим продуктом.

Установка за десять минут

Вам понадобятся три вещи: Node.js, терминал и учетная запись Claude.

1. Откройте Терминал (Mac: Cmd+Space, введите Terminal). Вам нужно будет ввести две команды. Это вся установка.

2. Установите Node, если у вас его нет. Перейдите на nodejs.org, нажмите на загрузку LTS, запустите его. Эта часть — обычный установщик с двойным щелчком.

3. В терминале вставьте: npm install -g @anthropic-ai/claude-code

4. Перейдите в свой репозиторий дизайна: cd ~/path/to/your/repo

5. Запустите: claude

При первом запуске программа проведет вас через процесс входа в систему. Готово.

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

| Шаг | Как это выглядит | Сколько времени |

|------|-------------------|----------|

| Установка Node | Стандартный установщик для Mac/Windows | 2 мин |

| Установка Claude Code | Одна команда npm | 1 мин | | Вход | Перенаправление браузера | 1 мин |

| Первая сессия | claude в любой папке | Немедленно |

Пишите CLAUDE.md как дизайн-бриф, а не как README

CLAUDE.md — это файл, который Claude Code читает первым каждый раз, когда открывает репозиторий. Инженеры используют его для команд сборки и путей к тестам. Это нормально. Но это также означает упущение девяноста процентов реальной ценности.

Относитесь к CLAUDE.md как к дизайн-брифу, который вы передаете новому дизайнеру. Стиль, правила бренда, что представляет собой этот продукт, чего мы никогда не делаем, как выглядит чистая работа здесь. Каждое предложение, которое вы помещаете в CLAUDE.md, — это предложение, которое вам никогда не придется повторять в чате.

Шаблон, который я даю каждому дизайнеру, которого принимаю на работу:

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

Пишите его один раз для каждого репозитория. Обновляйте его, когда узнаете что-то новое о том, как агент допускает ошибки в вашем коде. Это накапливается.

Пять важных рабочих процессов

В большинстве руководств Claude Code перечисляются двадцать функций. Пять из них — это то, где проявляется девяносто процентов ценности дизайнера.

Поддержание системы дизайна. «Найдите все места, где мы все еще используем старые значения отступов (8px, 16px, 24px), и замените их токенами (--space-2, --space-4, --space-6). Обновите компоненты. Продолжайте выполнять задачи». Две минуты. Исторически — неделя.

Рефакторинг компонентов. «Наша кнопка разрослась до двенадцати вариантов. Проведите аудит. Скажите, какие три действительно используются, а какие девять не используются. Затем предложите консолидированный API и реализуйте его за флагом функции». Вы рассматриваете предложение. Вы говорите «да». Оно выпускается.

Figma-to-page. Вставьте скриншот Figma или, еще лучше, подключите Figma MCP. Скажите: «Создайте этот главный раздел, используя существующие компоненты и токены, а не новые». Это даст вам PR, соответствующий дизайну, в течение одного-двух раундов обратной связи.

Распространение токенов. Бренд обновляет цвет. «Замените --color-accent во всем монорепозитории и запустите проверку типов». Работа заключается не в наборе текста, а в смелости. Claude Code обладает безграничной смелостью и нулевым эго.

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

| Рабочий процесс | До Claude Code | С Claude Code |

|----------|-------------------|------------------|

| Полная проверка дизайн-системы | 2-5 дней, 1 дизайнер + 1 инженер | 20 минут, 1 дизайнер |

| Аудит компонентов + рефакторинг | 1 спринт | 1 день |

| Figma-к-странице | 1-3 дня | 1-3 часа |

| Распространение токенов | Неделя, подвержено ошибкам | Минуты, надежно |

| Визуальная регрессия | Обычно никогда не происходит | При каждом PR |

Передайте Figma, а не скриншот

Если у вас есть только PNG, вставьте PNG. Claude Code обрабатывает изображения. Он может упустить точность отступов и некоторые нюансы типографики, но структура будет видна.

Если у вас есть Figma, подключите сервер Figma MCP. Это займет всего пять минут, и Claude Code получит прямой доступ к вашим фреймам Figma. Идентификаторы фреймов, имена слоев, значения интервалов, ссылки на токены — вся структура. Качество выходных данных значительно улучшится. Модель перестанет гадать.

В любом случае, одно правило: всегда используйте существующую систему дизайна, а не чистый холст. «Создайте это с помощью наших компонентов» всегда лучше, чем «создайте это». Если вы оставите холст пустым, Claude Code создаст компоненты, которые у вас уже есть. Это пустая трата времени.

Где Claude Code перестает завоевывать ваше доверие

Будьте честны с собой. Именно здесь инструмент сегодня терпит неудачу.

Реальная иллюстрация бренда. Всё, что требует определённого художественного стиля, рисованных от руки персонажей или талисманов бренда, которые должны соответствовать вашему бренду. Claude Code обращается к генераторам, у него нет вкуса. Вы всё равно поручите это Prismlight, Runesmith или художнику-иллюстратору.

Субъективный вкус в верстке. Он может правильно оформить страницу. Он не может сказать вам, что страница эмоционально скучна. Он не может сказать вам, что главному герою нужно больше пространства. Он не может почувствовать, что решение по весу неправильное. Это всё ещё ваша задача.

Решения, основанные на фундаментальных принципах разработки продукта. Он может реализовать всё, что вы попросите. Он не может сказать вам, стоит ли вам это просить. Это всё ещё работа дизайнера, который, собственно, и получает зарплату.

Всё, где репозиторий в беспорядке. Если в вашей кодовой базе нет согласованной системы, нет CLAUDE.md, нет соглашений об именовании, нет токенов, Claude Code только усугубит этот беспорядок. Сначала нужно привести в порядок фундамент. Это расстраивает, но это справедливо.

Если вам нужны более подробные описания рабочих процессов ИИ, просмотрите остальную часть Brainy Бумага. Если вы хотите, чтобы это было правильно установлено в вашей команде дизайнеров, нанять Brainy, и мы позаботимся о настройке и первом реальном рабочем процессе.

Контрольный список для начинающих дизайнеров

Первый день, вот реальный список.

• Установите Claude Code (команда npm, одна минута)

• Войдите в систему и проверьте, работает ли сессия

• Выберите один репозиторий. Только один. Начните с малого.

• Напишите CLAUDE.md, используя шаблон выше. Потратьте на это час.

• Выберите один из пяти рабочих процессов. Выполните его от начала до конца.

• Внимательно просмотрите изменения. Не ставьте штампы автоматически. Вы — арт-директор.

• Укажите Claude, где произошла ошибка. Обновите файл CLAUDE.md, добавив урок.

• Попробуйте другой рабочий процесс. Сделайте это завтра.

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

Часто задаваемые вопросы

Нужно ли уметь программировать, чтобы использовать Claude Code?

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

Безопасен ли Claude Code в рабочем репозитории?

Да, если вы используете ветку. Никогда не запускайте его в основной ветке. Создайте ветку, позвольте Claude Code работать там, просмотрите PR, как любой другой PR, объедините его, когда он будет готов. Git вас защитит. То же самое относится и к требованию прохождения тестов при отправке запросов на слияние (PR).

Claude Code против Cursor против v0 против Lovable: в чем разница?

Cursor — это полноценный редактор со встроенным Claude. v0 и Lovable генерируют пользовательский интерфейс на основе подсказок, но не остаются в вашем репозитории надолго. Claude Code — это безголовый редактор, он работает в любом репозитории и является наиболее мощным для существующих кодовых баз. Для совершенно новых прототипов v0 или Lovable работают быстрее. Для реальной работы над продуктом выигрывает Claude Code.

Сколько стоит Claude Code?

Подписка на Claude Max покрывает все расходы, и именно с этого следует начинать большинству дизайнеров. Более крупные команды переходят на ценообразование через API. В любом случае, это дешево по сравнению с экономией времени в описанных выше рабочих процессах.

Для чего мне никогда не следует использовать Claude Code?

Для иллюстрации бренда, субъективных оценок вкуса, продуктовой стратегии, всего, что требует понимания того, почему пользователь на самом деле хочет эту функцию. Держите это в своих руках. Передайте рутинную работу инструменту.

Вы больше не младший специалист

Долгое время дизайнеры были теми, кто рисовал концепцию и передавал её инженерам, которые фактически создавали продукт. Это означало, что дизайнеры ждали. Свободных мест в спринте. Работы над бэкендом. Чтобы кто-то другой напечатал текст.

Эта эпоха закончилась.

Младший специалист больше не человек. Младший специалист — это модель. Вы — арт-директор.

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

Рефакторинг дизайн-системы занимает три дня, а не три спринта. Маркетинговый сайт выпускается на этой неделе, а не в следующем квартале. Обновление токена происходит за считанные минуты, а не за дни ожидания.

Установите. Составьте техническое задание. Запустите продукт.