# Скиллы по теме «Дизайн»

Скиллы по теме «Дизайн»: у каждой карточки — что делает, команда установки и примеры запросов.

2133 карточки · страница 3 из 54

- HTML: https://affpapa.org/nevibecode/skills/topic/design?page=3
- Инструкция для агента: https://affpapa.org/nevibecode/agents.md

- [wireframe-portal-title](https://affpapa.org/nevibecode/skills/wireframe-portal-title.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Скилл создаёт анимированный 3D-заголовок с эффектом портала и заменой фразы.
- [canopy-part-title](https://affpapa.org/nevibecode/skills/canopy-part-title.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Блок HyperFrames, в котором плотный слой листьев пролетает через кадр, расходится и открывает заголовок.
- [code-slice-hero](https://affpapa.org/nevibecode/skills/code-slice-hero.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Анимирует смену заголовка сеткой плиток с переворотом ячеек через WebGL 2 и Canvas 2D.
- [glass-shard-title](https://affpapa.org/nevibecode/skills/glass-shard-title.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Собирает заголовок из осколков стекла: они летят сквозь туман, поворачиваются и складываются в буквы.
- [cuboid-carousel](https://affpapa.org/nevibecode/skills/cuboid-carousel.md) — скилл · heygen-com · Claude Code, Codex, Cursor +3 · 10000 установок — Скилл собирает 3D-карусель из скруглённых параллелепипедов с контентом: они влетают справа, едут волной и уходят влево.
- [kami](https://affpapa.org/nevibecode/skills/kami.md) — скилл · tw93 · Claude Code, Codex, Cursor +3 · 13300 установок — Скилл вёрстки документов по шаблонам Kami: резюме, одностраничники, письма, портфолио, слайды и лендинги.
- [data-visualization](https://affpapa.org/nevibecode/skills/anthropics-data-visualization.md) — скилл (официальный Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 13800 установок — Подбирает подходящие типы графиков под структуру данных и генерирует код на Python с matplotlib, seaborn и plotly.
- [nuxt-ui](https://affpapa.org/nevibecode/skills/nuxt-ui.md) — скилл · nuxt · Claude Code, Codex, Cursor +3 · 19800 установок — Помогает агенту собирать интерфейсы на базе @nuxt/ui v4, настраивать темы Tailwind CSS и правильно выбирать компоненты библиотеки.
- [figma-implement-design](https://affpapa.org/nevibecode/skills/openai-figma-implement-design.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 6700 установок — Скилл переводит макеты Figma в код интерфейса с сохранением структуры, токенов и визуального вида.
- [bmad-agent-ux-designer](https://affpapa.org/nevibecode/skills/bmad-agent-ux-designer.md) — скилл · bmad-code-org · Claude Code, Codex, Cursor +3 · 11800 установок — Подключает к проекту субагента Sally для проектирования пользовательского опыта и подготовки UX-спецификаций.
- [bmad-ux](https://affpapa.org/nevibecode/skills/bmad-ux.md) — скилл · bmad-code-org · Claude Code, Codex, Cursor +3 · 11600 установок — Фиксирует видение интерфейса в файлах DESIGN.md и EXPERIENCE.md.
- [frontend-patterns](https://affpapa.org/nevibecode/skills/frontend-patterns.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5900 установок — Скилл подсказывает паттерны для React и Next.js: компоненты, состояние, загрузка данных и производительность.
- [imagegen](https://affpapa.org/nevibecode/skills/imagegen.md) — скилл (официальный OpenAI) · openai · Claude Code, Codex, Cursor +3 · 5700 установок — Скилл создаёт и редактирует растровые изображения: иллюстрации, текстуры, спрайты и мокапы.
- [playground](https://affpapa.org/nevibecode/skills/playground.md) — скилл (официальный Anthropic) · Anthropic · Claude Code · 7967 установок — Создаёт интерактивные HTML-песочницы с настройками, предпросмотром и готовым промптом.
- [app-store-screenshots](https://affpapa.org/nevibecode/skills/parthjadhav-app-store-screenshots.md) — скилл · ParthJadhav · Claude Code, Codex, Cursor +3 · 15000 установок — Собирает редактор на Next.js и ShadCN, в котором вы верстаете и выгружаете скриншоты для App Store и Google Play.
- [better-ui](https://affpapa.org/nevibecode/skills/better-ui.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 39300 установок — Скилл задаёт точные правила для радиусов, теней, иконок и анимаций интерфейса.
- [gpt-image-2-style-library](https://affpapa.org/nevibecode/skills/gpt-image-2-style-library.md) — скилл · freestylefly · Claude Code, Codex, Cursor +3 · 4000 установок — Скилл превращает пользовательские идеи в готовые промпты для GPT-Image2 на основе библиотеки стилей awesome-gpt-image-2.
- [frontend-slides](https://affpapa.org/nevibecode/skills/frontend-slides.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5500 установок — Скилл создаёт анимационные HTML-презентации с нуля и преобразует PPT/PPTX в веб-слайды.
- [web-design-engineer](https://affpapa.org/nevibecode/skills/web-design-engineer.md) — скилл · ConardLi · Claude Code, Codex, Cursor +3 · 8700 установок — Скилл настраивает агента на вёрстку веб-интерфейсов на HTML, CSS, JavaScript и React: дашбордов, прототипов и анимаций.
- [frontend-design-direction](https://affpapa.org/nevibecode/skills/frontend-design-direction.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5300 установок — Скилл задаёт направление для веб-интерфейсов: помогает продумать и проверить визуальную иерархию, состояния, адаптивность и доступность.
- [liquid-glass-design](https://affpapa.org/nevibecode/skills/liquid-glass-design.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5200 установок — Скилл для Claude и других ИИ-редакторов: подсказывает агенту, как собрать интерфейс в стиле Liquid Glass из iOS 26.
- [stitch::generate-design](https://affpapa.org/nevibecode/skills/stitchgenerate-design.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10800 установок — Скилл превращает текстовое описание или картинку в готовый экран интерфейса через Stitch MCP, а потом правит его точечными промптами.
- [stitch::extract-design-md](https://affpapa.org/nevibecode/skills/stitchextract-design-md.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10600 установок — Извлекает дизайн-систему в файл DESIGN.md прямо из исходников фронтенда без сборки проекта.
- [blender-motion-state-inspection](https://affpapa.org/nevibecode/skills/blender-motion-state-inspection.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5000 установок — Помогает проверить персонажей и анимацию в Blender по реальным координатам костей, когда обычных скриншотов недостаточно.
- [design-system](https://affpapa.org/nevibecode/skills/affaan-m-design-system.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 5000 установок — Собирает дизайн-систему из существующей вёрстки или проверяет её на визуальную консистентность: токены, оценка по десяти критериям, поиск шаблонных ИИ-приёмов.
- [better-typography](https://affpapa.org/nevibecode/skills/better-typography.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 34200 установок — Проверяет типографику интерфейса и предлагает правки в системе стилей проекта.
- [remotion-video-creation](https://affpapa.org/nevibecode/skills/remotion-video-creation.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4900 установок — Скилл подсказывает агенту правила работы с Remotion в React: от анимаций и звука до субтитров, графиков и переходов.
- [stitch::manage-design-system](https://affpapa.org/nevibecode/skills/stitchmanage-design-system.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10300 установок — Управляет дизайн-системой Stitch через MCP-инструменты: извлекает данные экранов, создаёт токены и применяет их к выбранным экранам.
- [stitch::code-to-design](https://affpapa.org/nevibecode/skills/stitchcode-to-design.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10200 установок — Переносит существующий фронтенд в Stitch: извлекает HTML и дизайн-систему, затем загружает их в проект.
- [baseline-ui](https://affpapa.org/nevibecode/skills/baseline-ui.md) — скилл · ibelick · Claude Code, Codex, Cursor +3 · 24200 установок — Очищает фронтенд-код от типичных артефактов нейросетей: правит отступы, сетку, шрифты и анимации.
- [baoyu-diagram](https://affpapa.org/nevibecode/skills/baoyu-diagram.md) — скилл · JimLiu · Claude Code, Codex, Cursor +3 · 15400 установок — Генерирует архитектурные схемы, блок-схемы и таймлайны в виде автономных тёмных SVG-файлов со встроенными стилями прямо в диалоге с агентом.
- [brand-landingpage](https://affpapa.org/nevibecode/skills/brand-landingpage.md) — скилл · Travis D. Elliott · Claude Code, Codex, Cursor · 39476 установок — Скилл проводит интервью о продукте и визуальном стиле, затем помогает создать лендинг через Stitch.
- [stitch::upload-to-stitch](https://affpapa.org/nevibecode/skills/stitchupload-to-stitch.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 9900 установок — Скилл отправляет локальные изображения, макеты, разметку и HTML-страницы в проект Stitch напрямую по HTTP в обход ограничений вывода инструментов MCP.
- [stitch::extract-static-html](https://affpapa.org/nevibecode/skills/stitchextract-static-html.md) — скилл (официальный Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10000 установок — Скилл сохраняет отрендеренную страницу как автономный HTML-файл, встраивая стили и изображения.
- [motion-advanced](https://affpapa.org/nevibecode/skills/motion-advanced.md) — скилл · jeff · Claude Code, Codex, Cursor +3 · 4600 установок — Паттерны сложной анимации и жестов для React и Next.js: драг-энд-дроп, цепочки через useAnimate и SVG.
- [manim-video](https://affpapa.org/nevibecode/skills/manim-video.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4700 установок — Собирает технические объясняющие ролики в Manim: графики, схемы систем и продуктовые walkthrough.
- [make-interfaces-feel-better](https://affpapa.org/nevibecode/skills/affaan-m-make-interfaces-feel-better.md) — скилл · affaan-m · Claude Code, Codex, Cursor +3 · 4700 установок — Скилл помогает находить и исправлять детали интерфейса: отступы, типографику, состояния элементов и анимации.
- [motion-patterns](https://affpapa.org/nevibecode/skills/motion-patterns.md) — скилл · jeff · Claude Code, Codex, Cursor +3 · 4700 установок — Скилл добавляет готовые паттерны анимации для React и Next.js.
- [better-colors](https://affpapa.org/nevibecode/skills/better-colors.md) — скилл · jakubkrehel · Claude Code, Codex, Cursor +3 · 32600 установок — Скилл проверяет палитры и строит систему цветовых токенов.
- [ppt-generation](https://affpapa.org/nevibecode/skills/ppt-generation.md) — скилл · bytedance · Claude Code, Codex, Cursor +3 · 5200 установок — Генерирует слайды для презентаций в формате PPTX через создание картинок к каждому экрану.

Дальше: https://affpapa.org/nevibecode/skills/topic/design.md?page=4

## Уточнить
[ui](https://affpapa.org/nevibecode/tag/ui.md) · [animation](https://affpapa.org/nevibecode/tag/animation.md) · [css](https://affpapa.org/nevibecode/tag/css.md) · [design-system](https://affpapa.org/nevibecode/tag/design-system.md) · [accessibility](https://affpapa.org/nevibecode/tag/accessibility.md) · [react](https://affpapa.org/nevibecode/tag/react.md) · [ux](https://affpapa.org/nevibecode/tag/ux.md) · [image-generation](https://affpapa.org/nevibecode/tag/image-generation.md) · [tailwind](https://affpapa.org/nevibecode/tag/tailwind.md) · [typography](https://affpapa.org/nevibecode/tag/typography.md) · [html](https://affpapa.org/nevibecode/tag/html.md) · [design-tokens](https://affpapa.org/nevibecode/tag/design-tokens.md)

## Сузить этот список
Параметры: `?platform=<claude-code|codex|cursor|copilot|gemini-cli|windsurf|…>`, `&topic=<…>`, `&sort=installs|stars|new|updated` — значения в https://affpapa.org/nevibecode/agents.md

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md
