NeVibeCode · подборка · 30

Скиллы для дизайна в Claude Code

Порядок — по числу установок из источника, без них — по звёздам репозитория на GitHub. В список входят только карточки с проверенным описанием.

1

grill-me

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

скилл · Matt Pocock · MIT

1 424 476установок
2

hyperframes

Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта.

скилл · heygen-com · Apache-2.0

1 200 000установок
3

hyperframes-cli

Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке.

скилл · heygen-com · Apache-2.0

1 200 000установок
4

media-use

Находит и генерирует ассеты для видео в HyperFrames — музыку, дикторский голос, аватары и эффекты. Сохраняет всё локально в assets.

скилл · heygen-com · Apache-2.0

1 100 000установок
5

frontend-design официальный

Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает.

скилл · anthropics · Apache-2.0

1 025 790установок
6

hyperframes-registry

Находит и добавляет в проект около 450 готовых визуальных блоков HyperFrames — от титров до шейдеров. Пригодится, когда видеоэффект проще взять из базы, чем верстать с нуля.

скилл · heygen-com · Apache-2.0

1 000 000установок
7

design-mobile-apps

Генерирует экраны мобильных приложений через сервис Sleek и помогает перенести готовый макет в React Native или HTML.

скилл · designed-by-ai · MIT

1 000 000установок
8

prototype

Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом.

скилл · Matt Pocock · MIT

986 201установок
9

grilling

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

скилл · Matt Pocock · MIT

979 543установок
10

codebase-design

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

скилл · Matt Pocock · MIT

850 344установок
11

design-taste-frontend

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

скилл · Leonxlnx · MIT

673 100установок
12

slideshow

Собирает интерактивные презентации HyperFrames со слайдами, фрагментами, переходами и заметками докладчика. Подходит для живого показа, а не рендера в видео.

скилл · heygen-com · Apache-2.0

415 500установок
13

ui-ux-pro-max

Скилл подключает к агенту локальную базу из 119 UX-правил, 74 шрифтовых пар и 192 палитр. Помогает проектировать интерфейсы и проверять доступность.

скилл · nextlevelbuilder · MIT

413 800установок
14

brainstorming

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

скилл · Jesse Vincent · MIT

404 045установок
15

emil-design-eng

Скилл задаёт правила для полировки интерфейсов, компонентов и анимаций. Пригодится, когда UI работает, но требует более точных состояний и переходов.

скилл · emilkowalski · MIT

385 500установок
16

impeccable

Скилл для ИИ-агента: проектирует и переделывает интерфейсы — лендинги, дашборды, формы, экраны iOS и Android. Пригодится, когда вёрстку пора привести в порядок по правилам дизайна.

скилл · pbakaus · Apache-2.0

359 200установок
17

figma

Импортирует ассеты, токены бренда и компоненты из Figma в проект HyperFrames и собирает из кадров анимацию. Пригодится, когда нужно оживить макет, а не вставлять статичные картинки.

скилл · heygen-com · Apache-2.0

329 500установок
18

review-animations

Проверяет код интерфейсных анимаций по принципам Эмиля Ковальски. Помогает убрать дерганые переходы, медленный ease-in и лишнюю нагрузку на процессор.

скилл · emilkowalski · MIT

254 100установок
19

apple-design

Переносит принципы физического интерфейса Apple с докладов WWDC в веб на CSS, Pointer Events и Motion. Пригодится при верстке жестов, шторки и прерываемых пружин.

скилл · emilkowalski · MIT

242 100установок
20

animation-vocabulary

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

скилл · emilkowalski · MIT

236 900установок
21

improve-animations

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

скилл · emilkowalski · MIT

222 000установок
22

remotion-create

Скилл создаёт новый проект Remotion и помогает подготовить видеокомпозицию. Подойдёт, когда видео нужно собирать из React-разметки.

скилл · remotion-dev

208 800установок
23

find-animation-opportunities

Ищет в коде и интерфейсе места для уместной анимации, а лишние варианты отбрасывает. Подходит для проверки идеи «сделать интерфейс живее».

скилл · emilkowalski · MIT

206 800установок
24

remotion-markup

Скилл задаёт правила написания React-разметки для Remotion: анимации через кадры, работа с медиа и эффектами. Пригодится, если вы собираете видео кодом.

скилл · remotion-dev

202 600установок
25

pick-ui-library

Скилл подбирает библиотеку под конкретную задачу фронтенда по списку Эмила Ковальски: тосты, графики, OTP-поля, виртуализация, drag and drop. Запускается только по явному вызову.

скилл · emilkowalski · MIT

183 400установок
26

prototype

Скилл собирает несколько по-настоящему разных вариантов одного куска UI и ставит их за визуальный пикер: переключаете на ходу и выбираете тот, что нравится больше.

скилл · emilkowalski · MIT

172 400установок
27

remotion-studio

Скилл запускает Remotion Studio и открывает предпросмотр видео. Подойдёт, если вы хотите видеть композицию и проверять изменения прямо во время работы.

скилл · remotion-dev

172 100установок
28

animate

Создаёт анимации интерфейса с нуля по принципам Эмиля Ковальски. Пригодится при верстке переходов или оживлении компонентов.

скилл · emilkowalski · MIT

170 400установок
29

vercel-react-view-transitions

Скилл помогает добавлять переходы между состояниями React через View Transition API. Подойдёт для маршрутов, общих элементов и появления компонентов.

скилл · vercel · MIT

166 700установок
30

ask-sonner

Справочник по Sonner, React-библиотеке тостов: подключение, вызовы toast(), стили и разбор поломок.

скилл · emilkowalski · MIT

138 600установок

Скиллы для дизайна в Claude Code

frontend-design официальный

Другие подборки