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

Новые дизайн-скиллы я показываю в канале SkillFoxx в Telegram. Подпишитесь, чтобы узнавать о них раньше, чем они попадут в эту подборку.

Какой скилл для какой задачи

• Сайт или лендинг с нуля — Taste Skill или Hallmark.
• Улучшить готовый сайт — скилл redesign-existing-projects из набора Taste Skill, затем Impeccable.
• Палитра, шрифты и дизайн-система — UI UX Pro Max и Color Expert.
• Убрать приметы ИИ-верстки — Impeccable и скиллы Якуба Крехела.
• Анимация в Claude Code и Codex — скилл animate из набора Эмиля Ковальски, для прокрутки GSAP AI Skills.
• Проверка перед выкладкой — web-design-guidelines от Vercel и Web Quality Skills.
• Доски айдентики и брендбука — скилл brandkit из набора Taste Skill.

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

Три скилла для старта собраны в набор из трех: Taste Skill, Impeccable и скиллы Vercel, команды установки лежат на одной странице. Не уверены в выборе, опишите проект в подборе с Foxx AI или откройте подборку по UI-дизайну.

Агент без дизайн-скиллов собирает интерфейс из самых частых решений, которые видел при обучении. Отсюда шрифт Inter, фиолетовый градиент, карточки внутри карточек и серый текст на цветном фоне. Такой сайт узнают сразу.

Скилл меняет это поведение. Технически скилл — папка с файлом SKILL.md, которую агент читает перед работой. В ней правила, справочники и проверки, которых у модели нет. Claude Code и Codex читают один и тот же формат, поэтому все скиллы подборки работают в обоих агентах.

Интерфейс SkillFoxx мы делаем с этими скиллами. Каждая страница перед выкладкой проходит через web-design-guidelines и Impeccable.

Как поставить скилл в Claude Code и Codex

Команда npx skillfoxx add находит папки агентов в проекте, проверяет подпись рецепта и до установки показывает уровень риска. С флагом --agent claude-code скилл попадет только в Claude Code, с флагом --agent codex только в Codex. В Codex скилл лежит в папке .agents/skills и вызывается через $имя-скилла или меню /skills, а в Claude Code его вызывают через /имя-скилла. Подробно об установке рассказано в инструкции, отдельно для Claude Code и для Codex.

Те же скиллы без настройки читает агент Grok Build от xAI: по документации он подхватывает скиллы, плагины и MCP из Claude Code. Об агенте и подписке Grok я рассказал в статье «Grok: что это за нейросеть».

Дизайн-скиллы в Cursor

Cursor читает тот же формат SKILL.md. В каталоге восемь из десяти скиллов подборки помечены как совместимые с Cursor: Taste Skill, Hallmark, UI UX Pro Max, Color Expert, Impeccable, набор Якуба Крехела, GSAP AI Skills и Web Quality Skills. Они ставятся командой с флагом --agent cursor.

npx skillfoxx add skills/taste-skill --agent cursor

Impeccable в Cursor ставит собственный установщик, запускать его нужно из корня проекта.

npx impeccable install --providers=cursor

Скиллы Эмиля Ковальски в каталоге отмечены только для Claude Code, поэтому для анимации в Cursor берите Motion Design Skill или Transitions.dev. Скилл web-design-guidelines ставится командой Vercel.

npx skills add vercel-labs/agent-skills --skill web-design-guidelines -a cursor

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

Taste Skill

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

В наборе 13 скиллов. Для Codex и других агентов на моделях GPT автор сделал вариант gpt-taste с более строгими правилами сетки, анимации на GSAP и защиты от шаблонной верстки. Скилл redesign-existing-projects сначала проверяет готовый сайт, потом правит сетку, отступы и иерархию. Скиллы imagegen-frontend-web, imagegen-frontend-mobile и brandkit рисуют макеты и доски бренда картинками, код по ним потом пишет агент. В наборе только инструкции в markdown, поэтому риск низкий.

• для Claude Code npx skillfoxx add skills/taste-skill --agent claude-code
• для Codex npx skillfoxx add skills/taste-skill --agent codex

Hallmark

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

• для Claude Code npx skillfoxx add skills/hallmark --agent claude-code
• для Codex npx skillfoxx add skills/hallmark --agent codex

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

UI UX Pro Max

UI UX Pro Max хранит локальную базу: 79 стилей, 192 палитры, 74 шрифтовые пары, 25 типов графиков и 119 UX-правил для 22 стеков. По типу продукта агент выбирает из базы стиль, цвета и шрифты, пишет код и сверяет результат с правилами. Поиск работает на Python 3 без выхода в сеть. Логотипы и брендинг автор вынес в платную версию. Риск средний, потому что установка ставит глобальный npm-пакет, а скилл запускает локальные скрипты.

• для Claude Code npx skillfoxx add skills/ui-ux-pro-max --agent claude-code
• для Codex npx skillfoxx add skills/ui-ux-pro-max --agent codex

У автора есть и свой установщик. Он ставится командой npm install -g ui-ux-pro-max-cli, затем uipro init --ai codex добавляет скилл в Codex. Для Claude Code та же команда работает с параметром --ai claude.

Color Expert

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

• для Claude Code npx skillfoxx add skills/color-expert --agent claude-code
• для Codex npx skillfoxx add skills/color-expert --agent codex

Критика и полировка готового интерфейса

Impeccable

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

Через npx skillfoxx автоматической установки нет, поэтому берите установщик автора и запускайте его из корня проекта. В Codex это npx impeccable install --providers=codex. После установки откройте в Codex меню /hooks и одобрите хук проекта, затем вызовите скилл командой $impeccable. В Claude Code подойдет npx impeccable install --providers=claude или маркетплейс /plugin marketplace add pbakaus/impeccable, после которого Impeccable выбирают в списке /plugin. Работу начинайте с /impeccable init. Шаги для других агентов описаны в карточке.

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

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

• для Claude Code npx skillfoxx add skills/interfaces-skills --agent claude-code
• для Codex npx skillfoxx add skills/interfaces-skills --agent codex
• скилл о деталях в Codex npx skillfoxx add skills/make-interfaces-feel-better --agent codex

Анимация в Claude Code и Codex

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

Набор Эмиля Ковальски, автора библиотеки уведомлений Sonner, состоит из 13 скиллов про анимацию и мелкие детали интерфейса. Скилл animate строит анимацию с нуля и сначала решает, нужна ли она вообще, потом подбирает кривую и длительность. Скилл review-animations проверяет готовую анимацию, find-animation-opportunities ищет места, где движение нужно, и отсекает лишнее. В правилах личный подход автора, включая библиотеки, которыми он пользуется сам. Риск низкий.

В Claude Code скилл вызывают командой /animate, в Codex командой $animate.

• для Claude Code npx skillfoxx add skills/skills-for-designers-and-engineers --agent claude-code
• для Codex npx skillfoxx add skills/skills-for-designers-and-engineers --agent codex

GSAP AI Skills

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

• для Claude Code npx skillfoxx add skills/gsap-ai-skills --agent claude-code или маркетплейс /plugin marketplace add greensock/gsap-skills
• для Codex npx skillfoxx add skills/gsap-ai-skills --agent codex

Проверка перед выкладкой

web-design-guidelines

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

Поэтому для проверки дизайна удобнее поставить один скилл командой Vercel. Флаг --skill выбирает его из набора, и скилл деплоя в проект не попадает.

• для Claude Code npx skills add vercel-labs/agent-skills --skill web-design-guidelines -a claude-code
• для Codex npx skills add vercel-labs/agent-skills --skill web-design-guidelines -a codex

Web Quality Skills

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

• для Claude Code npx skillfoxx add skills/web-quality-skills --agent claude-code
• для Codex npx skillfoxx add skills/web-quality-skills --agent codex

Еще четыре скилла для дизайна

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

Все четыре ставятся в Codex той же командой с флагом --agent codex, например npx skillfoxx add skills/transitions-dev --agent codex. Другие дизайн-скиллы собраны в разделе фронтенда каталога. Если стек нестандартный, опишите проект в подборе с Foxx AI, и он предложит скиллы под ваши фреймворки и задачи.

Соседние задачи дизайнера с агентом

• Из Figma в код: официальный MCP-сервер Figma, Framelink и Talk to Figma.
• Токены с готового сайта: designlang, Dembrandt и extract-design-system.
• Видео и анимированные ролики: Remotion, HyperFrames и Video Use для монтажа.
• Схемы и диаграммы: Archify, Diagram Design, draw.io и Excalidraw.

Скиллы для Codex по другим задачам, ручная установка и MCP описаны в статье «Скиллы для Codex — лучшие наборы и установка».

Презентацию по тексту или документу собирает Kimi Slides, как он работает, я разобрал в статье «Kimi: что это за нейросеть». Если макеты и код нельзя отправлять в облако, открытую модель можно запустить у себя, об этом статья «Локальная нейросеть».