10 скиллов, после которых Claude Code и Cursor перестают верстать как нейросеть

Интерфейс, который сверстал ИИ-агент, узнается с первого экрана: шрифт Inter, фиолетовый градиент, карточки внутри карточек, серый текст на цветном фоне. Модель собирает среднее по всем сайтам, которые видела, и выдает средний сайт.

Это лечится скиллами. Скилл это папка с инструкцией SKILL.md, которую агент читает перед работой. Дизайн-скиллы дают ему то, чего у модели нет по умолчанию: вкус, правила, справочники и чек-листы. Работают в Claude Code, Cursor, Codex и других агентах.

Мы делаем интерфейс каталога SkillFoxx с этими скиллами: каждая страница проходит через них перед выкладкой. Ниже 10, которые пригодились больше всего, разложенные по этапам работы. Названия ведут на наши разборы: что умеет скилл, какой у него уровень риска и команда установки под ваш агент. Еще несколько десятков дизайн-скиллов собраны в разделе фронтенда каталога.

Девять из десяти ставятся одной командой:

npx skillfoxx add skills/название-скилла

Команда найдет папки ваших агентов, проверит подпись рецепта и до установки покажет уровень риска. Можно и вручную: скопировать папку скилла в .claude/skills или .agents/skills вашего проекта.

1. Taste Skill, 91 тыс. ★ репозитория

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

npx skillfoxx add skills/taste-skill

2. Hallmark, 29 тыс. ★ репозитория

Заставляет агента менять саму структуру страницы, а не перекрашивать шаблон. Умеет больше, чем сделать новую страницу. Команда audit оценивает готовый код по списку антипаттернов без правок. redesign перестраивает визуальный слой и сохраняет тексты. study разбирает понравившийся дизайн по скриншоту или ссылке: сетку, шрифты, цвета. Приятная деталь: скилл запрещает агенту выдумывать метрики и отзывы на лендинге.

npx skillfoxx add skills/hallmark

3. UI UX Pro Max, 131 тыс. ★ репозитория

Самый популярный дизайн-скилл в нашем каталоге. Внутри локальная база: около 80 стилей, 192 палитры, 74 шрифтовые пары, типы графиков и больше сотни UX-правил для 22 стеков. Агент подбирает стиль, цвета и типографику под тип продукта и проверяет результат на типичные UX-ошибки. Для поиска по базе нужен Python 3, в сеть скрипты не ходят. Брендинг и логотипы вынесены в платную версию.

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

4. Color Expert, 598 ★ репозитория

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

npx skillfoxx add skills/color-expert

5. Impeccable, 72 тыс. ★ репозитория

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

6. Скиллы Якуба Крехела, 7 тыс. ★ репозитория

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

npx skillfoxx add skills/interfaces-skills

7. Скиллы Эмиля Ковальски, 42 тыс. ★ репозитория

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

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

8. GSAP AI Skills, 16 тыс. ★ репозитория

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

npx skillfoxx add skills/gsap-ai-skills

9. web-design-guidelines из скиллов Vercel, 32 тыс. ★ репозитория

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

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

10. Web Quality Skills, 3 тыс. ★ репозитория

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

npx skillfoxx add skills/web-quality-skills

Порядок для новой страницы:

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

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

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

Какими дизайн-скиллами пользуетесь вы? Напишите в комментариях, самые полезные добавим в каталог.