Дизайн с Claude: от идеи до дизайн-системы · Урок 2
Как говорить о дизайне с Claude
Паттерны запросов для дизайн-задач: как задавать референсы, описывать ограничения, итерировать и получать предсказуемые результаты. Разница между вкусовщиной и структурными запросами.
Практическое задание
Что сделать после урока
Выберите компонент, который хотите улучшить в своём проекте (или возьмите любую кнопку/карточку из примера). Попросите Claude 3 раза: первый раз — открытый запрос («сделай хорошо»), второй — со структурным запросом из паттерна #5, третий — итерация с конкретными правками. Сравните качество трёх результатов.
Проверка задания
Выберите компонент, который хотите улучшить в своём проекте (или возьмите любую кнопку/карточку из примера). Попросите Claude 3 раза: первый раз — открытый запрос («сделай хорошо»), второй — со структурным запросом из паттерна #5, третий — итерация с конкретными правками. Сравните качество трёх результатов.
Готовый промпт
Шаблон под задачу урока
Скопируйте и адаптируйте под свой контекст. Текст в треугольных скобках — то, что нужно заменить.
Создай компонент <название компонента> для <тип продукта>. Дизайн-система: - Цвета: фон <hex>, акцент <hex>, текст <hex>, border <hex> - Типографика: <шрифт>, <размеры> - Spacing: base unit <px>, rounded corners <px> Варианты компонента: <список> Состояния: <список> Технический стек: <React/Vue/HTML/Tailwind/CSS Modules> Строго используй только значения из дизайн-системы выше. Никаких хардкод-значений вне токенов.