К основному содержанию
скилл CX Codex

ux-design · mindrally — скилл для Claude Code: правила UX-проектирования

Скилл задаёт агенту правила UX-проектирования: от исследования пользователей до доступности и адаптивной вёрстки. Пригодится, когда проектируешь или проверяешь интерфейс.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Mindrally/skills --skill ux-design -a claude-code
Открыть на GitHub

Что делает ux-design

Скилл превращает ИИ-агента в ревьюера пользовательского опыта. Внутри — набор инструкций по исследованию пользователей, информационной архитектуре, интерактивному и визуальному дизайну, доступности, производительности, мобильной вёрстке и тестированию. Агент применяет их, когда вы просите спроектировать экран или разобрать существующий.

Практическая часть конкретна: семантический HTML для скринридеров, контраст по WCAG 2.1 AA, относительные единицы вместо фиксированных пикселей, CSS Grid и Flexbox, ленивая загрузка ресурсов, отслеживание Core Web Vitals (LCP, FID, CLS). Есть блоки про микрокопирайт, управление когнитивной нагрузкой и эмоциональный дизайн.

Скилл не подключает никаких библиотек и не запускает проверок сам — это текст с правилами, который читает агент. Поэтому результат зависит от того, насколько точно вы описали задачу: без контекста проекта советы выйдут общими. Ставится одной командой через npx skills add в шесть платформ, включая Claude, Codex и Cursor.

Какие задачи решает

  • разобрать макет экрана и найти проблемы с иерархией
  • проверить контраст и семантику под WCAG 2.1 AA
  • спроектировать навигацию и структуру разделов
  • переписать микрокопирайт и тексты кнопок
  • упростить форму, разбив её на короткие шаги

Примеры запросов агенту

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

Как установить ux-design

1Через Skills CLI (Vercel)

npx skills add Mindrally/skills --skill ux-design -a claude-code

2Вручную: положить файлы

~/.claude/skills/ux-design/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/ux-design/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора168

systemverilog Скилл задаёт агенту правила проектирования на SystemVerilog: модульность, синхронные схемы, тайминги и верификация. Пригодится, если вы пишете RTL для FPGA или ASIC. CX Codex +1 1 100установок fpga Набор правил разработки под FPGA на SystemVerilog в Vivado. Помогает настраивать тайминги, шину AXI, оптимизировать ресурсы и писать тестовые окружения. CX Codex +1 1 100установок php-development Скилл задаёт агенту правила написания PHP 8+ кода: SOLID, PSR-12, строгая типизация, тесты на PHPUnit. Пригодится, когда проект на PHP растёт и хочется единый стиль. CX Codex +1 1 100установок gitlab-workflow Скилл учит ИИ-ассистента правилам GitLab: от оформления merge request до настройки конвейеров .gitlab-ci.yml. Помогает выстроить командную разработку. CX Codex +1 1 100установок analytics-data-analysis Задаёт агенту правила работы с pandas, matplotlib и seaborn: как чистить датасет, строить графики и оформлять Jupyter-ноутбук. CX Codex +1 1 100установок rabbitmq-development Набор правил для ИИ-агента: как проектировать обменники, очереди и потребителей RabbitMQ без типичных ошибок. CX Codex +1 1 100установок nextauth-authentication Скилл учит агента внедрять аутентификацию через NextAuth.js (Auth.js v5) в Next.js. Помогает настроить сессии, роуты и защиту страниц. CX Codex +1 1 100установок scipy-best-practices Скилл задаёт агенту правила научных вычислений на SciPy: оптимизация, линейная алгебра, статистика, сигналы. Пригодится, когда код на Python считает числа, а не рисует интерфейсы. CX Codex +1 1 000установок

Другие версии ux-design

Похожие

design-review plugin87 Скилл оценивает интерфейс по шести взвешенным критериям, прогоняет эвристики Нильсена и выдаёт таблицу находок по приоритету. CX Codex +1 594установок ui-design PyModel Свод правил фронтенд-дизайна из 42 пунктов в 8 категориях. Помогает настроить доступность по WCAG, вёрстку и показатели Core Web Vitals. CX Codex +1 513установок dark-mode-design-expert curiositech Скилл по тёмной теме интерфейсов: атмосферные палитры, требования WCAG и токены для светлой и тёмной схемы. Пригодится, когда нужно переключать тему без потери читаемости. CX Codex +1 304установок ios-ux-design mosif16 Скилл, который подключает к ИИ-агенту экспертизу по Human Interface Guidelines и SwiftUI: аудит экранов, разбор паттернов, спецификации на доработку. CX Codex +1 543установок frontend-design-direction affaan-m Скилл задаёт направление для веб-интерфейсов: помогает продумать и проверить визуальную иерархию, состояния, адаптивность и доступность. CX Codex +1 5 300установок Web Design Builder rknall Собирает HTML5-макеты и лендинги по описанию, а потом сам проверяет доступность и работу интерфейса через Playwright MCP. CX Codex +1 416установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о ux-design

Как установить ux-design в Claude?

Выполните npx skills add Mindrally/skills --skill ux-design -a claude-code. Скилл окажется в ~/.claude/skills/ux-design/SKILL.md.

Что делает скилл ux-design?

Задаёт агенту правила UX-проектирования: исследование пользователей, информационная архитектура, интерактивный и визуальный дизайн, доступность, производительность, мобильная вёрстка, тестирование и документация.

На каких платформах работает ux-design?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для каждой свой флаг установки, например -a cursor или -a gemini-cli.

Исходный текст

SKILL.md · Apache-2.0
---
name: ux-design
description: UX design principles for creating intuitive, accessible, and user-centered digital experiences
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# UX Design Best Practices

You are an expert in UX design principles for software development. Apply these guidelines when designing or reviewing user experiences.

## User Research

- Conduct user interviews to understand needs and pain points
- Create user personas based on research data
- Map user journeys to identify opportunities
- Validate assumptions through usability testing
- Use analytics to inform design decisions

## Information Architecture

- Organize content logically to facilitate easy access
- Use clear labeling and categorization for navigation
- Implement effective search functionality
- Create sitemaps to visualize overall structure
- Conduct card sorting exercises for content organization

## Interaction Design

- Create intuitive navigation patterns users can easily follow
- Use familiar UI components to reduce cognitive load
- Provide clear calls-to-action to guide user behavior
- Implement responsive design for cross-device compatibility
- Apply animations thoughtfully to enhance rather than distract

## Visual Design

- Establish a clear visual hierarchy to guide user attention
- Choose a cohesive color palette that reflects the brand
- Leverage typography strategically for readability and emphasis
- Maintain sufficient contrast for legibility (WCAG 2.1 AA standard)
- Keep styling consistent throughout the application

## Accessibility

- Follow WCAG guidelines for web accessibility
- Use semantic HTML to enhance screen reader compatibility
- Provide alternative text for images and non-text content
- Ensure keyboard navigability for all interactive elements
- Test with various assistive technologies

## Performance Optimization

- Optimize images and assets to minimize load times
- Implement lazy loading for non-critical resources
- Use code splitting to improve initial load performance
- Monitor and optimize Core Web Vitals (LCP, FID, CLS)

## User Feedback

- Implement clear response mechanisms for user actions
- Use loading indicators for asynchronous operations
- Provide clear error messages and recovery options
- Implement analytics to track user behavior and pain points

## Mobile-First Design

- Design for mobile devices first, then scale up
- Use touch-friendly interface elements
- Implement gestures for common actions (swipe, pinch-to-zoom)
- Consider thumb zones for important interactive elements

## Consistency

- Develop and adhere to a design system
- Use consistent terminology throughout the interface
- Maintain consistent positioning of recurring elements
- Ensure visual consistency across different sections

## Testing and Iteration

- Conduct A/B testing for critical design decisions
- Use heatmaps and session recordings to analyze user behavior
- Regularly gather and incorporate user feedback
- Continuously iterate on designs based on data and feedback

## Documentation

- Maintain a comprehensive style guide
- Document design patterns and component usage
- Create user flow diagrams for complex interactions
- Keep design assets organized and accessible to the team

## Responsive Layouts

- Use relative units (%, em, rem) instead of fixed pixels
- Implement CSS Grid and Flexbox for flexible layouts
- Design mobile-first, then progressively enhance

## Content Strategy

- Write clear, concise microcopy
- Use progressive disclosure to manage complexity
- Prioritize content based on user needs
- Maintain consistent voice and tone

## Cognitive Load Management

- Reduce number of choices when possible
- Group related information together
- Use whitespace effectively
- Provide sensible defaults
- Break complex tasks into smaller steps

## Emotional Design

- Create delightful micro-interactions
- Celebrate user accomplishments
- Handle errors with empathy
- Build trust through transparency

Stay current with UX design techniques and industry standards.

© Mindrally · Apache-2.0 · Mindrally/skills

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой