Скиллы для дизайна интерфейсов: 10 лучших для Claude Code, Cursor и Codex

Без дизайн-скиллов агент верстает средний сайт: шрифт Inter, фиолетовый градиент, карточки внутри карточек, серый текст на цветном фоне. Скилл это папка с файлом SKILL.md, которую агент читает перед работой. Дизайн-скиллы добавляют то, чего у модели нет по умолчанию: вкус, справочники и правила проверки. Мы делаем интерфейс SkillFoxx с этими скиллами, каждая страница проходит через них перед выкладкой.

Ниже десять скиллов по этапам работы, у каждого команда установки. npx skillfoxx add сам находит папки агентов в проекте, проверяет подпись рецепта и показывает уровень риска. Как устроена установка, мы разбирали в инструкции по установке одной командой.

Направление: чтобы сайт не был похож на шаблон

Taste Skill

Taste Skill это набор скиллов против шаблонных интерфейсов. Главный из них, design-taste-frontend, начинает с брифа: выбирает визуальный язык и только потом пишет код. Три параметра задают смелость дизайна, количество анимации и плотность элементов. Отдельные скиллы держат стиль: минимализм, брутализм, мягкий премиум. Версия v2 помечена автором как экспериментальная, прежнее поведение осталось в v1.

npx skillfoxx add skills/taste-skill

Hallmark

Hallmark заставляет агента менять структуру страницы, а не перекрашивать готовый шаблон. Режим audit оценивает существующий код по списку антипаттернов без правок, redesign перестраивает визуальный слой с сохранением текстов, study разбирает понравившийся дизайн по скриншоту или адресу. Скилл запрещает агенту выдумывать метрики и отзывы на лендинге.

npx skillfoxx add skills/hallmark

Палитра, шрифты и дизайн-система

UI UX Pro Max

UI UX Pro Max хранит локальную базу: около 80 стилей, 192 палитры, 74 шрифтовые пары, типы графиков и больше сотни UX-правил для 22 стеков. Агент ищет в ней подходящее под тип продукта, пишет код и проверяет результат на типичные UX-ошибки. Поиск работает на Python 3 без обращений в сеть. Брендинг и логотипы автор вынес в платную версию.

npx skillfoxx add skills/ui-ux-pro-max

Color Expert

Color Expert отвечает только за цвет, зато глубоко: какое цветовое пространство брать под задачу, как строить ровные шкалы в OKLCH для токенов, как проверять контраст по APCA и WCAG. В справочниках больше сотни материалов, агент открывает нужные по ходу работы. Материалы на английском.

npx skillfoxx add skills/color-expert

Критика и полировка

Impeccable

Impeccable дает агенту 23 дизайн-команды: audit, critique, polish, typeset, layout, animate и другие. 61 правило без участия модели находит в коде приметы ИИ-верстки из начала статьи. Команда init собирает контекст продукта в PRODUCT.md, режим live позволяет перебирать варианты элемента прямо в браузере. Уровень риска высокий: при первом запуске скилл скачивает исполняемый движок. Автоматической установки через CLI пока нет, шаги для каждого агента есть в карточке.

Скиллы Якуба Крехела

Набор Якуба Крехела разбит по темам: better-typography для шкалы шрифтов и переносов, better-colors для палитр и контраста, better-layout для группировки и порядка чтения, better-accessibility для доступности. better-interface запускает все проверки одной командой. У автора есть отдельный скилл о мелких деталях: вложенные скругления, оптическое выравнивание, табличные цифры, зоны нажатия от 44 пикселей.

npx skillfoxx add skills/interfaces-skills

Анимация

Скиллы Эмиля Ковальски

Двенадцать скиллов Эмиля Ковальски, автора библиотеки уведомлений Sonner. animate строит анимацию с правильной кривой и длительностью, review-animations строго проверяет готовые, отдельный скилл ищет места, где анимация вообще нужна. Правила отражают личный подход автора, включая выбор библиотек, которыми он пользуется сам.

npx skillfoxx add skills/skills-for-designers-and-engineers

GSAP AI Skills

Официальные скиллы GreenSock: восемь скиллов с эталонными приемами GSAP. Таймлайны, ScrollTrigger, плагины, React через useGSAP, Vue, Svelte и производительность. Пригодятся, если на сайте сложная анимация при прокрутке. Библиотеку gsap ставите в проект отдельно.

npx skillfoxx add skills/gsap-ai-skills

Проверка перед релизом

web-design-guidelines

Скилл из набора Vercel проверяет интерфейс по сотне с лишним правил: доступность, формы, фокус с клавиатуры, анимации, типографика. У нас это обязательная проверка каждой страницы перед выкладкой. В том же наборе правила производительности React и Next.js.

npx skillfoxx add skills/vercel-labs-agent-skills

Web Quality Skills

Шесть скиллов Эдди Османи проверяют сайт по измеримым данным: скорость, Core Web Vitals, доступность по WCAG 2.2, SEO. Измеренные проблемы скилл держит отдельно от догадок по коду. Лучше всего работает с подключенным Chrome DevTools MCP, без него берет данные Lighthouse.

npx skillfoxx add skills/web-quality-skills

Какой скилл выбрать под задачу

• Новый лендинг или продукт с нуля: Taste Skill или Hallmark, затем UI UX Pro Max.
• Своя дизайн-система и токены: UI UX Pro Max и Color Expert.
• Готовый интерфейс выглядит как сделанный нейросетью: Impeccable и набор Якуба Крехела.
• Нужны анимации: скиллы Эмиля Ковальски, для сложной прокрутки GSAP AI Skills.
• Перед выкладкой: web-design-guidelines и Web Quality Skills.

Все десять сразу ставить не стоит: правила пересекаются и иногда противоречат друг другу. Для начала хватит трех: Taste Skill, Impeccable и web-design-guidelines.

Что еще посмотреть

• Transitions.dev: готовые CSS-переходы для модалок, меню и тостов с правилами подбора.
• Motion Design Skill: принципы motion-дизайна, таблицы длительностей и кривых.
• Awesome Design Skills: реестр готовых стилей с токенами и правилами компонентов.
• extract-design-system: снимает цвета, шрифты и отступы с публичного сайта в токены.

Остальные дизайн-скиллы собраны в разделе фронтенда каталога. Если не знаете, с чего начать, опишите проект в подборе с Foxx AI, он предложит скиллы под ваш стек.