6 скиллов Claude для веб-дизайна: ставятся одной командой

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

Ниже шесть скиллов, которые я ставлю для веб-дизайна. Все бесплатные и ставятся одной командой.

Как ставить скиллы

Все шесть ставятся через npx skills add прямо в папке проекта. Работает в Claude Code, Cursor и Codex. После установки Claude сам подхватывает скилл, когда задача подходит, или ты вызываешь его по имени.

Совет: не ставь всё сразу ради коллекции. Каждый лишний скилл занимает внимание модели. Бери то, что нужно под текущую задачу.

1. UX Designer

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

npx skills add szilu/ux-designer-skill

Хорош в паре с любым визуальным скиллом: сначала UX, потом красота.

2. Canvas Design

Описываешь постер словами, получаешь готовый PNG. Удобно для обложек, баннеров и картинок к постам, когда открывать Figma лень.

npx skills add anthropics/skills -s canvas-design

Это официальный скилл из репозитория Anthropic.

3. App Store Screenshots

Скрины для App Store во всех нужных размерах и с мокапами устройств. Если ты делаешь приложение, это экономит день ручной работы в редакторе.

npx skills add ParthJadhav/app-store-screenshots

Один момент из своего опыта: на скринах нельзя рисовать звёзды, награды и отзывы, которых нет. Apple за такое отклоняет приложение. Факты о приложении можно, выдуманное нельзя.

4. Taste

Палитра, шрифты, иерархия. Скилл учит Claude принимать решения по вкусу, а не по умолчанию: какой шрифт к какому, сколько цветов допустимо, что сделать крупнее.

npx skills add Leonxlnx/taste-skill -s design-taste-frontend

5. Transitions

Готовые анимации модалок, меню и переходов между страницами. Без них интерфейс дёргается: окно просто появляется, меню просто исчезает.

npx skills add Jakubantalik/transitions.dev -s transitions-dev

6. Web Artifacts Builder

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

npx skills add anthropics/skills -s web-artifacts-builder

Тоже официальный скилл от Anthropic.

Какой набор под какую задачу

• Лендинг: Taste, Transitions, UX Designer.
• Приложение: App Store Screenshots, UX Designer, Taste.
• Картинки и постеры: Canvas Design.
• Быстрый прототип: Web Artifacts Builder.

Почему это работает

Модель знает много, но по умолчанию выбирает среднее. Скилл сдвигает это среднее в нужную сторону: даёт правила, запреты и примеры. В итоге ты меньше правишь руками и меньше объясняешь в каждом промпте одно и то же.

Свой скилл для дизайна мобильных экранов я собрал по тому же принципу, он описан в статье про /mobile-design.

Репозитории из списка я проверял 22 октября 2026, все открывались. Новые подборки сначала выходят в канале @vaykord_dev.