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

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

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

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

- [frontend-designer](https://affpapa.org/nevibecode/skills/frontend-designer.md) — скилл · jamesrochabrun · Claude Code, Codex, Cursor +3 · 335 установок — Скилл для сборки доступных и адаптивных компонентов интерфейса: дизайн-токены, современный CSS, паттерны React, Vue и Svelte.
- [web-design-expert](https://affpapa.org/nevibecode/skills/web-design-expert.md) — скилл · curiositech · Claude Code, Codex, Cursor +3 · 439 установок — Проектирует веб-интерфейсы, айдентику бренда и палитры в формате OKLCH.
- [tailwind-v4](https://affpapa.org/nevibecode/skills/tailwind-v4.md) — скилл · existential-birds · Claude Code, Codex, Cursor +3 · 812 установок — Скилл для ИИ-агента, который подсказывает, как настроить Tailwind CSS v4: тема в CSS, токены дизайна, цвета OKLCH и тёмная тема.
- [color-theory-palette-harmony-expert](https://affpapa.org/nevibecode/skills/color-theory-palette-harmony-expert.md) — скилл · curiositech · Claude Code, Codex, Cursor +3 · 430 установок — Скилл для подбора цветовых палитр и последовательностей фото: перцептивные пространства LAB и OKLCH, расстояние землекопа, чередование тёплых и холодных тонов.
- [figma-code-connect](https://affpapa.org/nevibecode/skills/figma-code-connect.md) — скилл (официальный OpenAI) · Figma · Codex, ChatGPT · 28 установок — Создаёт и обновляет шаблоны Code Connect, связывая компоненты Figma с фрагментами кода.
- [motion-designer](https://affpapa.org/nevibecode/skills/motion-designer.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл для ИИ-агента, который помогает проектировать движение в интерфейсе: тайминги, кривые easing, спецификации для разработчика.
- [app-store-screens](https://affpapa.org/nevibecode/skills/app-store-screens.md) — скилл · Pika-Labs · Claude Code, Codex, Cursor +3 · 1700 установок — Собирает комплект из 5–6 маркетинговых скриншотов для App Store в формате 1290×2796 на базе брендбука и исходных экранов приложения.
- [build-a-brand](https://affpapa.org/nevibecode/skills/build-a-brand.md) — скилл · Pika-Labs · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл создаёт айдентику бренда по описанию идеи, сайту или референсам: от быстрого набора до PDF-гайдлайна на 14–16 страниц.
- [site-specification](https://affpapa.org/nevibecode/skills/site-specification.md) — скилл · cline · Claude Code, Codex, Cursor +3 · 2100 установок — Превращает короткое описание проекта или логотип в готовую JSON-спецификацию сайта со структурой блоков, целевой аудиторией и шрифтами Google Fonts.
- [ui-design](https://affpapa.org/nevibecode/skills/mindrally-ui-design.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 981 установка — Задаёт агенту правила вёрстки и интерфейсов: доступность, адаптивность, производительность.
- [shadcn](https://affpapa.org/nevibecode/skills/pproenca-shadcn.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 724 установки — Скилл с 58 правилами для shadcn/ui: подсказывает агенту, как правильно ставить компоненты, писать формы и не ломать доступность.
- [chrome-extension-ui](https://affpapa.org/nevibecode/skills/chrome-extension-ui.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 719 установок — Набор правил по интерфейсу расширений Chrome: где ставить popup, где side panel, как сделать доступную навигацию и понятные состояния загрузки.
- [image-optimization](https://affpapa.org/nevibecode/skills/aj-geddes-image-optimization.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 656 установок — Скилл подсказывает агенту, как сжать изображения и перевести их в современные форматы.
- [diagram-to-image](https://affpapa.org/nevibecode/skills/diagram-to-image.md) — скилл · sugarforever · Claude Code, Codex, Cursor +3 · 508 установок — Переводит диаграммы Mermaid и таблицы Markdown в PNG-файлы.
- [brand-designer](https://affpapa.org/nevibecode/skills/brand-designer.md) — скилл · daffy0208 · Claude Code, Codex, Cursor +3 · 1300 установок — Помогает собрать айдентику бренда: логотип, палитру, типографику и гайдлайны.
- [ux-audit-rethink](https://affpapa.org/nevibecode/skills/ux-audit-rethink.md) — скилл · mastepanoski · Claude Code, Codex, Cursor +3 · 843 установки — Проводит полный UX-аудит продукта по методологии IxDF и предлагает варианты редизайна.
- [typography-expert](https://affpapa.org/nevibecode/skills/typography-expert.md) — скилл · curiositech · Claude Code, Codex, Cursor +3 · 413 установок — Подбирает шрифтовые пары, настраивает вариативные оси, плавные шкалы и веб-шрифты без заезженных шаблонов вроде Inter и Roboto.
- [xiaohongshu-images](https://affpapa.org/nevibecode/skills/xiaohongshu-images.md) — скилл · iamzifei · Claude Code, Codex, Cursor +3 · 2000 установок — Преобразует Markdown, HTML или текст в оформленную HTML-страницу и последовательность изображений формата 3:4 для Xiaohongshu.
- [layout-paradigms-and-consistency](https://affpapa.org/nevibecode/skills/layout-paradigms-and-consistency.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 734 установки — Помогает выбрать парадигму макета (лента, канбан, таблица, мастер-деталь) и выдержать единую структуру экранов или продающего лендинга.
- [information-architecture](https://affpapa.org/nevibecode/skills/aj-geddes-information-architecture.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 634 установки — Скилл помогает спроектировать навигацию, дерево разделов и таксономию для сайта или документации.
- [poster-design-generation](https://affpapa.org/nevibecode/skills/poster-design-generation.md) — скилл · eachlabs · Claude Code, Codex, Cursor +3 · 2100 установок — Скилл генерирует макеты постеров через each::sense: киноафиши, афиши концертов, продуктовые и travel-плакаты.
- [canva-branded-presentation](https://affpapa.org/nevibecode/skills/canva-branded-presentation.md) — скилл (официальный OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · 26 установок — Генерирует фирменные презентации в Canva по текстовому брифу, ссылке или идентификатору дизайна.
- [data-visualization](https://affpapa.org/nevibecode/skills/data-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 26 установок — Скилл направляет задачи по веб-визуализации к подходящему подходу: от выбора графика до карт, диаграмм и экспорта.
- [color-accessibility](https://affpapa.org/nevibecode/skills/color-accessibility.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 619 установок — Помогает создавать палитры с учётом дальтонизма и требований WCAG AA и AAA.
- [web-design-guidelines](https://affpapa.org/nevibecode/skills/agent-skills-web-design-guidelines.md) — скилл · agent-skills · Claude Code, Codex, Cursor +3 · 896 установок — Скилл проверяет веб-интерфейс по правилам доступности и UX.
- [sync-figma-token](https://affpapa.org/nevibecode/skills/sync-figma-token.md) — скилл · firebenders · Claude Code, Codex, Cursor +3 · 676 установок — Скилл сверяет дизайн-токены в коде с переменными Figma, показывает расхождения и применяет правки только после подтверждения.
- [contour-to-mesh](https://affpapa.org/nevibecode/skills/contour-to-mesh.md) — скилл · RobLe3 · Claude Code, Codex, Cursor +3 · 788 установок — Строит меш в Blender прямо из контура или маски, а не из примерных примитивов.
- [user-research-analysis](https://affpapa.org/nevibecode/skills/user-research-analysis.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 612 установок — Скилл для разбора интервью и опросов: вытаскивает темы, боли и цитаты, чтобы решения по дизайну опирались на данные.
- [agency-agents-ai-specialists](https://affpapa.org/nevibecode/skills/agency-agents-ai-specialists.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 2100 установок — Набор персон агентов для инженерных, дизайнерских и маркетинговых задач.
- [gsap](https://affpapa.org/nevibecode/skills/martinholovsky-gsap.md) — скилл · martinholovsky · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для GSAP-анимаций: вход и выход панелей HUD, переходы статус-индикаторов, эффекты по скроллу.
- [landing-page-design](https://affpapa.org/nevibecode/skills/omer-metin-landing-page-design.md) — скилл · omer-metin · Claude Code, Codex, Cursor +3 · 447 установок — Скилл для проектирования лендингов: помогает агенту строить страницы вокруг одной цели и проверять каждое решение по справочникам.
- [design-systems](https://affpapa.org/nevibecode/skills/design-systems.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 903 установки — Помогает агенту выстроить дизайн-токены, компонентную библиотеку и правила доступности в одном проекте.
- [canva-translate-design](https://affpapa.org/nevibecode/skills/canva-translate-design.md) — скилл (официальный OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · 25 установок — Переводит весь текст в дизайне Canva и создаёт отдельную копию.
- [lower-thirds](https://affpapa.org/nevibecode/skills/lower-thirds.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 1700 установок — Собирает анимированную плашку с именем и должностью в нижней части кадра: вход, пауза для чтения, выход.
- [21st-ui-build](https://affpapa.org/nevibecode/skills/21st-ui-build.md) — скилл · 21st-dev · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для реализации страниц и компонентов в существующем веб-проекте: сначала читает дизайн-контекст и токены, потом ищет готовое в 21st.
- [modal-and-overlay-patterns](https://affpapa.org/nevibecode/skills/modal-and-overlay-patterns.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 686 установок — Правила выбора и вёрстки всплывающих окон: от подсказок и шторок до блокирующих модальных диалогов с единой подложкой и строгой доступностью.
- [operational-expert-tool-ui](https://affpapa.org/nevibecode/skills/operational-expert-tool-ui.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 689 установок — Задаёт правила интерфейса для диспетчерских, складских и логистических инструментов: плотность данных вместо воздуха, статус виден сразу.
- [prototype](https://affpapa.org/nevibecode/skills/adobe-prototype.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 524 установки — Собирает предлагаемый редизайн страницы в один статичный HTML-файл, который можно открыть в браузере и править через чат.
- [present](https://affpapa.org/nevibecode/skills/present.md) — скилл · ghaida · Claude Code, Codex, Cursor +3 · 398 установок — Собирает деки для дизайн-ревью, ресёрч-ридаутов и питчей: сначала интервью и утверждённый план истории, потом сборка слайдов.
- [micro-interactions](https://affpapa.org/nevibecode/skills/micro-interactions.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для ИИ-агента, который подсказывает, как анимировать кнопки, тумблеры, чекбоксы, индикаторы загрузки и бейджи уведомлений.

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

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