Как говорить о дизайне с Claude
Паттерны запросов для дизайн-задач: как задавать референсы, описывать ограничения, итерировать и получать предсказуемые результаты. Разница между вкусовщиной и структурными запросами.
Структурный запрос vs. вкусовщина
Вкусовщина — это запрос на субъективное суждение без критериев:
«Сделай мне красивый дашборд»
Структурный запрос — это запрос с конкретными критериями, которые можно проверить:
«Создай layout для дашборда: sidebar 240px, main content с max-width 1200px, header 56px с breadcrumbs. Цветовая схема: фон #FAFAFA, акцент #3B82F6, текст #1A202C. Типографика Inter.»
Claude хорошо работает со вторым типом и плохо — с первым.
Семь паттернов для дизайн-запросов
1. Референс + отличие
Создай навигационный sidebar в стиле Linear.app.
Отличие: без иконок в collapsed-состоянии, только текст.
Технический стек: React + Tailwind CSS.
2. Проблема + ограничения
У меня форма регистрации: 8 полей на одной странице, высокий dropout.
Ограничения: нельзя убирать обязательные поля, нет progressive disclosure (требование продукта).
Предложи три варианта компоновки, которые снизят когнитивную нагрузку.
3. Итерация с сохранением
Вот текущий design.md: <вставить>
Оставь всё как есть, но:
- Замени акцентный цвет с синего на изумрудный
- Увеличь border-radius до 10px везде
- Добавь компонент Toast с 4 вариантами (success, error, warning, info)
4. Критика с приоритизацией
Вот мой текущий интерфейс: <описание или скриншот>
Найди проблемы. Приоритизируй по матрице: влияние на конверсию vs. стоимость правки.
Дай топ-3 правки, которые дадут максимум за минимум усилий.
5. Компонент с состояниями
Создай компонент Button:
- Варианты: primary, secondary, ghost, danger, loading
- Размеры: sm (h-8), md (h-10), lg (h-12)
- Состояния каждого варианта: default, hover, active, disabled
Формат: Tailwind CSS + TypeScript пропсы
6. Accessibility-проверка
Вот моя цветовая палитра: primary #2563EB на белом, secondary #9CA3AF.
Проверь контраст по WCAG AA (4.5:1 для текста, 3:1 для крупного текста и UI).
Где не проходит — предложи альтернативу с тем же оттенком.
7. Design-to-code
Вот design.md: <вставить>
Реализуй компонент Card на React + CSS Modules.
Строго следуй дизайн-системе: никаких значений вне токенов.
Добавь варианты: default, featured (с accent-border слева), minimal (без тени).
Как итерировать правильно
Неправильная итерация:
«Нет, не то, переделай» — Claude не знает что именно не то
Правильная итерация:
«Хорошо, но:
Выберите компонент, который хотите улучшить в своём проекте (или возьмите любую кнопку/карточку из примера). Попросите Claude 3 раза: первый раз — открытый запрос («сделай хорошо»), второй — со структурным запросом из паттерна #5, третий — итерация с конкретными правками. Сравните качество трёх результатов.
Скопируйте и адаптируйте под свой контекст. Текст в треугольных скобках — то, что нужно заменить.
Создай компонент <название компонента> для <тип продукта>. Дизайн-система: - Цвета: фон <hex>, акцент <hex>, текст <hex>, border <hex> - Типографика: <шрифт>, <размеры> - Spacing: base unit <px>, rounded corners <px> Варианты компонента: <список> Состояния: <список> Технический стек: <React/Vue/HTML/Tailwind/CSS Modules> Строго используй только значения из дизайн-системы выше. Никаких хардкод-значений вне токенов.
- Итерируют словами «не то, переделай» — без конкретики Claude угадывает и часто угадывает неправильно.
- Не задают технический стек — Claude выбирает сам и часто выбирает не то, что у вас в проекте.
- Просят слишком много за один запрос — «сделай весь дизайн приложения» даёт поверхностный результат. Лучше по компоненту.
- Начните с «Стоп. Задай мне 3 уточняющих вопроса перед тем как начать» — это выявляет пробелы в вашем запросе до того, как Claude начнёт работать.
- «Думай вслух, прежде чем рисовать» — Claude описывает логику решения, вы соглашаетесь или корректируете до того, как он напишет код.
- Сохраняйте удачные промпты в команде — хороший «компонентный промпт» работает 100 раз подряд.
Любой новый компонент, итерация на существующий дизайн, accessibility-аудит, генерация состояний.
Когда нужна эмоциональная реакция на дизайн от живого пользователя — это юзер-тестирование, не ИИ.