Скиллы для дизайна Claude Code: 3 команды и 2 минуты

Если застрял на самом входе: окно команд, вопросы, перезапуск

Окно команд не открывается в нужной папке. На Mac пункт «Новый терминал по адресу папки» иногда выключен. Тогда запасной путь, он работает всегда: открой программу Терминал через поиск Spotlight, набери cd и пробел, перетащи папку проекта мышкой прямо в окно Терминала и нажми Enter. Адрес подставится сам. Открылось правильно, если в строке последним стоит имя твоей папки, а после него мигает курсор

Это не мои выдумки, а живая страница проекта: он собрал одиннадцать примеров по эпохам и назвал каждую привычку. Фиолетовый градиент 2022 года, неоновое стекло 2025-го, бежевый редакторский макет 2026-го. Рядом с каждым примером написано, что именно в нём не так: полоса цвета украшает карточку, ничего не помечая, пять слоёв карточек добавляют тени вокруг одного и того же содержимого, одинаковый герой и сетка повторяются с разными цветами

Проекта ещё нет. Сделай пустую папку на рабочем столе и открой её тем же способом. Навыки встанут и туда, а проект появится позже

Третья команда спрашивает. Первый вопрос про то, каким помощникам ставить: она уже нашла, что у тебя стоит, поэтому просто Enter. Второй про то, куда ставить: этот проект или весь компьютер. Бери этот проект, тогда ничего лишнего никуда не разъедется, а если потом захочешь везде - повторишь команду и ответишь иначе

Перезапустить помощника. Он читает навыки один раз при запуске. Закрой не вкладку с чатом, а всё окно программы целиком, и открой заново. Держишь Claude Code внутри редактора - закрывай редактор

Проверь, что встало, пока не пошёл дальше

Зайди в папку своего проекта и открой в ней скрытую папку .agents, внутри неё skills. Там должно быть четырнадцать папок: это сами навыки. Если Finder скрытых папок не показывает, нажми Cmd+Shift+точка

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

Три имени, по которым видно, что встало именно то, что нужно: design-taste-frontend, emil-design-eng, impeccable. Смотреть их удобнее в .claude/skills, там они лежат все три рядом. Нет хотя бы одного, значит эта команда не доехала, и её надо повторить отдельно

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

Проверить, что всё встало, можно одной строкой: набери ls .claude/skills в той же папке. По моему прогону 15 сентября там пятнадцать имён, среди них design-taste-frontend, emil-design-eng и impeccable - те самые три, что ты ставил. Остальные двенадцать приехали вместе с набором Ковальски

Четыре шага по порядку

Весь путь подряд, с признаком успеха на каждом шаге. Порядок важен только у последнего шага, первые три можно набирать в любом:

Шаг 1. Поставь вкус - он работает до генерации

Набери первую строку из блока выше. Признак успеха: в папке проекта появилась .agents/skills/design-taste-frontend, а в выводе строки Gen Safe, Socket 0 alerts, Snyk Low Risk

Имя design-taste-frontend в команде обязательно: в этом проекте лежит несколько навыков, и без имени поставятся все. Сам навык с недавних пор идёт во второй версии, переписанной заново, и повторная установка той же командой обновляет старую

Шаг 2. Поставь набор про движение

Набери вторую строку. Признак успеха: рядом встало сразу 13 папок, среди них emil-design-eng, animate и review-animations

Шаг 3. Поставь ручки - они работают после

Набери третью строку и ответь на два её вопроса: Enter, потом «этот проект». Признак успеха: в чате помощника заработала команда /impeccable, а в проекте лежит папка .claude/agents с четырьмя файлами

Шаг 4. Скажи помощнику, что чинить

Набери в чате /impeccable polish и допиши, что править: «полирни главный экран». Признак успеха: он отвечает не «выглядит неплохо», а называет конкретный элемент и готовую правку под ту библиотеку, на которой ты собираешь

Почему их три, а не один: каждый чинит своё

Самая дорогая ошибка тут простая. Человек ставит один навык, видит тот же серый лендинг и решает, что всё это не работает. А он починил треть

Три навыка стоят в разных точках процесса, и точка важнее названия:

Отсюда правило выбора: не умеешь объяснить, чего хочешь - ставь первый. Экран уже есть и хочется довести - ставь третий. Всё замерло - ставь второй

У первого внутри три ручки, и их можно крутить словами прямо в запросе. В инструкции навыка они названы так: DESIGN_VARIANCE (от идеальной симметрии до художественного хаоса), MOTION_INTENSITY (от статики до кино) и VISUAL_DENSITY (от галереи с воздухом до плотной панели с данными). По умолчанию стоят 8, 6 и 4. Скажи «сделай плотность 8», и он перестроит сетку, не трогая остальное

Чем набор Ковальски отличается от того, что показывают в роликах

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

У Эмиля Ковальски лежит не один навык, а набор из тринадцати, и ставится он одной командой целиком. Головной внутри называется emil-design-eng, в нём 674 строки про то, какая анимация уместна, а какая портит. Рядом лежат animate (собрать анимацию с нуля), review-animations (проверить то, что уже есть), apple-design, pick-ui-library, mobile-native и ещё восемь

Куда попадает человек, который ищет по слову «motion». Он находит библиотеку Motion, бывшую Framer Motion, с 30 200 звёздами. Это хорошая вещь, но совсем другая: библиотека - это код, которым анимация делается, а навык - это знание о том, какую именно анимацию ставить. Поставишь библиотеку вместо навыка, помощник получит инструмент и не получит вкуса

Команда `npx skills add emilkowalski/skills` поставила 13 папок за 4 секунды. Ролики обещали одну

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

Что за 24 команды у Impeccable и какую набирать

Impeccable даёт не одну кнопку «сделай красиво», а набор команд под разные беды. Их двадцать четыре, все набираются через /impeccable <команда>

Вот те, к которым возвращаешься чаще всего:

Первая команда, которую стоит набрать после установки, отдельная: /impeccable init. Она один раз соберёт контекст твоего проекта и запишет его файлом, чтобы остальные команды не переспрашивали каждый раз, что ты делаешь

Есть и способ сократить набор: /impeccable pin polish заводит короткий ярлык, после него хватает /polish

Две команды в списке работают прямо в браузере, а не в чате: /impeccable live открывает страницу и даёт менять элементы на живой странице, а /impeccable generate делает варианты одного названного элемента сам, без перебора руками. Их добавили последними, и в роликах про них ещё не говорят

Навык не просто «делает красиво»: за ним каталог из 67 проверок по восьми разделам, от типографики до движения. Каждая карточка показывает привычку и объясняет, чем она мешает. Подпись над заголовком, декоративная сетка на фоне, пульсирующая точка статуса, одинаковый текст на трёх кнопках подряд

Где числа из роликов расходятся с живыми

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

Разрыв по звёздам в четыре с половиной раза объясняется просто: ролик снят, когда проекту было несколько дней. Числа в роликах стареют быстрее, чем ролики уходят из ленты

Что ломается и что с этим делать

command not found: npx. Значит на компьютере нет Node. Поставь его с сайта nodejs.org, кнопка с надписью LTS, и закрой чёрное окно команд, потом открой снова. Без этого оно не увидит новую программу

Команда отработала, а в чате /impeccable не появилась. Помощник читает навыки при запуске. Закрой его целиком, не только вкладку с чатом, и открой заново

Навыки встали, а ответы прежние. Проверь, в той ли папке ты набирал команды. Навыки лежат в папке проекта и работают только там, поэтому в соседнем проекте их не будет. Хочешь везде - повтори npx impeccable install и на втором вопросе выбери вариант про весь компьютер

Помощник пишет «выглядит хорошо» и ничего не правит. Ты дал ему оценивать, а не чинить. Скажи глаголом: не «как тебе этот экран», а «полирни этот экран» или /impeccable polish главный экран

Всё встало, но результат не стал красивее. Самая частая причина: поставлен только третий навык. Ручки крутят то, что уже сгенерировано, а генерируется оно по-прежнему без вкуса. Проверь, что папка design-taste-frontend на месте

Шпаргалка: какая беда, какую команду набрать

Унеси эту таблицу: она отвечает на вопрос, который возникает уже после установки, когда экран перед глазами и непонятно, с чего начать

Это только часть моего стека. Полная система, в которой интерфейс выглядит собранным, устроена сложнее: там свои правила для сеток и шрифта, своя работа с движением и проверка каждого экрана перед показом. Её я раскрываю на ИИ-Лагере

Сколько это стоит и на чём держится

Все три бесплатны и открыты. Impeccable под лицензией Apache 2.0, набор Ковальски и taste-skill под MIT - это значит, что использовать их в своих проектах, включая коммерческие, можно без отдельного разрешения

Платить надо только за самого помощника, внутри которого они работают. Сами навыки денег не просят и аккаунтов не заводят

Работают они не только в Claude Code. Установщик Impeccable сам находит, что у тебя стоит, и раскладывает файлы по нужным папкам: он умеет в Cursor, Codex, Gemini и ещё несколько. Набор Ковальски и taste-skill ставятся тем же установщиком npx skills и тоже кладутся и в общую папку, и в папку конкретного помощника

Если ты только заходишь в Claude и слова «навык» и «плагин» пока сливаются, у меня есть разбор плагинов, навыков и MCP и гайд по самому Claude Code. Когда захочется проверить уже готовый экран чужими правилами, это аудит дизайна по правилам Apple. Если интереснее собирать макет не навыками, а отдельными инструментами, лежит разбор дизайна без дизайнера и гайд по Stitch в Claude. Отдельно стоит знать про соседний набор: у самой Anthropic есть свои пять навыков под дизайн, и они другие, не эти три. Они разобраны в подборке скиллов. А если хочется не три навыка, а один, зато вглубь, с 88 стилями и таблицами подбора, это разбор UI UX Pro Max. Как сделать навык своими руками - в гайде про собственный скилл

Источники

Каждая команда и каждое число проверены на живых страницах проектов и своим прогоном 14 сентября 2026

• Impeccable - команда установки, раздел с 24 командами, лицензия Apache 2.0
• Taste-Skill - команда установки с именем design-taste-frontend, лицензия MIT
• Skills Эмиля Ковальски - команда установки, перечень тринадцати навыков, лицензия MIT
• Motion - та самая библиотека, с которой путают навык про движение
• Сайт Impeccable - документация проекта и описание команд

Памятка: три команды и первые шаги

Шесть строк, которых хватает от пустой папки до первого исправленного экрана

Частые вопросы