# Скиллы по теме «Дизайн» Скиллы по теме «Дизайн»: у каждой карточки — что делает, команда установки и примеры запросов. 2133 карточки · страница 35 из 54 - HTML: https://affpapa.org/nevibecode/skills/topic/design?page=35 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [visual-emphasis-and-hierarchy](https://affpapa.org/nevibecode/skills/visual-emphasis-and-hierarchy.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 874 установки — Задаёт правила визуальной иерархии в интерфейсе: акценты на кнопках, контраст, отступы и выделение текста. - [wcag-accessibility](https://affpapa.org/nevibecode/skills/wcag-accessibility.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 873 установки — Скилл помогает проектировать и проверять интерфейсы по WCAG 2.2 AA. - [button-states](https://affpapa.org/nevibecode/skills/button-states.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 877 установок — Скилл описывает шесть состояний интерактивных элементов и выводит цвета hover и active из базового цвета по HSL. - [core-animation](https://affpapa.org/nevibecode/skills/core-animation.md) — скилл · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 400 установок — Скилл помогает агенту находить справку по Core Animation и отвечать на вопросы о слоях и анимациях. - [hig-project-context](https://affpapa.org/nevibecode/skills/hig-project-context.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 628 установок — Собирает общий документ о вашем Apple-проекте, чтобы остальные HIG-скиллы не задавали одни и те же вопросы заново. - [hig-components-system](https://affpapa.org/nevibecode/skills/hig-components-system.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 625 установок — Скилл передаёт агенту правила Apple HIG для виджетов, Live Activities и уведомлений. - [component-family-consistency](https://affpapa.org/nevibecode/skills/component-family-consistency.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 874 установки — Скилл следит, чтобы кнопки, поля ввода, бейджи и пилюли делили радиус, цвета, тени, границы и отступы. - [loading-states-and-perceived-performance](https://affpapa.org/nevibecode/skills/loading-states-and-perceived-performance.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 871 установка — Скилл для ИИ-кодинга, который помогает выбрать спиннер, скелетон или прогресс-бар и сделать интерфейс быстрее на ощупь. - [generate-ui-from-brand](https://affpapa.org/nevibecode/skills/generate-ui-from-brand.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 870 установок — Превращает URL сайта или файл DESIGN.md в дизайн-токены, решения по UX и готовую спецификацию интерфейса. - [micro-interactions](https://affpapa.org/nevibecode/skills/dembrandt-micro-interactions.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 869 установок — Скилл для мелких осмысленных анимаций: переключатели, иконки, моменты успеха. - [databricks-app-design](https://affpapa.org/nevibecode/skills/databricks-app-design.md) — скилл · databricks · Claude Code, Codex, Cursor +3 · 315 установок — Помогает проектировать data-экраны Databricks Apps на AppKit/React. - [hig-technologies](https://affpapa.org/nevibecode/skills/hig-technologies.md) — скилл · raintree-technology · Claude Code, Codex, Cursor +3 · 620 установок — Скилл подсказывает правила Apple HIG для Siri, Apple Pay, HealthKit, ARKit, iCloud и других системных технологий прямо в чате с агентом. - [ui-design](https://affpapa.org/nevibecode/skills/pymodel-ui-design.md) — скилл · PyModel · Claude Code, Codex, Cursor +3 · 513 установок — Свод правил фронтенд-дизайна из 42 пунктов в 8 категориях. - [color-palette-extractor](https://affpapa.org/nevibecode/skills/color-palette-extractor.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 609 установок — Достаёт доминирующие цвета из картинки, скриншота или сайта и собирает из них палитру с проверкой контраста. - [ux-design](https://affpapa.org/nevibecode/skills/ux-design.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл задаёт агенту правила UX-проектирования: от исследования пользователей до доступности и адаптивной вёрстки. - [lottie](https://affpapa.org/nevibecode/skills/lottie.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1100 установок — Правила для ИИ-агента, который пишет Lottie-анимации на веб-страницах: формат dotLottie, ленивая загрузка, выбор рендерера и доступность. - [status-colors-and-errors](https://affpapa.org/nevibecode/skills/status-colors-and-errors.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 859 установок — Скилл задаёт правила для семантических цветов статусов и текстов ошибок: сколько цветов держать, что каждый значит и как написать сообщение с выходом из ситуации. - [elevation-and-depth](https://affpapa.org/nevibecode/skills/elevation-and-depth.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 854 установки — Задаёт правила для теней, скруглений и глубины интерфейса в CSS. - [extract-design](https://affpapa.org/nevibecode/skills/dembrandt-extract-design.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 853 установки — Скилл извлекает с живого сайта цвета, типографику, отступы и стили компонентов. - [sticky-and-fixed-elements](https://affpapa.org/nevibecode/skills/sticky-and-fixed-elements.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 855 установок — Помогает решить, что остаётся на экране при прокрутке: липкие заголовки, нижние панели, плавающие кнопки, закреплённые шапки таблиц. - [data-display-and-selection](https://affpapa.org/nevibecode/skills/data-display-and-selection.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 855 установок — Помогает агенту проектировать таблицы, списки и сетки: режимы просмотра, массовые действия, сортировка, поиск и выбор строк. - [notifications-and-recovery](https://affpapa.org/nevibecode/skills/notifications-and-recovery.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 854 установки — Скилл для проектирования уведомлений и состояний ошибок: тосты, инлайн-ошибки, баннеры и пути восстановления. - [tui-design](https://affpapa.org/nevibecode/skills/tui-design.md) — скилл · hyperb1iss · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для проектирования TUI: раскладка панелей, цвета, навигация с клавиатуры и асинхронные состояния. - [scroll-areas](https://affpapa.org/nevibecode/skills/scroll-areas.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 843 установки — Скилл учит агента избегать лишней вложенной прокрутки в вёрстке и ограничивать скролл одной осью там, где контейнер действительно нужен. - [ui-context-and-scope](https://affpapa.org/nevibecode/skills/ui-context-and-scope.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 842 установки — Скилл задаёт правила ориентации пользователя в сложных интерфейсах: хлебные крошки, границы секций и баннеры имперсонации. - [iphone-duo-dual-pane-patterns](https://affpapa.org/nevibecode/skills/iphone-duo-dual-pane-patterns.md) — скилл · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 393 установки — Помогает проектировать двухэкранный интерфейс для iPhone Duo, вычислять размеры панелей и связывать колбэки шарнира. - [real-world-metaphors](https://affpapa.org/nevibecode/skills/real-world-metaphors.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 841 установка — Помогает выбрать между карточкой, каруселью, drawer и аккордеоном, когда проектируешь компоненты и навигацию. - [21st-design-sync](https://affpapa.org/nevibecode/skills/21st-design-sync.md) — скилл · 21st-dev · Claude Code, Codex, Cursor +3 · 1700 установок — Собирает переменные темы shadcn и Tailwind из CSS-файлов проекта и выгружает их как публичную тему в каталог 21st.dev через CLI. - [global-toolbar-controls](https://affpapa.org/nevibecode/skills/global-toolbar-controls.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 834 установки — Скилл задаёт правила вёрстки переключателей валюты, языка и единиц измерения. - [webflow-mcp:designer-tools](https://affpapa.org/nevibecode/skills/webflow-mcpdesigner-tools.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 841 установка — Скилл помогает создавать и редактировать страницы, элементы и компоненты Webflow. - [figma-design-to-code](https://affpapa.org/nevibecode/skills/figma-design-to-code.md) — скилл (официальный OpenAI) · Figma · Codex, ChatGPT · 30 установок — Помогает перенести выбранный узел Figma в код проекта с учётом его стека и компонентов. - [framer-motion](https://affpapa.org/nevibecode/skills/dylantarre-framer-motion.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл помогает ИИ применять 12 классических принципов анимации Диснея во Framer Motion для React. - [stock-photo-finder](https://affpapa.org/nevibecode/skills/stock-photo-finder.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 582 установки — Скилл для одновременного поиска бесплатных стоковых фотографий с фильтрацией по лицензии, ориентации и цветовой гамме. - [dembrandt](https://affpapa.org/nevibecode/skills/dembrandt.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 822 установки — Прогоняет задачу по интерфейсу через шесть этапов: бренд, токены, вёрстка, компоненты, полировка и доступность. - [premium-frontend-design](https://affpapa.org/nevibecode/skills/premium-frontend-design.md) — скилл · kv0906 · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл задаёт правила вёрстки нестандартных интерфейсов и лендингов. - [font-pairing-suggester](https://affpapa.org/nevibecode/skills/font-pairing-suggester.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 578 установок — Скилл предлагает сочетания шрифтов под задачу и показывает иерархию заголовков с текстом. - [pixel-art](https://affpapa.org/nevibecode/skills/omer-metin-pixel-art.md) — скилл · omer-metin · Claude Code, Codex, Cursor +3 · 520 установок — Скилл даёт агенту знания по пиксель-арту: палитры, дизеринг, субпиксельная анимация, тайлы и ограничения ретро-железа. - [webflow-mcp:flowkit-naming](https://affpapa.org/nevibecode/skills/webflow-mcpflowkit-naming.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 824 установки — Приводит имена CSS-классов в Webflow к системе Flowkit: аудит существующих, генерация новых и применение через MCP-инструменты. - [presentation-design-enhancer](https://affpapa.org/nevibecode/skills/presentation-design-enhancer.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 573 установки — Превращает перегруженные текстом слайды в визуальную подачу: предлагает раскладку, иконки и способы показать данные. - [dashboards-and-real-time-visualization](https://affpapa.org/nevibecode/skills/dashboards-and-real-time-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 29 установок — Проектирует дашборды и системы живой визуализации данных. Дальше: https://affpapa.org/nevibecode/skills/topic/design.md?page=36 ## Уточнить [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=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — значения в https://affpapa.org/nevibecode/agents.md --- NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md