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

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

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

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

- [gsap-web](https://affpapa.org/nevibecode/skills/gsap-web.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл помогает настраивать анимации на GSAP: от таймлайнов и ScrollTrigger до эффектов SplitText, Flip и плавной прокрутки с Lenis.
- [micro-interaction](https://affpapa.org/nevibecode/skills/micro-interaction.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл для мелкой анимации интерфейса: ховеры, тоглы, тосты, шторки, перестановка списков.
- [atomic-design-fundamentals](https://affpapa.org/nevibecode/skills/atomic-design-fundamentals.md) — скилл · TheBushidoCollective · Claude Code, Codex, Cursor +3 · 766 установок — Помогает разложить компоненты интерфейса по уровням Atomic Design: от токенов до страниц.
- [tailwindcss](https://affpapa.org/nevibecode/skills/pedro-nauck-tailwindcss.md) — скилл · Pedro Nauck · Claude Code, Codex, Cursor +3 · 447 установок — Скилл настраивает работу агента с Tailwind CSS v4.
- [scenario-textures](https://affpapa.org/nevibecode/skills/scenario-textures.md) — скилл · scenario-labs · Claude Code, Codex, Cursor +3 · 500 установок — Скилл настраивает генерацию бесшовных текстур, апскейл с сохранением тайлинга и сборку PBR-материалов через MCP-сервер Scenario.
- [gpt-taste](https://affpapa.org/nevibecode/skills/tasteskill-gpt-taste.md) — скилл · tasteskill · Claude Code, Codex, Cursor +3 · 398 установок — Заставляет агента сначала генерировать визуальные референсы страниц, детально их разбирать и только потом писать код фронтенда.
- [app-icon](https://affpapa.org/nevibecode/skills/melvynx-app-icon.md) — скилл · Melvynx · Claude Code, Codex, Cursor +3 · 396 установок — Скилл создаёт объёмные иконки для iOS и Android в проектах Expo, а затем нарезает их под требования сторов.
- [design-taste](https://affpapa.org/nevibecode/skills/design-taste.md) — скилл · h3nryprod01 · Claude Code, Codex, Cursor +3 · 720 установок — Скилл помогает создавать и дорабатывать веб-интерфейсы, разбирая визуальную иерархию, типографику, цвет, отступы и анимацию.
- [screenshot-to-code](https://affpapa.org/nevibecode/skills/screenshot-to-code.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 1300 установок — Превращает скриншот, макет или экспорт из Figma в рабочий фронтенд-код и сверяет результат с картинкой.
- [product-taste](https://affpapa.org/nevibecode/skills/product-taste.md) — скилл · RefoundAI · Claude Code, Codex, Cursor +3 · 397 установок — Скилл помогает разбирать, почему продукт ощущается качественным, и принимать решения до того, как появятся метрики.
- [instagram-carousel](https://affpapa.org/nevibecode/skills/instagram-carousel.md) — скилл · marcolang · Claude Code, Codex, Cursor +3 · 817 установок — Собирает карусель для Instagram как прокручиваемый HTML-превью, а каждый слайд отдаёт готовым PNG 1080×1350.
- [page-transition-animation](https://affpapa.org/nevibecode/skills/page-transition-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2300 установок — Скилл для анимации переходов между страницами в Next.js App Router и починки неработающего exit в Framer Motion AnimatePresence.
- [glassmorphism](https://affpapa.org/nevibecode/skills/glassmorphism.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл для ИИ-агента, который добавляет в интерфейс матовое стекло: размытие фона, светлая кромка, слоистые тени и жидкое преломление.
- [tool-foundation-sprint-approach-options](https://affpapa.org/nevibecode/skills/tool-foundation-sprint-approach-options.md) — скилл · product-on-purpose · Claude Code, Codex, Cursor +3 · 622 установки — Скилл для утренней сессии второго дня Foundation Sprint.
- [presentation-design](https://affpapa.org/nevibecode/skills/presentation-design.md) — скилл · jwynia · Claude Code, Codex, Cursor +3 · 2500 установок — Скилл проектирует презентации вокруг аудитории: структура, визуальная ясность, когнитивная нагрузка.
- [tool-design-sprint-prototype-plan](https://affpapa.org/nevibecode/skills/tool-design-sprint-prototype-plan.md) — скилл · product-on-purpose · Claude Code, Codex, Cursor +3 · 620 установок — Готовит план четвёртого дня Design Sprint: роли команды, бриф прототипа и сценарий интервью.
- [tool-design-sprint-map-and-target](https://affpapa.org/nevibecode/skills/tool-design-sprint-map-and-target.md) — скилл · product-on-purpose · Claude Code, Codex, Cursor +3 · 620 установок — Помогает провести первый день дизайн-спринта и собрать карту пути, долгосрочную цель, риски и целевой момент для прототипа.
- [tool-design-sprint-decide-and-storyboard](https://affpapa.org/nevibecode/skills/tool-design-sprint-decide-and-storyboard.md) — скилл · product-on-purpose · Claude Code, Codex, Cursor +3 · 620 установок — Ведёт среду дизайн-спринта: раскладка скетчей, тепловая карта, критика, соломенный опрос, суперголос Decider и раскадровка на 5–15 шагов.
- [stop-describing-ui](https://affpapa.org/nevibecode/skills/stop-describing-ui.md) — скилл · artouc · Claude Code, Codex, Cursor +3 · 717 установок — Скилл вычищает пояснительный текст из UI: заголовки, пустые состояния, подписи кнопок, подсказки и онбординг.
- [tool-design-sprint-sketch](https://affpapa.org/nevibecode/skills/tool-design-sprint-sketch.md) — скилл · product-on-purpose · Claude Code, Codex, Cursor +3 · 616 установок — Структурирует второй день дизайн-спринта: молниеносные демо и четыре шага независимого скетча.
- [using-ui-stack](https://affpapa.org/nevibecode/skills/using-ui-stack.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 539 установок — Заставляет агента строить интерфейс по фиксированным правилам: сетка 8px, цвета 60-30-10, типографика, тёмная тема и состояния интерактивных элементов.
- [qt-figma-token-extraction](https://affpapa.org/nevibecode/skills/qt-figma-token-extraction.md) — скилл · qt-ai-skills · Claude Code, Codex, Cursor +3 · 439 установок — Достаёт переменные, текстовые стили и токены из файла Figma и превращает их в design-tokens.json и готовые QML-синглтоны с общим Theme.
- [ios-liquid-glass](https://affpapa.org/nevibecode/skills/ios-liquid-glass.md) — скилл · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 803 установки — Справочник по API Liquid Glass из iOS 26+: модификаторы glassEffect, контейнеры, морфинг-переходы и навигация.
- [resend-design-skills](https://affpapa.org/nevibecode/skills/resend-design-skills.md) — скилл · resend · Claude Code, Codex, Cursor +3 · 1200 установок — Направляет ассистента к правилам визуального стиля и айдентики Resend.
- [ui-design](https://affpapa.org/nevibecode/skills/frappe-ui-design.md) — скилл · frappe · Claude Code, Codex, Cursor +3 · 832 установки — Скилл задаёт агенту дизайнерские правила: сетка, типографика, цвет, отступы.
- [qt-figma-component-generation](https://affpapa.org/nevibecode/skills/qt-figma-component-generation.md) — скилл · qt-ai-skills · Claude Code, Codex, Cursor +3 · 437 установок — Читает компоненты Figma через MCP и пишет по ним QML-контролы на Qt Quick Controls 2.
- [mapbox-style-patterns](https://affpapa.org/nevibecode/skills/mapbox-style-patterns.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 2300 установок — Готовые наборы слоёв и стилей Mapbox для типовых карт: поиск заведений, недвижимость, маршруты, доставка.
- [hig](https://affpapa.org/nevibecode/skills/hig.md) — скилл · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 786 установок — Локальный справочник Apple Human Interface Guidelines в Markdown для проверки размеров кнопок, Dynamic Type, терминологии и системных компонентов без выхода в сеть.
- [ai-native-ux](https://affpapa.org/nevibecode/skills/ai-native-ux.md) — скилл · RefoundAI · Claude Code, Codex, Cursor +3 · 373 установки — Помогает проектировать интерфейсы для продуктов на вероятностных моделях: где отдать решение алгоритму, а где оставить человеку.
- [tailwindcss-animations](https://affpapa.org/nevibecode/skills/tailwindcss-animations.md) — скилл · JosiahSiegel · Claude Code, Codex, Cursor +3 · 2400 установок — Скилл по анимациям и переходам Tailwind CSS: встроенные утилиты, свои @keyframes, reduced-motion, Framer Motion.
- [scenario-image-editing](https://affpapa.org/nevibecode/skills/scenario-image-editing.md) — скилл · scenario-labs · Claude Code, Codex, Cursor +3 · 443 установки — Обрабатывает готовые изображения через MCP-модели Scenario: апскейлит картинки, правит цвета по LUT и удаляет водяные знаки.
- [ui-design-system](https://affpapa.org/nevibecode/skills/samhvw8-ui-design-system.md) — скилл · samhvw8 · Claude Code, Codex, Cursor +3 · 3200 установок — Скилл для сборки и разбора React-интерфейсов на TailwindCSS, Radix UI и shadcn/ui.
- [scenario-asset-analysis](https://affpapa.org/nevibecode/skills/scenario-asset-analysis.md) — скилл · scenario-labs · Claude Code, Codex, Cursor +3 · 435 установок — Извлекает текстовые описания и карты условий из генераций Scenario, а также находит ассеты через поиск.
- [design-style-picker](https://affpapa.org/nevibecode/skills/design-style-picker.md) — скилл · daymade · Claude Code, Codex, Cursor +3 · 342 установки — Генерирует пачку вариантов визуального стиля и даёт выбрать нужный по изображениям, а не по описанию.
- [frontend-design](https://affpapa.org/nevibecode/skills/agent-skills-frontend-design.md) — скилл · agent-skills · Claude Code, Codex, Cursor +3 · 2300 установок — Аудит существующего CSS, извлечение токенов и генерация палитр, типографики и компонентов.
- [lottie-animation](https://affpapa.org/nevibecode/skills/lottie-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 2100 установок — Помогает агенту подключить анимацию из After Effects, управлять воспроизведением и перекрашивать её во время работы приложения.
- [wireframe-prototyping](https://affpapa.org/nevibecode/skills/wireframe-prototyping.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл помогает набросать каркас интерфейса и собрать прототип до того, как начнётся разработка.
- [hand-drawn-diagrams](https://affpapa.org/nevibecode/skills/muthuishere-hand-drawn-diagrams.md) — скилл · muthuishere · Claude Code, Codex, Cursor +3 · 620 установок — Рисует от руки диаграммы, блок-схемы, вайрфреймы и макеты страниц в формате Excalidraw.
- [web-3d-asset-pipeline](https://affpapa.org/nevibecode/skills/web-3d-asset-pipeline.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 58 установок — Помогает подготовить GLB и glTF 2.0 для браузерной игры: от очистки модели до проверки её структуры.
- [window-management](https://affpapa.org/nevibecode/skills/window-management.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 58 установок — Помогает настраивать окна и сцены SwiftUI в macOS 15+: убирать лишний хром, задавать области перетаскивания, правила размещения и восстановления.

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

## Уточнить
[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
