Что умеет Claude в дизайне
Обзор реальных возможностей Claude для дизайн-работ: генерация макетов, описание компонентов, критика существующего дизайна, создание дизайн-систем. Что Claude делает хорошо, а где он ограничен.
Claude — не замена Figma
Это важно понять сразу: Claude не «рисует» в привычном смысле. Он работает с текстовыми описаниями, HTML/CSS, SVG и структурированными форматами вроде design.md. Вот что он умеет реально хорошо:
Что Claude делает отлично:
- Генерирует структурированные дизайн-спецификации (design.md, токены, компонент-гайды)
- Пишет HTML/CSS для конкретных компонентов — кнопок, форм, карточек, навигации
- Описывает дизайн существующего интерфейса (при загрузке скриншота)
- Критикует макеты: находит UX-проблемы, нарушения иерархии, противоречия в цветах
- Создаёт документацию компонентов в формате для Storybook или design tokens JSON
- Генерирует цветовые палитры, типографику, scale с точным обоснованием
Где Claude ограничен:
- Не видит субъективную «красоту» — у него нет эстетического вкуса в классическом понимании
- Не может сам сгенерировать растровые иллюстрации или иконки (только SVG простой формы)
- Не хранит контекст между сессиями — каждый раз нужно передавать дизайн-систему заново
Три роли Claude в дизайне
1. Дизайн-критик
Загрузите скриншот или опишите интерфейс — Claude разберёт его по структуре:
"Вот скриншот моего лендинга. Найди 5 проблем с визуальной иерархией и предложи конкретные исправления."
Это работает лучше, чем просить «сделай красиво» — Claude не знает что красиво в вашем контексте, но знает принципы иерархии, контраста и читаемости.
2. Генератор спецификаций
Claude превращает размытое «хочу современный SaaS» в конкретный design.md с токенами, типографикой и компонентами. Это основной режим работы, который мы разберём в следующих уроках.
3. Кодировщик дизайна
Имея design.md или Figma-файл, Claude пишет CSS/Tailwind/React компоненты, точно следуя спецификации. Это самое точное применение — результат проверяем, нет пространства для «интерпретации».
Что задавать, чтобы получить хороший дизайн
Главная ошибка — слишком открытые запросы:
- ❌ «Сделай красивый интерфейс для приложения»
- ✅ «Создай design.md для B2B SaaS-платформы в стиле Linear: тёмная и светлая тема, Inter как шрифт, акцент на синем #3B82F6, 8px base unit»
Чем конкретнее контекст (индустрия, референсы, ограничения, технический стек), тем точнее результат.
Возьмите любой сайт или приложение, которым пользуетесь. Сделайте скриншот или опишите его текстом. Попросите Claude: (1) описать текущую дизайн-систему (цвета, шрифты, spacing), (2) найти 3 UX-проблемы, (3) предложить конкретные правки. Сравните с тем, что вы думали сами.
Скопируйте и адаптируйте под свой контекст. Текст в треугольных скобках — то, что нужно заменить.
Я хочу проанализировать интерфейс. Интерфейс: <вставьте скриншот или опишите страницу текстом> Контекст: <тип продукта, целевая аудитория> Проанализируй по следующим критериям: 1. Визуальная иерархия — что привлекает внимание первым, вторым, третьим 2. Цветовая система — сколько цветов, есть ли противоречия, достаточен ли контраст (WCAG AA) 3. Типографика — шрифты, размеры, читаемость 4. Spacing и alignment — есть ли единая система отступов 5. 3 конкретных правки с обоснованием Не нужно общих слов — только конкретные наблюдения и предложения.
- Просят «сделать красиво» без контекста — Claude генерирует что-то нейтральное и безликое.
- Ожидают, что Claude запомнит предыдущий дизайн — каждая сессия начинается с нуля, нужно передавать design.md.
- Принимают первый вариант без итераций — дизайн с Claude работает как диалог, не как одна команда.
- Давайте референсы по именам: «в стиле Linear», «как Vercel Dashboard», «похоже на Stripe» — Claude хорошо понимает известные дизайн-языки.
- Просите объяснить решение: «Почему ты выбрал этот цвет?» — так вы понимаете логику и можете спорить.
- Загружайте скриншоты конкурентов: «Сравни мой интерфейс с этим» — Claude найдёт конкретные отличия.
Начало нового проекта, ревью существующего интерфейса, генерация дизайн-системы с нуля.
Финальная полировка пиксель-per-пиксель — для этого нужен Figma и живой дизайнер.