У меня была проблема: Claude и Cursor по умолчанию делают такой стоковый дизайн, что смотреть больно: синие кнопки, белый фон, скучные карточки и, конечно же, как можно больше эмодзи))
Можно сразу качественно улучшить эту ситуацию с помощью "скилла" для клода, который он же для вас и создаст и который он же положит в проект.
Что такое скилл?
Это обычный .md файл, внутри которого инструкции для Claude: как должен выглядеть интерфейс, какие цвета, шрифты, отступы, анимации. Один раз описал — и Claude при каждом запросе читает этот файл и следует ему.
Гайд на примере лендинга
Допустим, вы хотите, чтобы ваш сайт был похож на Linear (это такой таск-менеджер с тёмным дизайном).
Шаг 1: Ищем референс
В нашем случае - открываем linear.app, скролим по сайту, смотрим: какие цвета, как устроены секции, какая типографика, есть ли градиенты и анимации. Если нас всё устраивает - двигаемся дальше.
Шаг 2: Просим Claude спарсить дизайн
Пишем в Claude Code примерно так:
«Зайди на linear.app и внимательно изучи визуальный дизайн сайта. Извлеки: цветовую палитру, шрифты и их размеры, отступы, стиль кнопок, карточек, хедера и футера, анимации, общее настроение. Потом создай файл DESIGN_SKILL.md и запиши туда всё это в виде чётких инструкций — как будто объясняешь другому разработчику, как воспроизвести этот дизайн»Шаг 3: Проверяем, что Claude положил файл в проект
Claude создаст DESIGN_SKILL.md прямо в папке проекта. Там будет что-то вроде: фоновый цвет #0a0a0a, акцент #5b5bd6, шрифт Inter, радиус кнопок 8px и так далее.
Шаг 4: Подключаем скилл
Теперь при любом запросе на создание интерфейса добавляем одну строчку:
«При разработке следуй инструкциям из файла DESIGN_SKILL.md»
Всё. Claude начинает работать с вашей дизайн-системой.
Шаг 5: Допиливаем детали с помощью простого диалогового вайбкодинга
Получится близко к референсу, но 100% не идеально - и это нормально. Дальше просто говорите: «кнопка выглядит не так, сделай её чуть темнее и убери обводку», «отступы между секциями слишком маленькие» и так далее. Итеративно доводите до нужного результата.
Я так сделал для своего продукта — взял за основу дизайн конкретного приложения, Claude спарсил его в скилл, и вместо безликого дефолта получил что-то живое и уже очень близкое к референсу. Остальное доделываю руками через вайбкодинг.
А вы работаете с дизайн-скиллами?